Files
2nd/10_Wiki/Topic_Programming/Frontend/Vite.md
T
Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
2026-07-05 00:33:48 +09:00

4.6 KiB

category, tags, title, description, last_updated
category tags title description last_updated
Frontend
auto-wikified
technical-documentation
frontend
Vite Vite는 독립적으로 사용되거나 Remix, Vue 등 다양한 프레임워크와 결합할 수 있는 현대적인 프론트엔드 빌드 도구입니다 [1]. 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)

🔎 코드베이스 근거 (자동 추출 — 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 · 재실행 시 갱신됨