diff --git a/00_Raw/Fiber 아키텍처와 동시성 (Concurrent Rendering).md b/00_Raw/Fiber 아키텍처와 동시성 (Concurrent Rendering).md new file mode 100644 index 00000000..007149aa --- /dev/null +++ b/00_Raw/Fiber 아키텍처와 동시성 (Concurrent Rendering).md @@ -0,0 +1,35 @@ +# [[Fiber 아키텍처와 동시성 (Concurrent Rendering)]] + +## 📌 Brief Summary +React의 **Fiber 아키텍처**는 단일 호출로 전체 트리를 동기적으로 렌더링하여 메인 스레드를 차단하던 기존의 한계를 극복하기 위해 재작성된 재조정(Reconciliation) 엔진입니다 [1, 2]. 이 엔진은 렌더링 과정을 작은 '작은 작업 단위(Unit of work)'로 분할하여 **동시성 렌더링(Concurrent Rendering)**을 구현합니다 [2, 3]. 결과적으로 긴급한 사용자 상호작용(예: 클릭, 타이핑)이 무거운 렌더링 작업에 의해 지연되지 않도록 작업을 일시 중지, 재개, 우선순위 재조정하여 사용자 인터페이스(UI)의 반응성을 극대화합니다 [4, 5]. + +## 📖 Core Content + +- **기존 렌더링의 문제점과 Fiber의 도입:** + React 16 이전에는 전체 컴포넌트 트리를 단일 재귀 호출로 처리하는 '스택 재조정자(Stack Reconciler)'를 사용했습니다 [2]. 이 방식은 렌더링이 완료될 때까지 메인 스레드를 차단(synchronous blocking)하여, 큰 규모의 애플리케이션에서는 UI가 사용자의 입력이나 애니메이션에 반응하지 못하는 문제를 발생시켰습니다 [2]. 이를 해결하기 위해 렌더링을 중단 및 재개할 수 있는 Fiber 아키텍처가 도입되었습니다 [1, 2]. + +- **작업 루프(Work Loop)와 작업 단위(Unit of Work):** + Fiber는 컴포넌트나 DOM 요소를 나타내는 'Fiber 노드' 단위로 렌더링 작업을 수행합니다 [2, 3]. 렌더링을 여러 프레임에 분산시키기 위해 '작업 루프'를 작동하며, 다음 작업을 선택하여 처리(beginWork)하다가 우선순위가 높은 작업이 발생하면 렌더링을 일시 중단하고 브라우저에 제어권을 양보(Yield)합니다 [3, 5]. + +- **재조정(Reconciliation) 단계의 분리:** + 동시성 렌더링을 위해 React의 재조정 과정은 중단 가능성에 따라 두 가지 단계로 나뉩니다 [6]. + * **렌더링 단계(Render Phase):** 컴포넌트 트리를 순회하며 이전 상태와 새로운 상태의 차이를 계산하고 효과 목록(Effect list)을 구축합니다 [6]. 이 단계는 실제 DOM을 변경하지 않는 순수한 연산 과정이므로 **언제든지 일시 중지, 취소 또는 재시작이 가능**합니다 [6, 7]. + * **커밋 단계(Commit Phase):** 렌더링 단계에서 만들어진 변경 사항(효과 목록)을 실제 DOM에 한 번에 적용합니다 [8]. 이 과정은 **동기적이고 중단할 수 없습니다** [7, 8]. + +- **우선순위 제어 및 차선 모델(Lane Model):** + React는 타임 슬라이싱(Time-slicing)과 동시성을 효과적으로 관리하기 위해 32비트 정수 기반의 '차선(Lanes)' 시스템을 활용합니다 [4, 9]. + * 동기적 차선(Sync Lane): 타이핑, 클릭 등 즉시 처리해야 하는 긴급한 작업 [4, 10]. + * 입력 연속 차선(InputContinuous Lane): 스크롤, 마우스 호버 등 유동적인 움직임 [4, 10]. + * 그 외에도 데이터 페칭 결과를 처리하는 기본 차선(Default Lane)과 백그라운드 렌더링을 처리하는 유휴 차선(Idle Lane)으로 나뉩니다 [4]. + 이러한 세밀한 모델 덕분에 작업 중인 Fiber(WIP Fibers)를 우선순위에 따라 지연시키거나 우선 처리할 수 있습니다 [11]. + +- **동시성 기능(Concurrent Features)의 활용:** + Fiber의 동시성 렌더링 구조는 React 18, 19의 `useTransition` 및 `useDeferredValue`와 같은 훅(Hook)을 가능하게 합니다 [12, 13]. 긴급하지 않은 업데이트의 우선순위를 낮춰 처리함으로써 무거운 리스트 필터링이나 데이터 계산 중에도 앱의 반응성을 부드럽게 유지할 수 있습니다 [12, 14]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[가상 DOM과 재조정 (Virtual DOM and Reconciliation)]], [[차선 모델과 작업 우선순위 (Lane Model & Priorities)]], [[Time-Slicing]], [[React 동시성 훅 (useTransition, useDeferredValue)]] +- **Projects/Contexts:** [[메인 스레드 차단 문제 해결을 위한 React 16의 Fiber 엔진 교체 및 React 18, 19의 동시성 렌더링 적용 사례]] +- **Contradictions/Notes:** 소스 전반에 걸쳐 내용이 일치하며 상충되는 의견은 없습니다. 모든 소스는 Fiber 아키텍처가 렌더링을 작은 단계로 분할하고 우선순위를 부여함으로써 메인 스레드의 부하를 줄여 동시성과 반응성을 달성한다는 점을 일관되게 강조합니다. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/Hydration 성능 최적화.md b/00_Raw/Hydration 성능 최적화.md new file mode 100644 index 00000000..05a683d4 --- /dev/null +++ b/00_Raw/Hydration 성능 최적화.md @@ -0,0 +1,34 @@ +# [[Hydration 성능 최적화]] + +## 📌 Brief Summary +Hydration은 서버에서 렌더링된 정적 HTML 뼈대에 JavaScript를 실행하고 이벤트 리스너를 연결하여 완전한 상호작용이 가능한 애플리케이션으로 변환하는 과정입니다 [1, 2]. 기본적으로 React는 페이지 전체를 한 번에 Hydration하면서 메인 스레드를 차단하여 TBT(Total Blocking Time)와 TTI(Time to Interactive) 지표를 악화시킬 수 있습니다 [3]. 이를 해결하기 위해 선택적 Hydration, 지연 로딩, React Server Components(RSC) 등의 최적화 기법을 도입하여 초기 로드 성능과 상호작용성을 극대화할 수 있습니다 [4-6]. + +## 📖 Core Content +* **Hydration의 개념 및 주요 성능 병목 현상:** + * Hydration은 SSR(Server-Side Rendering) 환경에서 서버가 생성한 HTML을 클라이언트가 넘겨받아 상호작용을 부여하는 필수적인 과정입니다 [2, 3]. + * 문제는 React가 기본적으로 시야에 보이지 않는 컴포넌트까지 포함하여 페이지 전체를 한 번에 Hydration 하려 한다는 점입니다 [3]. 이로 인해 JavaScript 실행이 메인 스레드를 장시간 점유하게 되고, 결과적으로 TBT(Total Blocking Time), FID(First Input Delay), TTI(Time to Interactive) 등의 핵심 웹 성능 지표가 크게 저하되며 사용자의 입력 지연을 초래합니다 [3, 7]. + * 또한 서버에서 렌더링된 HTML과 클라이언트의 렌더링 결과가 다를 때 발생하는 'Hydration Mismatch' 오류와, 모든 컴포넌트를 위한 전체 JavaScript를 다운로드해야 해서 발생하는 번들 크기 비대화(Bundle Size Bloat) 문제도 겪을 수 있습니다 [4, 8]. + +* **점진적 및 선택적 Hydration (Selective & Progressive Hydration):** + * 페이지 전체를 일괄 처리하는 대신 스크롤 위쪽(Above-the-fold)의 중요한 콘텐츠를 우선 처리하고, 덜 중요한 컴포넌트는 Hydration을 지연시킵니다 [4]. + * Next.js 환경에서는 `next/dynamic`을 활용한 동적 임포트(Dynamic Imports)를 통해 구현하거나, IntersectionObserver API를 사용하여 요소가 뷰포트에 들어올 때만 Hydration을 수행하는 지연(Lazy) 방식을 적용할 수 있습니다 [5, 9]. 이를 통해 메인 스레드 차단을 분산시켜 TBT를 최대 40%까지 줄일 수 있습니다 [5]. + +* **React Server Components (RSC)의 활용:** + * Next.js App Router 등에서 지원하는 React Server Components는 오직 서버에서만 실행되며 클라이언트로 JavaScript 페이로드를 전혀 보내지 않습니다 [5, 10, 11]. + * 정적이거나 상호작용이 필요 없는 UI(예: 텍스트, 사이드바 등)를 RSC로 구성하면 해당 영역은 Hydration 프로세스 자체가 필요 없어지므로 클라이언트의 부담과 번들 크기가 비약적으로 감소합니다 [6, 12, 13]. + +* **Streaming 및 Suspense 적용:** + * React의 Suspense API를 활용하면 서버에서 HTML을 점진적으로 스트리밍(Streaming)할 수 있습니다 [6]. + * 이를 통해 렌더링이 완료된 일부 화면을 사용자에게 더 빠르게 보여주면서(FCP 개선), 복잡한 부분에 대한 Hydration 작업은 나중으로 미루어 체감 성능을 향상시킬 수 있습니다 [6, 14]. React 18의 동시성 렌더링(Concurrent Rendering)은 Hydration 작업을 작은 청크로 쪼개어 브라우저가 사용자 입력을 처리할 수 있도록 양보(yield)하는 기능을 제공합니다 [15]. + +* **부분 Hydration (Partial Hydration) 및 기타 팁:** + * 정적인 콘텐츠 영역을 고립시키고 상호작용이 필요한 특정 부분만 Hydration하는 섬 아키텍처(Island Architecture)를 도입하거나, 절대적으로 정적인 콘텐츠의 경우 `dangerouslySetInnerHTML`을 사용하여 통째로 Hydration 과정에서 배제하는 것도 유용한 전략입니다 [16-18]. + * 불가피하게 클라이언트와 서버 간의 렌더링 불일치가 예상되는 곳에는 `suppressHydrationWarning`을 제한적으로 사용하거나, Hydration 완료 이후에 동작해야 하는 로직을 의존성 배열이 빈 `useEffect` 내에 배치하여 불일치 에러를 방지할 수 있습니다 [17, 19]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[Server-Side Rendering (SSR)]], [[React Server Components (RSC)]], [[Total Blocking Time (TBT)]], [[Concurrent Rendering]] +- **Projects/Contexts:** [[Next.js App Router]], [[Island Architecture]] +- **Contradictions/Notes:** SSR은 클라이언트에게 완성된 HTML을 즉시 제공하여 FCP(First Contentful Paint)와 SEO를 크게 향상시키지만, JavaScript 번들이 다운로드되고 Hydration이 완료될 때까지 사용자가 페이지와 상호작용할 수 없으므로 TTI(Time to Interactive)가 오히려 지연되는 성능적 트레이드오프(Trade-off)가 존재합니다 [20, 21]. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/가상 DOM과 재조정 (Reconciliation).md b/00_Raw/가상 DOM과 재조정 (Reconciliation).md new file mode 100644 index 00000000..bcdd9e6c --- /dev/null +++ b/00_Raw/가상 DOM과 재조정 (Reconciliation).md @@ -0,0 +1,28 @@ +# [[가상 DOM과 재조정 (Reconciliation)]] + +## 📌 Brief Summary +가상 DOM(Virtual DOM)은 메모리 내에 유지되는 UI의 이상적이고 가상적인 표현으로, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는 프로그래밍 개념이다 [1]. 이 가상 DOM을 실제 DOM과 일치시키는 과정을 **재조정(Reconciliation)**이라고 부른다 [1, 2]. 직접적인 DOM 수정이 유발하는 크리티컬 렌더링 패스의 비용을 최소화하기 위해 도입되었으며 [3], React는 $O(n)$ 복잡도를 가지는 효율적인 휴리스틱 비교 알고리즘을 통해 변경된 부분만 선택적으로 실제 DOM에 반영한다 [4, 5]. + +## 📖 Core Content + +* **가상 DOM의 필요성과 역할** + 기존 방식처럼 실제 DOM을 직접 수정하면 변경이 일어날 때마다 브라우저의 레이아웃(Reflow)과 페인트(Repaint) 단계가 반복적으로 발생하여 성능이 저하된다 [3, 6]. 이를 극복하기 위해 React는 UI 요소를 일반 JavaScript 객체로 얕게 표현한 경량화된 트리인 가상 DOM을 사용한다 [1-3]. 개발자는 원하는 UI 상태를 선언적으로 지정하기만 하면 되며, 수동적인 DOM 조작과 속성 변경, 이벤트 처리는 React가 추상화하여 담당한다 [1]. + +* **휴리스틱 비교 알고리즘 (Heuristic Diffing Algorithm)** + 일반적인 트리 비교 알고리즘은 $O(n^3)$의 시간 복잡도를 가지지만, 이는 수천 개의 요소를 렌더링할 때 너무 큰 비용을 발생시킨다 [5, 7]. 따라서 React는 다음 두 가지 가정을 바탕으로 $O(n)$ 복잡도의 최적화된 알고리즘을 사용한다 [4, 5]. + 1. **타입이 다른 요소**: 서로 다른 타입의 요소는 완전히 다른 트리를 생성한다고 가정한다. 예를 들어 ``에서 ``로 타입이 변경되면 React는 기존 트리를 완전히 파괴하고 처음부터 새 트리를 구축하며, 이 과정에서 기존 DOM 노드와 컴포넌트 상태(State)는 모두 소멸된다 [4, 5, 8]. 반면 같은 타입의 DOM 요소일 경우, 동일한 기본 DOM 노드를 유지한 채 변경된 속성(Attributes)과 스타일만 업데이트한다 [9, 10]. + 2. **Key 속성**: 개발자가 `key` 속성을 제공하여 여러 렌더링 사이에서 어떤 자식 요소가 안정적으로 유지되는지 힌트를 줄 수 있다 [4, 5]. + +* **리스트 렌더링과 Key의 중요성** + 자식 노드들을 반복적으로 처리할 때, 기본적으로 React는 기존 트리와 새 트리의 자식 리스트를 동시에 순회하며 차이가 발생할 때마다 변형을 일으킨다 [11]. 리스트의 맨 끝에 요소를 추가하는 것은 원활하게 작동하지만, 리스트의 맨 앞에 요소를 추가하면 모든 자식 요소가 변경된 것으로 인식되어 매우 비효율적인 렌더링이 발생할 수 있다 [11, 12]. 고유한 `key`를 부여하면 React가 기존 트리와 새 트리의 요소를 정확히 일치시킬 수 있어 요소의 이동만으로 업데이트가 가능해진다 [12, 13]. 단, 배열의 인덱스를 `key`로 사용하면 항목 재정렬 시 컴포넌트 상태가 예기치 않게 꼬이거나 성능이 저하되는 문제가 발생할 수 있다 [13, 14]. + +* **Fiber 아키텍처 기반의 진화** + React 16부터는 동시성(Concurrent) 렌더링을 지원하기 위해 재조정 엔진이 **'Fiber'** 아키텍처로 완전히 재작성되었다 [15-18]. 렌더링 작업을 단일 동기식 블록으로 처리하던 이전(Stack Reconciler)과 달리, Fiber는 작업을 작은 '작업 단위(Unit of work)'로 나누어 메인 스레드가 사용자 입력 등의 급한 작업을 먼저 처리할 수 있도록 돕는다 [19, 20]. 재조정 과정은 중단 및 재개가 가능하며 DOM 변경을 발생시키지 않는 **렌더 단계(Render phase)**와, 모든 변경 사항을 한 번에 동기적으로 실제 DOM에 반영하는 **커밋 단계(Commit phase)**로 나뉘어 실행된다 [21-23]. + +## 🔗 Knowledge Connections +- **Related Topics:** `[[크리티컬 렌더링 패스 (Critical Rendering Path)]]`, `[[Fiber 아키텍처 (Fiber Architecture)]]`, `[[DOM (Document Object Model)]]` +- **Projects/Contexts:** `[[React 성능 최적화 (React Performance Optimization)]]`, `[[React 컴파일러 (React Compiler)]]`, `[[동시성 렌더링 (Concurrent Rendering)]]` +- **Contradictions/Notes:** 섀도우 DOM(Shadow DOM)과 가상 DOM(Virtual DOM)은 혼동되기 쉬우나 서로 다른 개념이다. 섀도우 DOM은 웹 컴포넌트에서 변수와 CSS의 스코프를 지정하기 위해 설계된 브라우저 네이티브 기술인 반면, 가상 DOM은 브라우저 API 위에 JavaScript 라이브러리(React 등)에 의해 구현된 프로그래밍 개념이다 [24]. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/단일 페이지 애플리케이션 (SPA).md b/00_Raw/단일 페이지 애플리케이션 (SPA).md new file mode 100644 index 00000000..f74ae4c6 --- /dev/null +++ b/00_Raw/단일 페이지 애플리케이션 (SPA).md @@ -0,0 +1,18 @@ +# [[단일 페이지 애플리케이션 (SPA)]] + +## 📌 Brief Summary +단일 페이지 애플리케이션(SPA)은 서버에서 라우트마다 완전한 HTML을 받아오는 대신, 클라이언트 사이드 렌더링(CSR)을 활용하여 브라우저 내에서 콘텐츠를 동적으로 생성하는 웹 애플리케이션입니다 [1-3]. 초기 로드 시 필요한 모든 HTML, CSS 및 자바스크립트 파일을 다운로드하며, 그 이후부터는 서버를 통한 전체 페이지 새로고침 없이 사용자의 상호작용을 처리합니다 [4]. 이를 통해 사용자에게 페이지 전환이 즉각적으로 이루어지는 매끄러운 '앱과 같은(app-like)' 경험을 제공합니다 [1, 4]. + +## 📖 Core Content +* **작동 방식:** SPA는 서버로부터 기본 구조만 갖춘 최소한의 HTML 템플릿과 자바스크립트 번들을 전달받습니다 [1-3]. 이후 자바스크립트가 문서의 제어권을 넘겨받아 브라우저 내에서 각 라우트를 동적으로 생성하고 데이터를 채워 넣습니다 [2, 3]. +* **성능 및 사용자 경험 측면의 장점:** SPA는 페이지를 새로고침할 때 발생하는 끊김 현상을 제거하여 매우 유동적이고 반응성이 뛰어난 사용자 경험을 제공합니다 [4, 5]. 또한 렌더링 작업을 클라이언트로 넘기므로 서버 부하가 감소하며, 복잡한 자바스크립트 런타임 서버 없이 정적 서버(Amazon S3, Netlify 등)에 호스팅할 수 있어 비용 효율적입니다 [5, 6]. +* **초기 로딩 및 SEO의 한계:** 브라우저가 자바스크립트를 모두 다운로드하고 구문 분석 및 실행을 완료하기 전까지는 의미 있는 콘텐츠가 화면에 나타나지 않으므로 초기 로드 시간(First Contentful Paint)이 느리다는 단점이 있습니다 [1, 7]. 또한, 빈 HTML 껍데기만 먼저 전송되기 때문에 일부 검색 엔진 크롤러가 콘텐츠를 제대로 읽지 못해 검색 엔진 최적화(SEO)에 불리할 수 있습니다 [1, 7, 8]. 사용자 기기의 컴퓨팅 성능에 따라 렌더링 성능이 크게 좌우되기도 합니다 [9]. +* **이상적인 활용 사례:** SEO가 우선순위가 아니며 복잡하고 풍부한 사용자 상호작용이 필수적인 애플리케이션에 매우 적합합니다 [10]. 주로 로그인 장벽 뒤에 있는 내부 비즈니스 도구, 실시간 데이터가 업데이트되는 사용자 대시보드, SaaS 플랫폼 등에서 이상적으로 활용됩니다 [5, 10]. + +## 🔗 Knowledge Connections +- **Related Topics:** [[클라이언트 사이드 렌더링 (CSR)]], [[검색 엔진 최적화 (SEO)]], [[초기 로드 시간 (Initial Load Time)]] +- **Projects/Contexts:** [[SaaS 플랫폼 및 인터랙티브 대시보드 개발]] +- **Contradictions/Notes:** 소스에 따르면 SPA의 핵심인 CSR 방식은 상호작용성과 개발 속도 면에서 뛰어나지만 SEO와 초기 로드 시간에서는 뚜렷한 한계를 보입니다. 이러한 단점은 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)이 갖는 장점(빠른 초기 화면 및 SEO 최적화)과 정확히 대조됩니다 [1, 7, 8, 11]. + +--- +*Last updated: 2026-04-25* \ No newline at end of file diff --git a/00_Raw/브라우저 렌더링 프로세스 (CRP).md b/00_Raw/브라우저 렌더링 프로세스 (CRP).md new file mode 100644 index 00000000..7fb91638 --- /dev/null +++ b/00_Raw/브라우저 렌더링 프로세스 (CRP).md @@ -0,0 +1,21 @@ +# [[브라우저 렌더링 프로세스 (CRP)]] + +## 📌 Brief Summary +브라우저 렌더링 프로세스, 즉 중요 렌더링 경로(Critical Rendering Path, CRP)는 브라우저가 HTML, CSS, JavaScript를 화면의 픽셀로 변환하기 위해 실행하는 일련의 단계입니다 [1, 2]. 이 과정은 DOM 및 CSSOM 트리 생성, 렌더 트리 합성, 레이아웃(Reflow) 계산, 그리고 화면에 픽셀을 그리는 페인트(Paint) 및 합성(Composite) 단계로 구성됩니다 [2, 3]. 이 경로를 최적화하는 것은 첫 렌더링 시간을 단축하고, 원활한 사용자 상호작용을 보장하며 성능 병목현상을 피하기 위한 프론트엔드 엔지니어링의 핵심 목표입니다 [1, 4]. + +## 📖 Core Content +브라우저 렌더링 프로세스는 코드가 화면의 시각적 요소로 변환되는 과정으로, 다음과 같은 핵심 단계들을 거칩니다: + +* **문서 객체 모델(DOM) 구축:** 브라우저가 서버로부터 HTML 데이터를 수신하면, 바이트를 문자, 토큰, 노드로 순차적으로 변환하여 계층적인 DOM 트리를 구성합니다 [1, 5]. 이 DOM 구축은 점진적으로 진행되므로 브라우저는 네트워크 요청이 활성화된 상태에서도 트리를 구축할 수 있습니다 [1, 6]. 그러나 노드 수가 많아질수록 이후의 렌더링 단계에서 더 많은 계산 시간이 소요됩니다 [6, 7]. +* **CSS 객체 모델(CSSOM) 구축:** CSS는 콘텐츠가 어떻게 스타일링될지 정의합니다. DOM 구축과 달리 CSSOM 구축은 점진적이지 않으며 렌더링을 차단(render-blocking)하는 작업입니다 [6, 7]. 브라우저는 스타일이 적용되지 않은 콘텐츠가 화면에 노출되는 현상(FOUC)을 방지하기 위해 연결된 모든 스타일시트를 다운로드하고 파싱할 때까지 렌더 트리를 빌드하지 않습니다 [6, 7]. +* **렌더 트리(Render Tree) 합성:** DOM과 CSSOM이 모두 준비되면 브라우저는 두 트리를 결합하여 렌더 트리를 만듭니다 [8, 9]. 이 트리는 화면에 렌더링하는 데 필요한 노드만 포함하므로, `