가상돔(Virtual DOM)과 React Fiber 구조
관련글React의 가상 DOM, Vue의 가상 DOM과 비교 (동작방식) 가상돔 (Virtual DOM)과 React Fiber 구조 가상돔 (Virtual DOM) 이란? 가상돔은 실제돔의 변경을 최소화하여 성능을 최적화하는 개념이다. React(Vue, Preact 등....)에서 UI를 효율적으로 업데이트하기 위해 사용된다. DOM (Document Object Model, 문서 객체 모델)은 웹 브라우저가 HTML 문서를 해석하여 트리 구조(객체 모델)로 표현한 것이다. 즉, HTML을 브라우저가 이해할 수 있도록 만든 객체 형태의 구조.DOM을 통해 자바스크립트에서 HTML 요소를 조작할수있다.기존 DOM을 직접 조작하면 성능 비용이 크고 DOM의 업데이트가 많아질수록 느려진다는 기존 DOM의..
웹 렌더링 기법 종류 간단히 알아보자 (CSR, SSR, SSG, ISR 등..) 웹 렌더링 기법의 종류CSR (Client-Side Rendering) SSR (Server-Side Rendering)ISR (Incremental Static Regeneration)SSG (Static Site Generation)DPR (Deferred Page Rendering)SPR (Streaming Page Rendering)ESR (Edge-Side Rendering) RSC (React Server Components) 개념은 이해하고 넘어가면 좋다. 하지만 꼭 다 정확한 정보까지 학습할 필요는 없다. 그 자체의 개념들도 있고, 같이 사용가능한 기법들도 있다. 간단히 알아보자. CSR (Client..
AbortController 자바스크립트에서 비동기 작업을 중단할 수 있도록 도와주는 API이다. (특히 fetch() 요청 중단)Promise는 원래 취소 기능이 없지만, AbortController로 특정 요청을 강제로 취소할 수 있다. 기본 개념AbortController는 비동기 작업을 제어하기 위한 signal 객체를 제공한다.controller.abort()를 호출하면 해당 signal을 감지하는 모든 요청이 즉시 취소된다.const controller = new AbortController(); const { signal } = controller; fetch("https://jsonplaceholder.typicode.com/todos/1", { signal }) .then((respon..
관련 주제 '이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관' 이벤트 루프와 Web APIs의 관계자바스크립트는 싱글 스레드 언어로 한번에 하나의 작업만 실행할 수 있다.하지만 브라우저에서 비동기 작업을 처리할때는 이벤트 루프와 Web APIs가 함께 작동하여 여러 작업을 효율적으로 수행할 수 있다.즉, Web APIs가 없을 경우에는 자바스크립트는 싱글 스레드 언어이므로 모든 작업을 순차적으로 실행해야하는 비극을 겪을 수 있다. Web APIs 란?브라우저가 제공하는 기능으로 자바스크립트가 직접 실행할 수 없는 작업을 담당한다.자바스크립트는 Web APIs에 작업을 위임하고, Web APIs는 작업이 끝나면 콜백을 다시 자바스크립트로 넘겨주게 된다.즉, Web APIs는 자바스크립트의 비동기 처..