본문 바로가기

전체 글125

비동기 퀴즈 Q1. 왜 1->3->2 순으로 출력되는지 설명하시오. console.log("1"); setTimeout(() => console.log("2")); new Promise((resolve) => resolve()).then(() => { console.log("3"); }); A. 먼저, '스크립트' 태스크가 태스크 큐에 들어간다. 태스크 큐에서 이벤트 루프가 console.log('1')을 콜스택에 넣고 실행시킨다. setTimeout이 콜스택으로 가고 Wep API가 이를 받아서 타이머를 실행시킨다. 타이머가 끝난 후 setTimeout의 콜백함수를 태스크 큐에 넣는다. promise가 콜스택으로 가고, 콜백 함수를 마이크로 태스크 큐에 넣는다. 이벤트루프가 마이크로 태스크 큐에서 가장 오래된 태스.. 2023. 3. 20.
HTML의 자식 요소 제거 방식 어떻게 요소를 제거하세요? 미션을 진행하면서 요소를 제거해야 할 일이 종종 있다. innerHTML을 이용해 해당 요소를 제거하는 것이 보편적인 방법이지만 이번에 새로운 방법을 알게 돼 이에 대해 소개하고, innerHTML로 제거하는 것과의 차이점을 이야기해보려고 한다. innerHTML과 removeChild 먼저 자주 사용하는 innerHTML로 요소를 제거하는 방법은 이와 같다. target.innerHTML = ‘’; 반면, 새로운 방법은 while문을 사용해 첫 번째 자식이 없을 때까지 지우는 방식이다. 코드로 보면 이런 모습이다. while(target.firstChild){ target.removeChild(target.firstChild); 이번 미션에서는 레스토랑 리스트를 업데이트할 때.. 2023. 3. 20.
innerText와 textContent의 차이 innerText 숨겨진 요소의 텍스트는 반환하지 않습니다. 사람이 읽을 수 있는 요소만 처리하죠. innerText의 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. 텍스트가 최종적으로 렌더링 된 모습이라고 생각하시면 됩니다. textContent 노드의 모든 요소를 반환합니다. 'script'와 'style' 요소를 포함한 모든 요소의 콘텐츠를 가지고 옵니다. 태그와 상관없이 해당 노드가 가지고 있는 text라고 생각하시면 됩니다. 코드로 살펴보기 Hello Secret console.log(document.querySelector('.greeting').innerText); //Hello console.log(document.querySelector('.greeting').textC.. 2023. 3. 20.
배열 🧀 배열 여러 개의 값을 순차적으로 나열한 자료구조. 배열 안에는 요소를 가지고 있고, 각 요소는 배열 안에서 인덱스를 가지고 있다. 인덱스는 0부터 시작하고, 각 요소의 인덱스를 사용하면 요소에 접근할 수 있다. const arr = ['a', 'b', 'c']; arr[0]; //a arr[1]; //b arr[2]; //c 🧀 배열 생성 배열은 다양한 방법으로 생성할 수 있다. const array1 = new Array(1, 2); console.log(array1); //[ 1, 2 ] const array2 = Array.of(1, 2); console.log(array2); //[ 1, 2 ] const array3 = [1, 2]; console.log(array3); //[ 1, 2 ] .. 2023. 2. 26.
클래스 🌼 클래스의 기본 문법 class ClassName { constructor() { } method1() { } method2() { } method3() { } } 클래스를 생성한 뒤 'new ClassName()'을 호출하면 객체가 생성된다. constructor는 new에 의해 자동으로 호출되며, 객체를 초기화할 수 있다. class Fruit { constructor(name) { this.name = name; } say() { console.log(this.name); } } const apple = new Fruit('apple'); apple.say(); //apple new Fruit를 하는 순간 새로운 객체가 생성되고 constructor가 자동으로 실행된다. this.name에 'ap.. 2023. 2. 24.
객체 ☀️ 객체 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 객체는 다양한 방법으로 생성할 수 있는데 가장 일반적인 방식은 객체 리터럴을 사용하는 것이다. const fruit = { name: 'apple', color: 'red', }; 객체는 { key : value } 형태를 기본으로 가지고 있다. key에는 문자, 숫자, 문자열 등이 사용가능하고 value에는 원시값, 객체 등이 사용가능하다. ☀️ 프로퍼티 접근 프로퍼티에 접근하기 위해서는 두 가지 방법이 있다. 먼저, 마침표 표기법이다. const fruit = { name: 'apple', color: 'red', }; console.log(fruit.name); 두번째는 대괄호 표기법이다. 다만, 첫 번째 .. 2023. 2. 21.