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

10_Wiki/Topics/Architecture/Vite Build Tool.md

@@ -1,9 +1,29 @@
+---
+id: wiki-2026-0508-vite-build-tool
+title: Vite Build Tool
+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
+---
+
 # [[Vite Build Tool|Vite Build Tool]]
 
 ## 📌 Brief 임무
 Vite는 현대 프론트엔드 애플리케이션(주로 React)을 위한 표준 빌드 도구로, 기존 Webpack 및 Create React App(CRA)을 대체하며 빠르게 자리 잡았습니다 [1, 2]. 이 도구는 개발 환경에서는 브라우저의 네이티브 ES 모듈(ESM)을 활용해 즉각적인 서버 시작과 초고속 HMR(Hot Module Replacement)을 제공합니다 [2-4]. 프로덕션 배포 시에는 내부적으로 Rollup을 사용하여 코드 스플리팅과 트리 쉐이킹이 적용된 고도로 최적화된 번들을 생성하는 하이브리드 아키텍처를 특징으로 합니다 [5, 6].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 * **하이브리드 아키텍처 (Hybrid Architecture)**
   * **개발 환경:** 코드를 사전에 전체 번들링하지 않고 브라우저에 네이티브 ES 모듈(ESM)로 직접 제공합니다. 필요한 파일만 로드되므로 프로젝트 크기가 커져도 개발 서버가 즉각적으로 반응합니다 [2-4].
   * **프로덕션 환경:** 배포 시에는 Rollup을 사용하여 애플리케이션을 번들링하며, 자동 코드 스플리팅 및 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree-shaking)을 통해 최적화된 정적 에셋을 제공합니다 [5, 6].
@@ -17,14 +37,13 @@ Vite는 현대 프론트엔드 애플리케이션(주로 React)을 위한 표준
   * 기본적으로 Vite는 앱 코드와 모든 종속성(node_modules)을 하나의 `index.js`에 담아 빌드합니다. 이를 방지하기 위해 `vite.config.ts`의 Rollup 옵션에서 `manualChunks`를 설정하여 React 코어 라이브러리 등 무거운 벤더를 분리하고 브라우저 캐싱 효율을 높입니다 [6, 14, 15].
   * `React.lazy()`와 `<Suspense>`를 결합한 라우트 레벨 동적 임포트를 통해 초기 메인 번들 크기를 극적으로 줄일 수 있습니다 [11, 14, 15].
 
-## ⚖️ Trade-offs & Caveats
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
 * **대형 청크 경고 및 초기 번들 비대화 (Large Chunks Warning):** Vite는 기본적으로 모든 종속성을 단일 파일로 빌드하기 때문에, 수동으로 코드 스플리팅을 하지 않으면 프로덕션 빌드 시 "500kB 초과" 경고가 발생할 수 있습니다. 이는 다운로드 시간을 지연시키고 낮은 성능의 모바일 기기에서 파싱 및 컴파일에 무리를 주어 FCP, LCP, INP와 같은 Core Web Vitals 지표를 악화시킬 수 있습니다 [14, 16, 17].
 * **개발자 도구 캐싱 의존성:** Vite는 모듈 로딩 성능을 위해 브라우저의 캐싱에 크게 의존합니다. 따라서 개발 중 브라우저 개발자 도구에서 "캐시 사용 안 함(Disable cache)"을 설정하면 개발 서버가 느려지는 부작용이 발생할 수 있습니다 [18].
 * **플러그인 남용으로 인한 성능 저하:** 과도한 플러그인 사용은 개발 서버의 속도를 저하시킬 수 있으므로, 구성을 최소화하고 필요한 플러그인만 유지해야 합니다 [18].
 * **사전 번들링 관리 필요성:** 규모가 크거나 특이한 외부 종속성의 경우, `optimizeDeps` 설정을 수동으로 제어하지 않으면 개발 환경에서 사전 번들링으로 인한 속도 저하가 발생할 수 있습니다 [8, 11].
 
-## 🔗 Knowledge Connections
-
+## 🔗 지식 연결 (Graph)
 ### Related Concepts
 
 #### [아키텍처/기반 기술]
@@ -69,4 +88,57 @@ Vite는 현대 프론트엔드 애플리케이션(주로 React)을 위한 표준
   - 확장 방향: Vite의 청크 분할 및 지연 로딩 기법이 실제 사용자 경험 지표인 FCP(First Contentful Paint), LCP(Largest Contentful Paint), INP(Interaction to Next Paint)에 어떻게 직결되는지 탐구 [17, 20].
 
 ---
-*Last updated: 2026-04-30*
+*Last updated: 2026-04-30*
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+
+> *(TODO: 한 문장으로 핵심 통찰을 작성. "X는 Y 조건에서 Z 효과를 낸다" 구조 권장.)*
+
+## 🤖 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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*