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

10_Wiki/Topics/Frontend/컴포넌트 기반 아키텍처.md

@@ -1,10 +1,29 @@
+---
+id: wiki-2026-0508-컴포넌트-기반-아키텍처
+title: 컴포넌트 기반 아키텍처
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
+tags: [uncategorized]
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
+---
+
 # [[컴포넌트 기반 아키텍처|컴포넌트 기반 아키텍처]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 컴포넌트 기반 아키텍처는 전체 페이지 단위가 아닌, 독립적이고 재사용 가능한 UI 요소(컴포넌트)를 조립하여 웹 애플리케이션을 구축하는 설계 방식입니다 [1, 2]. 이 아키텍처에서 CSS는 전통적인 전역 스코프의 한계를 극복하기 위해 지역 스코핑(Local Scoping)과 캡슐화를 제공하는 방식으로 진화해 왔습니다 [3, 4]. 유지보수성을 극대화하기 위해 스타일과 컴포넌트 로직을 한 곳에 배치하며, 개별 컴포넌트가 자신이 속한 맥락(컨테이너)에 맞춰 자체적으로 반응하도록 설계하는 것이 현대 프론트엔드의 핵심 목표입니다 [5-7].
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 *   **독립성과 재사용성 (Independence and Reusability)**
     현대 프론트엔드 환경에서는 컴포넌트가 주변 DOM 구조에 얽매이지 않고 완벽히 독립적으로 동작해야 합니다 [1]. BEM(Block Element Modifier) 방법론에서 'Block'은 특정 컴포넌트(예: 버튼, 모달, 카드)를 나타내며, 이는 React, Vue, Angular와 같은 최신 프레임워크의 컴포넌트 아키텍처 구조와 자연스럽게 일치합니다 [1, 8, 9].
 
@@ -17,10 +36,64 @@
 *   **컨테이너 중심의 반응형 설계 (Component-centric Responsive Design)**
     반응형 디자인의 패러다임 또한 브라우저의 뷰포트(전체 화면) 기준에서 컴포넌트(컨테이너) 중심으로 이동했습니다 [6]. 컨테이너 쿼리([[Container Queries|Container Queries]])를 적용하면 컴포넌트가 자신이 배치된 부모 컨테이너의 가용 너비에 따라 자체적인 레이아웃을 스스로 결정할 수 있으므로, 어떤 맥락에 배치되더라도 깨지지 않는 진정한 의미의 재사용성을 확보할 수 있습니다 [7, 18].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[BEM|BEM]], CSS Modules, CSS-in-JS, [[Tailwind CSS|Tailwind CSS]], Container Queries, [[디자인 시스템|디자인 시스템]]
 - **Projects/Contexts:** React/Vue/Angular 프레임워크, [[대규모 프론트엔드 프로젝트|대규모 프론트엔드 프로젝트]], [[확장 가능한 스타일 시스템|확장 가능한 스타일 시스템]]
 - **Contradictions/Notes:** 컴포넌트의 스타일링 방식으로 [[Tailwind CSS|Tailwind CSS]]와 같은 유틸리티 클래스가 빠르고 일관된 디자인을 구축하는 데 유리하지만 [19], 런타임 동적 테마 구현이나 강력한 캡슐화가 필요한 경우 CSS-in-JS나 CSS Modules와 혼합(Hybrid)하여 사용하는 전략이 권장되기도 합니다 [20, 21]. 반면 CSS-in-JS는 훌륭한 개발자 경험과 컴포넌트 기반 스타일링을 제공함에도 불구하고, 런타임 성능 오버헤드와 [[React Server Components|React Server Components]](RSC)와의 호환성 문제로 인해 최근에는 점차 정적인 방식(Zero-runtime)이나 CSS Modules로 회귀하는 추세도 있습니다 [15, 22, 23].
 
 ---
-*Last updated: 2026-04-26*
+*Last updated: 2026-04-26*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+
+- **과거 데이터와의 충돌:** 없음
+- **정책 변화:** 없음
+
+## 🕓 변경 이력 (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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*