Vite 플러그인 아키텍처 분석과 Vite 7·8 번들러 진화(Rollup vs Rolldown) 및 실무 제작 가이드
Vite 플러그인의 생명주기 훅 원리를 분석하고, Vite 7의 Rollup 기반 과도기에서 Vite 8의 Rolldown Rust 단일 통합 엔진으로 이어지는 번들러 진화 과정과 실무 커스텀 플러그인 제작 예제 3선을 정리합니다.
Vite 플러그인의 생명주기 훅 원리를 분석하고, Vite 7의 Rollup 기반 과도기에서 Vite 8의 Rolldown Rust 단일 통합 엔진으로 이어지는 번들러 진화 과정과 실무 커스텀 플러그인 제작 예제 3선을 정리합니다.
Vite 생태계에 최적화된 초고속 테스트 러너 Vitest의 아키텍처와 설정 방법을 살펴보고, Jest 대비 장점, vi API를 활용한 모킹, JSDOM 컴포넌트 테스트 및 v8 커버리지 리포트 수집 기법을 정리합니다.
pnpm Workspaces와 Vite를 연계하여 다중 웹 애플리케이션과 공통 UI 라이브러리를 효율적으로 관리하는 모노레포 아키텍처를 구축하고, 심볼릭 링크 기반 HMR 최적화와 위상 정렬 빌드 전략을 정리합니다.
Vite의 저수준 SSR API와 듀얼 번들링 파이프라인을 분석하고, 브라우저 하이드레이션과 Node.js 렌더링 엔트리 분리, Express 프로덕션 서버 구현 및 완성형 HTML 응답 검증 과정을 실무 관점에서 다룹니다.
Vite의 라이브러리 모드(build.lib)와 Rollup external 설정을 통해 React/TypeScript 기반 공통 컴포넌트를 ESM·CJS 듀얼 포맷으로 번들링하고, vite-plugin-dts 타입 정의 생성 및 package.json exports 최적화와 무결성 검증 방법을 정리합니다.
Vite의 transform 훅을 활용하여 .md 마크다운 파일을 파싱하고, Front Matter 메타데이터와 HTML을 런타임 ES 모듈 및 컴포넌트로 변환하는 커스텀 컴파일러 플러그인을 직접 구현합니다.
Vite의 진입점인 index.html을 조작하는 transformIndexHtml 훅의 구조와 HtmlTagDescriptor 규격을 분석하고, 개발·스테이징·프로덕션 환경에 맞춰 SEO 메타 태그와 CDN 스크립트를 동적으로 주입하는 커스텀 플러그인을 제작합니다.
Vite 개발 서버 내부의 Connect 미들웨어 스택과 configureServer 훅을 활용하여, 외부 Mock 서버 없이 단일 포트에서 지연 시간과 에러 코드를 시뮬레이션하는 경량 Mock API 플러그인을 제작합니다.
Vite와 Rollup의 널 바이트(\0) 규약 기반 가상 모듈 패턴을 이해하고, 파일시스템 생성 없이 Git 커밋 해시, 빌드 시간, 환경 메타데이터를 클라이언트 애플리케이션에 안전하게 주입하는 커스텀 플러그인을 구현합니다.
Vite 플러그인 시스템의 기반이 되는 Rollup 공용 훅과 Vite 전용 생명주기 훅의 실행 순서를 분석하고, 개발 서버와 프로덕션 빌드 환경에서 동작 차이를 검증하는 커스텀 추적 플러그인을 구현합니다.