반응형 Front-end (프론트엔드)9 [프론트엔드] React - Virtual DOM / Reconciliation / Diffing / key Question : React Virtual DOM 에 대해 설명하시오 Answer : 리액트의 Virtual DOM은 실제 DOM과 동일한 구조를 메모리 상에 가상으로 구현한 것입니다. 이 가상 DOM은 애플리케이션의 UI 상태를 나타내며, 실제 DOM과는 별도로 관리됩니다. 상태 변경 시, 리액트는 가상 DOM과 이전 가상 DOM을 비교(diffing)하여 변경된 부분만을 감지하고, 실제 DOM에 반영합니다. 이를 통해 불필요한 DOM 조작을 최소화하고 성능을 향상시킵니다. 이는 특히 대규모 애플리케이션에서 UI 업데이트의 효율성을 높여줍니다. Question : Reconciliation 에 대해 설명하시오 Answer : Reconciliation(재조정)은 React에서 Virtual DO.. 2024. 5. 13. [프론트엔드] 자바스크립트 / 자바스크립트 특징 소개 오늘은 자바스크립트, 자바스크립트 특징 에 대해 알아보도록 하겠습니다. 목차 - 자바스크립트란 - 자바스크립트 특징 1) 자바스크립트란 동적인 웹페이지를 만들기 위한 프로그래밍 언어입니다. 웹페이지를 조작하고, 클라이언트-서버 간 상호작용에 관한 일을 관여합니다. 메인 쓰레드인 이벤트 루프가 싱글 쓰레드이기 때문에 자바스크립트를 싱글 쓰레드 언어라고 합니다. 참고 ) 자바스크립트 자체는 싱글 쓰레드가 맞지만 이벤트 루프만 독립적으로 실행되지 않고 웹 브라우저나 NodeJS 같은 멀티 쓰레드 환경에서 실행됩니다. 즉, 자바스크립트 자체는 싱글 쓰레드가 맞지만 자바스크립트 런타임은 싱글쓰레드가 아닙니다. 참고 ) 자바스크립트가 싱글 쓰레드인 이유? 만약 자바스립트가 멀티 쓰레드로 실행되는 언어라면 웹페.. 2024. 2. 12. [프론트엔드] 리플로우 / 리페인트 소개 오늘은 렌더링 성능 최적화를 위한 리플로우, 리페인트에 대해 알아보도록 하겠습니다. 목차 - 리플로우 - 리페인트 - 리플로우와 리페인트가 일어나는 상황 - 리플로우,리페인트 최적화 방법 1) 리플로우의 정의 : 레이아웃 변경 시 모든 노드를 다시 계산하여 레이아웃 트리(랜더 트리)를 재구성하는 작업입니다. 2) 리페인트의 정의 : Reflow 과정이 끝나고 재생성된 레이아웃 트리(랜더 트리)를 다시 레이어에 그리는 작업입니다. 3) 리플로우와 리페인트가 일어나는 상황 리플로우가 일어나는 상황 - 페이지 초기 렌더링 시 - 윈도우 리사이징 시 (Viewport 크기 변경 시) - DOM 요소 추가 및 삭제 시 - DOM 요소의 위치, 크기 변경 시 - 폰트 변경과 이미지 크기 변경 시 리페인트 - .. 2024. 2. 12. [프론트엔드] 자바스크립트와 비동기처리 소개 오늘은 자바스크립트의 비동기처리에 대해 알아보도록 하겠습니다. 목차 - 자바스크립트가 비동기 처리가 가능한 이유 - 비동기처리 예시 1) 자바스크립트는 싱글스레드임에도 비동기 처리가 가능한 이유 싱글스레드 외에 Web API, Task Queue, Event Loop 와 같은 요소들이 존재하기 때문입니다. 즉, 자바스크립트 자체는 싱글스레드이지만 자바스크립트가 브라우저 위에서 동작하기 때문입니다. Web API: 브라우저에서 제공하는 API 입니다. DOM, Ajax,Timeout 등이 있으며 CallStack에서 실행된 비동기 함수는 Web API 를 호출하고, Web API는 콜백 함수를 Task Queue 에 넣습니다. Event Loop: CallStack 과 Task Queue의 상태를 체.. 2024. 1. 28. 이전 1 2 3 다음 반응형
