코드잇 스프린트 4기/위클리 페이퍼19 [React] Virtual DOM 코드잇 스프린트 4기 6주 차 위클리 페이퍼 Virtual DOM 브라우저가 HTML을 렌더링 하는 과정은 다음과 같다. 1. HTML을 통해 DOM 트리를 생성한다. 2. CSS를 통해 CSSOM 트리를 생성한다. 3. DOM 트리와 CSS 트리로 렌더 트리를 생성한다. 4. 레이아웃을 계산한다. 5. 픽셀로 변환하여 화면을 그린다. 우리가 JS나 CSS로 DOM이나 CSS에 변화를 주면 위 과정을 반복한다. 웹 페이지의 요구사항이 복잡해지면서 DOM이나 CSS에 변화를 주는 작업이 빈번해졌다. 그 결과 성능을 많이 잡아먹는 문제가 생겼다. 그 해결책으로 DOM에 직접 요청을 하는 것이 아니라 가상돔(Virtual DOM)을 만들어 메모리에서 관리하여 변화가 있을 때 구 가상돔과 새 가상돔을 비교하여 .. 2024. 2. 4. [JavaScript] 비동기 문제 코드잇 스프린트 4기 6주 차 위클리 페이퍼 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 출력: 3 1. 전역 실행 컨텍스트가 콜 스택에 쌓이게 됩니다. 2. setTimeout 함수가 호출되면 실행 컨텍스트가 생성되고 콜 스택에 쌓이게 됩니다. 3. setTimeout는 콜백 함수를 호출하고 종료되어 콜 스택에서 제거됩니다. 4. setTimeout과 같은 비동기 함수의 콜백 함수는 브라우저에 의해서 최소 타이머의 시간 경과 후 태스크 큐에 쌓이게 됩니다. 6. setTimeout의 콜백 함수가 태스.. 2024. 2. 4. [HTTP] HTTP 메서드 코드잇 스프린트 4기 5주 차 위클리 페이퍼 HTTP 메서드란 서버에게 요청을 할 때 수행해야 할 동작을 지정하는 것이다. 종류 GET: 리소스 조회, 오직 데이터를 받기만 한다. POST: 데이터 작성, 등록한다. PUT: 데이터를 변경한다. PATCH: 데이터를 부분 변경한다. DELETE: 데이터 삭제한다. 작성 중... 감사합니다. 2024. 1. 27. [JavaScript] 이벤트 버블링, 캡처링, 위임 코드잇 스프린트 4기 5주 차 위클리 페이퍼 이벤트 버블링, 캡처링 자바스크립트를 이용해서 이벤트 핸들링을 다루다 보면 예상과는 다른 결과를 얻을 때가 있다. parent child child 구역을 눌렀을 때의 console 결과는 다음과 같다. 캡처링: parent 캡처링: child 버블링: child 버블링: parent child 구역을 눌렀는데 parent가 console에 나오게 되는 이유는 이벤트 흐름에 있다. 이벤트에는 3가지 흐름이 있다. · 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계. · 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계. · 버블링 단계: 이벤트가 상위 요소로 전파되는 단계. Window -> Document -> -> ... -> 이벤트가 발생한 곳 ->.. 2024. 1. 27. 이전 1 2 3 4 5 다음