본문 바로가기

javascript16

< 날씨별 추천 옷차림 > 세 번째 미니 프로젝트 스터디의 주제는 API를 활용한 웹페이지 만들기! 수업 때 배운 걸 직접 써먹어 보는 거라 왠지 두근두근했다. 제일 처음 떠오른 아이디어는 '꽃가루 알림'이었다. 개인적으로 꽃가루 알레르기가 있어 평소 필요하다고 느끼던 거였다. 먼저, 공공데이터포털(https://www.data.go.kr/index.do)에 들어가 관련 API를 찾아 활용 신청을 했다. 그리고 데이터가 어떻게 받아와지는지 확인하기 위해 예제를 보고 포스트맨을 통해 요청을 보내보았다. 그런데 지금은 관련 데이터의 제공 기간이 아니어서 응답 메시지를 제대로 확인할 수가 없었다. 배우는 입장에선 직접 눈으로 응답 메시지를 확인하고 데이터를 가공하는 부분이 필요할 것 같아 결국 주제를 바꾸기로 했다. 다음으로는 활용할 .. 2023. 2. 23.
✨ 귀여운 계산기 ✨ 미니 프로젝트 스터디를 시작했다. 첫 번째 주제는 바로 계산기 만들기! 안 그래도 실습 때 만들었던 계산기 목업에 실제 기능을 넣어볼 생각이었기 때문에 즐겁게 프로젝트를 시작했다. 실습 때 만들었던 계산기 목업 ↓↓↓ https://ddppp.tistory.com/31 나만의 계산기 만들기 아래 이미지는 12/26일 페어 실습 때 만든 계산기 목업이다. 먼저 아래와 같이 파워포인트를 이용하여 간단한 와이어 프레임을 만든 후 작업하였다. 배경과 글꼴은 웹에서 가져와봤고, 정렬은 flex ddppp.tistory.com - 예전에 짰던 코드를 다시 보려니 이해하기 쉽지 않았다. 그때도 나름 체계적으로 정리한다고 한 것 같은데 아무래도 눈에 확 들어오지는 않는 것 같다. 아직 기능 구현만으로도 벅차긴 하지만 .. 2023. 1. 29.
[JavaScript] ES6 주요 문법 ▶spread / rest 문법 spread : 주로 배열을 풀어 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용함. rest : 파라미터를 배열의 형태로 받아서 사용. 파라미터의 개수가 가변적일 때 유용하다. → 참고로 reduce는 배열의 각 요소를 순회하며 반복적인 연산을 하는 메서드이다. (하나의 결괏값을 반환함) → 남아있는 모든 인자를 하나의 배열에 담는다. ◆ spread 문법은 배열에서 강력한 힘을 발휘한다. 1. 배열 합치기 let parts = ['shoulders', 'knees']; let lyrics = ['head', ...parts, 'and', 'toes']; let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...a.. 2023. 1. 4.
[JavaScript] 스코프 ● 스코프(Scope) : 변수 접근 규칙에 따른 유효범위 ① 변수에 접근할 수 있는 범위가 존재한다. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용이 가능하지만, 안쪽에서 선언한 변수는 바깥쪽 스코프에서 사용할 수 없다. 예를 들어 함수 안쪽에 정의된 변수를 함수 바깥쪽에서 접근하면 ReferenceError를 낸다. ② 스코프는 중첩이 가능하다. 특별히 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부르며, 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)라고 한다. 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다. ● 스코프의 종류 1) 블록 스코프(block scope) : 중괄호로 둘러싼 범위 블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나는.. 2023. 1. 3.
[JavaScript] 원시 자료형 / 참조 자료형 원시 자료형 (primitive data type) : 고정된 저장 공간을 차지하는 데이터 ex. string, number, bigint, boolean, undefined, symbol, (null) - 하나의 변수(데이터 보관함)에는 하나의 데이터만 담을 수 있다. - 복사해서 이용해도 원래 자료에 영향 X, 즉 값 자체에 대한 변경이 불가능하다. → 변수에 다른 데이터를 할당할 수는 있음. (새로운 값으로 재할당 가능) 참조 자료형 (reference data type) : 원시 자료형이 아닌 모든 것 ex. 배열, 객체, 함수 ··· - 변수에 값이 아닌 주소(reference)를 저장하며, 그 주소(데이터의 크기가 동적으로 변하는 특별한 데이터 보관함(heap))에 데이터를 넣어 관리하는 것... 2023. 1. 2.
[JavaScript] 객체 - 각기 다른 값을 가질 수 있지만 입력해야 하는 데이터의 종류가 동일한 경우, 즉, 공통적인 속성을 가지는 경우 객체(object)를 사용하면 손쉽게 데이터를 관리할 수 있다. (ex) 게임 캐릭터, 회원 주소록 { 키(key) : 값(value) } ☞ 이 둘을 합쳐서(키-값 쌍) 속성(property)라고 한다. let user = { firstName : 'Yeseul', //쉼표로 구분 lastName : 'Choi', email : 'dptmf085@gmail.com' }; - 객체의 값을 사용하는 방법 2가지 (dot notation, bracket notation) user.lastName; //'Choi' user['lastName']; //'Choi' //'' "" ``(string 타.. 2022. 12. 30.
[JavaScript] 배열 - 배열과 객체란 JavaScript에서 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입이다. - 배열([ ]) : 순서( index(인덱스); 0부터 번호를 매김 )가 있는 값( element(요소) ) let myNumber = [73, 98, 86, 61, 96]; //배열(array)의 예시 // ☞ 배열 안에 배열을 넣을 수도 있다. [[1, 2], [3, 4], [5, 6]] myNumber[3]; //myNumber라는 배열의 3번째 인덱스를 *조회* //61 //참고로 5번째 인덱스를 조회하면 undefined가 찍힘. // ☞ 배열 안의 배열을 조회하려면 myNumber[1][0]; ->3 이런 식으로 중첩하면 됨. myNumber[3] = 200; //myNumber라는 배열의 .. 2022. 12. 29.
노마드 코더 바닐라JS로 크롬 앱 만들기 후기 (11.21~12.04 챌린지 졸업) https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 까먹기 전에 작성하는 완강 후기! 두 달 전쯤 개발을 본격적으로 배워보려고 다양한 강의와 자료들을 찾아보던 중, 노마드 코더의 클론코딩 강의에 대해 알게 되었다. 이제 막 입문한 초보이지만 무언가 결과물을 만들어 보고 싶었기에 해당 강의들을 들어보기로 했고, 지원한 부트캠프의 시작일 전까지 바닐라JS 강의까지의 완강을 목표로 공부하기 시작했다. 먼저 코코아톡 클론코딩을 듣고 있던 와중에 바닐라JS 챌린지가 시작되었다. 다음에 다시 할까 하다가 일단 같이 진행해 보기로 했.. 2022. 12. 27.

티스토리툴바