koriweb
95cd8bb891
- 코드 그라운딩: 기술 주제 문서의 '적용 사례'에 실제 레포 구현 위치
(file:line)+커밋 자동 주입 (예: 문서 청킹 전략→connectai/src/retrieval/chunker.ts).
멱등 마커(CODE-GROUNDING)로 재실행 시 갱신.
- MOC: 39개 클러스터 폴더에 _MOC.md 학습지도 생성(진입점+통찰 주석).
도구: Datacollect/scripts/{code_grounding,moc_generator}.mjs
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
45 lines
4.6 KiB
Markdown
45 lines
4.6 KiB
Markdown
---
|
|
category: Frontend
|
|
tags: [auto-wikified, technical-documentation, frontend]
|
|
title: Vite
|
|
description: "Vite는 독립적으로 사용되거나 Remix, Vue 등 다양한 프레임워크와 결합할 수 있는 현대적인 프론트엔드 빌드 도구입니다 [1]."
|
|
last_updated: 2026-05-04
|
|
---
|
|
|
|
# Vite
|
|
|
|
## 📌 Brief Summary
|
|
Vite는 독립적으로 사용되거나 Remix, Vue 등 다양한 프레임워크와 결합할 수 있는 현대적인 프론트엔드 빌드 도구입니다 [1]. 개발 환경에서 네이티브 ES 모듈을 활용하여 번들링 과정을 생략함으로써 밀리초 단위의 서버 시작 속도와 매우 빠른 모듈 교체(HMR)를 제공합니다 [1]. 대규모 웹 애플리케이션 환경에서 기존의 Webpack을 대체하는 추세이며, Vitest와 같은 도구와 네이티브로 통합되어 빠르고 효율적인 테스트 및 개발 환경을 지원합니다 [2, 3].
|
|
|
|
## 📖 Core Content
|
|
* **압도적인 개발 환경 성능:** Vite는 개발 주기에서 번들링의 필요성을 제거하여, 기존에 분 단위로 걸리던 서버 시작 시간을 밀리초 단위로 단축시킵니다 [1]. 네이티브 ES 모듈을 기반으로 작동하여 즉각적인 핫 모듈 교체(HMR)를 지원하며, 성능 저하 없는 빠르고 현대적인 개발 경험을 제공합니다 [1].
|
|
* **Tree-Shaking 및 최적화된 청크 분할:** Vite(최신 업데이트에서는 Rollup 기반)는 ES 모듈 임포트에 대한 정적 분석을 수행하여 사용되지 않는 코드(Dead Code)를 제거하는 트리 쉐이킹(Tree-shaking)을 수행합니다 [4]. Vue 3의 `defineAsyncComponent` 등과 결합하면 초고효율의 청크 분할(Chunking)과 지연 로딩(Lazy Loading)이 가능해져, 초기 페이지 렌더링 시 불필요한 번들 크기를 획기적으로 줄일 수 있습니다 [4, 5].
|
|
* **라이브러리 모드를 통한 컴포넌트 배포:** 단일 저장소 외부로 컴포넌트를 배포하는 팀에게 Vite의 '라이브러리 모드(Library Mode)'는 강력한 도구입니다 [6]. 컴포넌트를 ESM 및 UMD 형식으로 최적화하여 번들링하며, `rollupOptions`를 통해 특정 의존성(예: Vue 자체)을 외부화(Externalizing)하여 소비자 프로젝트에서 다중 인스턴스 버그가 발생하는 것을 방지할 수 있습니다 [6].
|
|
* **대규모 마이그레이션 및 생태계 통합:** GitLab의 사례처럼, 대규모 엔터프라이즈 환경에서는 Webpack을 대체하기 위해 Vite가 적극 도입되고 있습니다 [2]. Vite는 빌드 시 환경 변수(예: `VUE_VERSION=3`)를 감지하여 모듈 앨리어싱(Module Aliasing)을 통해 호환 가능한 종속성으로 자동 스왑하는 기능을 수행할 수 있습니다 [7]. 또한, 테스트 러너인 Vitest는 Vite와의 네이티브 통합 덕분에 매우 빠른 실행 속도를 제공하며 업계 표준으로 자리 잡고 있습니다 [3].
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
소스 데이터에는 Vite의 근본적인 아키텍처적 반대 급부에 대한 정보는 다소 부족하지만, 운영 및 마이그레이션 과정에서 다음과 같은 제약 사항과 주의점이 확인됩니다 [8].
|
|
* **캐시 관리 문제:** 프레임워크의 버전(예: Vue 2에서 Vue 3)을 전환할 때 Vite 캐시나 `node_modules`를 명시적으로 정리(Clear)하고 종속성을 재설치하지 않으면 빌드 오류가 발생할 수 있습니다 [8].
|
|
* **Node.js 버전 종속성:** Vite가 정상적으로 실행되기 위해서는 Vite가 요구하는 특정 Node.js 버전 요건을 충족해야만 하는 환경적 제약이 존재합니다 [8].
|
|
* **라이브러리 설정의 복잡성:** 프로덕션 환경에서 라이브러리를 배포할 때, 기반이 되는 Rollup 설정(`rollupOptions`)을 통해 외부 종속성을 올바르게 처리하지 않으면 소비자 환경에서 모듈이 중복 번들링되어 버그가 발생할 수 있습니다 [6].
|
|
|
|
|
|
---
|
|
*Last updated: 2026-05-03*
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
|
|
<!-- CODE-GROUNDING:START -->
|
|
### 🔎 코드베이스 근거 (자동 추출 — E:\Wiki 레포)
|
|
**실제 구현/사용 위치:**
|
|
- `photoai/electron.vite.config.ts:2` — import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
|
|
- `photoai/src/main/inferenceBridge.ts:79` — // electron-vite: 개발 시 dev 서버, 배포 시 빌드된 html 로드.
|
|
|
|
**관련 커밋:**
|
|
- `photoai 8a8c102 Initial commit: AI Photo Organizer (Electron + face-api)`
|
|
- `Datacollect bcc12c4 feat(email): Email 패널 (Phase C) — front page UI`
|
|
- `Datacollect 502bbf5 fix: vite-backend-plugin type error and cleanup`
|
|
|
|
_자동 생성: code_grounding.mjs · 재실행 시 갱신됨_
|
|
<!-- CODE-GROUNDING:END -->
|