태그: Vite
6편
-
Vite 빌드 도구: ESM 개발 서버·esbuild·Rollup 구조와 설정·플러그인·Webpack 비교
Vite가 개발 중에는 네이티브 ESM과 esbuild 사전 번들링으로, 프로덕션에서는 Rollup으로 빌드하는 구조를 설명하고, vite.config 설정, 환경 변수와 mode, React·Vue 프로젝트 구성, 플러그인 훅, 코드 분할과 빌드 튜닝을 예제로 다룹니다.
-
Vitest 테스트 프레임워크: Jest와의 차이, 모킹·커버리지·스냅샷과 CI 마이그레이션
Vitest가 Vite의 resolve·define·변환 설정을 그대로 공유해 Jest보다 설정이 줄어드는 이유를 설명하고, vi.mock과 vi.spyOn 모킹, 가짜 타이머, v8 커버리지, 스냅샷, 비동기 테스트 패턴, CI 구성과 Jest에서 옮기는 절차를 다룹니다.
-
Remix & React Router v7 가이드 — 웹 표준·SSR·Progressive
React Router v7(구 Remix)에서 loader로 데이터를 읽고 action과 Form으로 변경을 처리하는 흐름을 보여줍니다. useNavigation 로딩 UI, useFetcher, ErrorBoundary, 스트리밍, 쿠키 세션, Cloudflare Pages 배포도 담았습니다.
-
Wxt로 브라우저 확장 만들기: Manifest V3 생성, 엔트리포인트 구조, Storage·메시징, 크로스 브라우저
Wxt로 Manifest V3 브라우저 확장을 만들 때 wxt.config.ts로 매니페스트를 생성하고 entrypoints 규칙으로 백그라운드·콘텐츠 스크립트·팝업을 구성하는 방법, Storage와 메시징, Firefox 빌드 타깃을 현재 탭 정보 확장 예제로 다룹니다.
-
Vite 5 고급 가이드 — Rollup·플러그인·HMR·프로덕션 최적화
Vite 5 프로덕션 빌드(Rollup 4), 환경별 설정, 커스텀 플러그인, HMR 튜닝, React·Vue·Svelte 통합까지 다룹니다. Vite 5는 개발 서버에서는 네이티브 ESM과 esbuild 기반의 사전 번들로 빠른 시작을 제공하고, 프로덕션 빌드에서는 Rollup 4를 통해 트리 쉐이킹·코드 스플리팅·에셋 파이프라인을 완성합니다.
-
Remix 2로 옮기기: Vite 기반 빌드, Future Flags, Flat Routes, 타입 개선과 배포
Remix 2.0의 Vite 플러그인, Classic Compiler 종료 방향, Node 20+, Future Flags, Flat Routes, 실무 마이그레이션 절차를 다룹니다.