디자이너 노트

개념 📃기본으로 돌아가자!  학습 이유 🪄최근에 자바스크립트의 기초를 많이 잊었다는 것을 알게 되었다. 또한 프로젝트 경험 이후, 자바스크립트를 이제 좀 알 것 같은데, 이런 상태에서 공부하면 더 효과적일 것 같아 다시 시작하게 되었다.  자바스크립트의 역사1995년 12월 10일만에 만들었음.넷스케이프 브라우저가 인터랙티브하길 바래서 탄생.자바스크립트가 가장 훌륭한 프로그래밍 언어는 아니다.모든 브라우저들은 딱 세가지의 언어를 이해한다. HTML, CSS, Javascript → 그래서 따로 설치할 필요가 없다.(만약 파이썬을 사용하고 싶으면, 파이썬을 설치해야 한다.)  Basic Data Types자바스크립트 뿐 만 아니라, 프로그래밍 언어의 기본적인 데이터 타입.자바스크립트에는 type이라는 ..

개념 📃Vanilla JS를 능숙하게 다루기 위해서는 DOM을 조작하는 방법을 알아야 한다.   활용 예시 🪄 00:00:00 Start Stop Reset   getElementById()const myStart = document.getElementById('start'); 이 메서드는 전달된 이름 id가 포함된 엘리먼트를 반환. id는 고유해야하기 때문에 원하는 요소를 가져오는 데 매우 유용.  getElementByClassName()const myContainer = document.getElementByClassName('container'); 이 메서드는 전달된 특정 이름 클래스를 포..

5가지의 배열 변형 메서드 🪄 1. filter 기존 배열에서 조건을 만족하는 요소들만 필터링 하여 새로운 배열로 반환 let arr1 = [ { name: "이정환", hobby: "테니스" }, { name: "이정환", hobby: "테니스" }, { name: "이정환", hobby: "테니스" }, ]; const tennisPeople = arr1.filter((item) => item.hobby === "테니스"); console.log(tennisPeople); 2. map 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고, 그 결과값을 모아서 새로운 배열 반환 let arr2 = [1, 2, 3]; const mapResult1 = arr2.map((item, index, arra..

5가지 요소 순회 및 탐색 메서드 👀 1. forEach 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드 새로운 배열을 반환하지 않고, 배열의 각 요소를 순회하면서 콜백함수를 실행하는데 사용 let arr1 = [1, 2, 3]; arr1.forEach((item, index) => { // console.log(index, item * 2); }); let doubledArr = []; arr1.forEach((item) => { doubledArr.push(item * 2); }); console.log(doubledArr); // [2,4,6] 2. includes 배열의 특정 요소가 있는 지 확인하는 메서드 let arr2 = [1, 2, 3]; let isInclude = ..

공부 계기 🧚 리액트에서 투두리스트를 구현하면서 배열 메서드가 많이 사용되는 걸 배웠다. 그래서 배열 메서드를 주제로 따로 빼서 정리했다. 각각 메서드의 특징과 활용 상황을 이해하여 배열메서드에 대한 두려움을 떨쳐보자! 6가지의 요소 조작 메서드 🕹️ 1. push 배열의 맨 뒤에 새로운 요소를 추가하는 메서드 let arr1 = [1, 2, 3]; const newLength = arr1.push(4, 5, 6, 7); console.log(arr1); // [1,2,3,4,5,6,7] console.log(newLength); // 7 2. pop 배열의 맨 뒤에 있는 요소를 제거하고, 반환 let arr2 = [1, 2, 3]; const poppedItem = arr2.pop(); console...

async/await은 Promise를 기반으로 동작한다. promise는 chaining을 할 수 있다. 그러나 매번 체이닝을 하면 코드가 난잡해질 수 있어 async와 await가 등장했다. 고로 async/await은 promise의 syntactic sugar라고 이야기 한다. - clear style of using promise 더보기 *syntactic sugar 완전 새로운 문법이 아니라 기존 문법위에 또는 기존 문법을 감싸서 조금 더 편하게 사용할 수 있는 API를 제공하는 것을 syntactic sugar라고 이야기한다. 예를 들어 class는 기존 prototype에서 등장한 문법이다. async 함수 async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다. ..

콜백 지옥!(callback hell) 함수를 지속적으로 네스팅해서 가독성을 떨어트리게 만드는 것. 자바스크립트란 기본적으로 호이스팅이 완료된 후, 동기적(synchronous) 처리가 발생한다. 더보기 호이스팅이란? var, function 선언문이 자동적으로 제일 위로 올라가는 것. 콜백 함수 다른 함수의 인수로 전달되는 함수를 의미한다. 즉, 함수 안에서 다른 함수를 인수로 넣어 사용할 수 있으며, 이때 사용되는 함수를 콜백함수라고 부른다. 콜백함수는 2개가 있다. - Synchronous callback - Asynchronous callback 동기적 처리의 특징(synchronous) console.log('1'); setTimeout(()=> console.log('2'), 1000); //..

프로미스란 무엇인가? Promise is a JavaScript object for asynchronous operation. 비동기 처리 상태와 처리 결과를 관리하는 객체 중요 포인트 1. state State: pending -> fulfilled or rejected 2. Producer vs Consumer 프로미스의 생성하기(Producer) when new Promise is created, the executor runs automatically. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise) 객체를 생성한다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데, 이 콜백함수는 resolve와 reject 함수를 인수로 전달받..

기본 개념 자바스크립트의 엔진은 단하나의 실행 컨택스트를 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며, 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미한다. 이처럼 자바스크립트의 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread)방식으로 동작한다. 비동기 통신이란? 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다. 타이머 함수인 setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다. 예시로, 동기적인건 전부 다 불러오는 것. 비동기적인 건 내가 원하는 부품만 빼서 왔다 갔다 ..

객체란?다양한 타입의 값(원시 값 또는 객체)을 하나의 단위로 구성한 복합적인 자료구조(data structure)원시값은 변경 불가능한 값(immutable value)이지만, 객체는 변경가능한 값(mutable value)이다.var person = {name: ‘Lee’, ⇒ propertyage(key): 20(value), ⇒ property increase: function(){this.num++;} };자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다.값으로 취급된다는 것은 변수에 할당할 수 있고, 함수의 인자로 전달 가능, 함수의 리턴값으로 사용할 수 있음을 의미한다.상태와 동작을 하나의 단위로 구조화 할 수 있어 유용하다.객체를 생성하는 방법객체 리터럴객체 리터럴의 중괄호는 코..