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

10_Wiki/Topics/Frontend/Vite Build System.md

@@ -1,16 +1,35 @@
+---
+id: wiki-2026-0508-vite-build-system
+title: Vite Build System
+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 System|Vite Build System]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 Vite는 현대 프론트엔드 애플리케이션(특히 React) 개발을 위한 새로운 산업 표준 빌드 도구로, 거의 즉각적인 서버 시작과 초고속 HMR(Hot Module Replacement)을 제공합니다 [1, 2]. 기존 번들러와 달리 개발 환경에서는 브라우저에 네이티브 ES 모듈 형태로 코드를 제공하고, 프로덕션 환경에서는 Rollup을 사용하여 고도로 최적화된 번들을 생성하는 하이브리드 아키텍처를 사용합니다 [3, 4]. 또한 SWC나 esbuild와 같은 Rust 기반 컴파일러를 활용하여 대규모 프로젝트에서도 빠르고 원활한 개발자 경험을 보장합니다 [3, 5, 6].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 *   **하이브리드 아키텍처 (개발 및 프로덕션)**: Vite는 개발 시 모든 코드를 사전에 번들링하는 대신, 코드를 네이티브 ES 모듈(ESM) 형태로 브라우저에 직접 제공합니다 [2, 3]. 이 방식은 필요할 때 필요한 파일만 로드하므로 프로젝트 규모가 커져도 서버 시작 및 갱신 속도가 매우 빠릅니다 [3, 7]. 반면, 프로덕션 배포 시에는 내부적으로 Rollup을 사용하여 자동 코드 스플리팅, 미사용 코드 제거(Tree-shaking), 자산 최적화 등을 수행하여 성능이 뛰어난 번들을 생성합니다 [4, 8].
 *   **초고속 컴파일러 및 플러그인 활용**: Vite는 컴파일 속도를 높이기 위해 Rust 기반의 컴파일러인 SWC 또는 esbuild를 사용합니다 [3]. 기존 Babel 대신 `@vitejs/plugin-react-swc`를 사용하면 JSX 및 TypeScript 컴파일 속도가 비약적으로 향상되어 재빌드 시간이 단축됩니다 [5, 6, 9]. 이외에도 `vite-plugin-svgr`(SVG 컴포넌트화), `vite-plugin-pwa`와 같은 유연한 플러그인 생태계를 지원합니다 [10].
 *   **고급 구성 (vite.config.js)**: Vite는 `vite.config.js`를 통해 복잡한 프로젝트 설정을 제어할 수 있습니다. 예를 들어 경로 별칭(Path Aliases)을 설정하여 임포트를 깔끔하게 관리하거나, `VITE_` 접두사가 붙은 환경 변수만을 안전하게 노출하며, 개발 중 CORS 문제를 피하기 위한 내장 프록시 서버 설정을 지원합니다 [5, 9, 11].
 *   **성능 튜닝 및 대용량 청크(Chunk) 관리**: 대규모 앱에서는 무거운 벤더 라이브러리로 인해 메인 번들이 과도하게 커지는 문제("chunks are larger than 500 kB")가 발생할 수 있습니다 [12-14]. 이를 해결하기 위해 `manualChunks`를 사용하여 React, 차트 라이브러리 등 자주 변경되지 않는 벤더 코드를 별도의 파일로 분리해 브라우저 캐싱을 극대화합니다 [8, 11, 14-16]. 이와 함께 `React.lazy`와 `<Suspense>`를 이용한 라우트 레벨의 동적 임포트(코드 스플리팅)를 적용하고, `rollup-plugin-visualizer`로 번들 크기를 시각적으로 분석하여 불필요한 코드를 제거하는 것이 모범 사례입니다 [16-19].
 
-## 🔗 Knowledge Connections
-
+## 🔗 지식 연결 (Graph)
 ### Related Concepts
 - Native ES Modules (ESM)
   - 연결 이유: Vite가 개발 환경에서 파일 전체를 사전 번들링하지 않고, 필요할 때 브라우저에 코드를 제공하는 핵심 메커니즘이기 때문입니다 [3, 7].
@@ -49,4 +68,58 @@ Vite는 현대 프론트엔드 애플리케이션(특히 React) 개발을 위한
   - 확장 방향: Vite의 청크 최적화와 레이지 로딩 기법이 실제 사용자 체감 성능 지표인 FCP(First Contentful Paint), LCP(Largest Contentful Paint), INP(Interaction to Next Paint)에 어떤 직접적인 영향을 미치는지 연결하여 학습합니다 [13, 24, 25].
 
 ---
-*Last updated: 2026-04-30*
+*Last updated: 2026-04-30*
+
+## 🤖 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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*