feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

10_Wiki/Topics/Frontend/Hydration & Progressive Rendering.md

@@ -1,10 +1,21 @@
 ---
-id: P-REINFORCE-AUTO-1F4D68
-category: "10_Wiki/💡 Topics/Web Development"
+id: wiki-2026-0508-hydration-progressive-rendering
+title: "Hydration & Progressive Rendering"
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: [P-REINFORCE-AUTO-1F4D68]
+duplicate_of: none
+source_trust_level: A
 confidence_score: 0.95
 tags: [auto-reinforced]
+raw_sources: []
 last_reinforced: 2026-05-03
 github_commit: "[P-Reinforce] Continuous Worker - Hydration & Progressive Rendering"
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
 ---
 
 # [[Hydration & Progressive Rendering|Hydration & Progressive Rendering]]
@@ -13,7 +24,6 @@ github_commit: "[P-Reinforce] Continuous Worker - Hydration & Progressive Render
 하이드레이션(Hydration)은 서버 사이드 렌더링(SSR)을 통해 생성된 정적 HTML을 클라이언트가 넘겨받아 이벤트 리스너를 연결하고 동적 상호작용이 가능하도록 '수분'을 공급하는 과정입니다 [1, 2]. 기존 SSR은 초기 화면은 빠르게 보여주지만 전체 자바스크립트를 다운로드하고 하이드레이션을 마칠 때까지 상호작용이 지연되는 '하이드레이션 갭(Hydration Gap)' 문제를 안고 있었습니다 [1, 3]. 이를 해결하기 위해 React 18의 선택적 하이드레이션(Selective Hydration) 및 스트리밍(Streaming) 렌더링, Vue 3.5의 지연 하이드레이션(Lazy Hydration)과 같은 점진적 렌더링 기법이 도입되어, 대규모 애플리케이션의 초기 로딩 성능과 사용자 경험을 최적화하는 핵심 실전 패턴으로 자리 잡았습니다 [4, 5].
 
 ## 📖 구조화된 지식 (Synthesized Content)
-
 *   **하이드레이션의 작동 원리 및 한계**
     *   서버 렌더링 환경에서 React는 기존 서버에서 렌더링된 DOM 트리를 병렬로 순회하며 Fiber 트리와 일치시키고, DOM 노드를 다시 생성하는 대신 재사용하며 이벤트 리스너를 부착합니다 [1, 6].
     *   그러나 전통적인 하이드레이션은 트리를 순차적으로 걷기 때문에, 전체 트리가 하이드레이션되기 전까지는 버튼 클릭과 같은 사용자 상호작용이 동작하지 않는 '먹통' 현상(Hydration Gap)을 유발합니다 [1, 6].
@@ -29,14 +39,12 @@ github_commit: "[P-Reinforce] Continuous Worker - Hydration & Progressive Render
 *   **하이드레이션의 완전한 생략: 서버 컴포넌트(RSC)**
     *   React 서버 컴포넌트(RSC)는 서버에서만 실행되며 코드가 클라이언트 번들에 포함되지 않으므로 하이드레이션 자체가 발생하지 않습니다 [9, 10]. 이는 자바스크립트 번들 크기를 줄이고 하이드레이션 비용을 원천적으로 없애는 아키텍처적 진화입니다 [11].
 
-## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
-
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
 *   **두 번의 왕복 문제(The Two-Trip Lie):** 전통적 하이드레이션은 SSR을 통해 빠른 HTML을 제공하지만, 브라우저는 여전히 모든 JavaScript를 다운로드하고 클라이언트에서 코드를 다시 실행해야 합니다. 즉, 서버에서의 작업이 클라이언트의 연산 비용을 줄여주지 못하는 근본적 한계가 있습니다 [3, 12].
 *   **하이드레이션 불일치(Hydration Mismatches):** 서버에서 렌더링된 콘텐츠와 클라이언트에서 렌더링된 콘텐츠가 다를 경우 오류가 발생합니다. 이를 위해 Vue 3.5는 서버-클라이언트 간 일관된 고유 ID를 보장하는 `useId()` API를 도입하였고, 의도적인 불일치에 대한 경고를 억제하기 위해 `data-allow-mismatch` 속성을 사용해야 하는 관리 포인트가 생깁니다 [5, 13].
 *   **아키텍처 복잡성과 보안 위험:** 하이드레이션을 생략하기 위해 서버 컴포넌트(RSC) 패턴을 사용할 경우, 서버와 클라이언트 경계가 모호해져 아키텍처가 매우 복잡해집니다 [14, 15]. 특히 서버 액션을 내부 함수처럼 취급하여 입력 유효성 검사를 생략하면, 인증 없이 원격 코드 실행(RCE)이 가능한 'React2Shell'과 같은 치명적인 보안 취약점이 발생할 수 있습니다 [16-18].
 
 ## 🔗 지식 연결 (Graph)
-
 ### Related Concepts
 
 #### [관계 유형 A (아키텍처/기반 기술)]
@@ -84,3 +92,52 @@ github_commit: "[P-Reinforce] Continuous Worker - Hydration & Progressive Render
 *Last updated: 2026-05-03*
 - Raw Source: 00_Raw/2026-05-03/Hydration & Progressive Rendering.md
 ---
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+
+## 💻 코드 패턴 (Code Patterns)
+
+**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
+
+```text
+# TODO
+```
+
+## 🤔 의사결정 기준 (Decision Criteria)
+
+**선택 A를 써야 할 때:**
+- *(TODO)*
+
+**선택 B를 써야 할 때:**
+- *(TODO)*
+
+**기본값:**
+> *(TODO)*
+
+## ❌ 안티패턴 (Anti-Patterns)
+
+- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*