콘텐츠로 이동

Vite 주요 기능

개요

Vite를 쓰면 기본적으로 정적 파일 서버와 비슷하게 개발할 수 있지만, 네이티브 ESM 위에 여러 기능이 더해져 번들러 기반 설정에서 흔히 기대하는 것들을 다 지원해요. 개발 서버 속도, HMR, TypeScript, 빌드 최적화까지 — Vite가 "고치고 바로 보기"를 빠르게 만드는 핵심 기능들을 하나씩 되짚어 볼게요.

핵심 개념

  • npm 의존성 해석과 사전 번들링(Pre-bundling) — 브라우저는 import { someMethod } from 'my-dep'처럼 패키지 이름만 적은 bare import를 이해하지 못해요. Vite는 그런 import를 감지해 사전 번들로 만들어 CommonJS/UMD를 ESM으로 바꾸고, 유효한 URL로 재작성해 브라우저가 제대로 import하게 해요. 사전 번들링을 덕분에 콜드 스타트가 JS 기반 번들러보다 훨씬 빨라요.
  • HMR(Hot Module Replacement) — 네이티브 ESM 위에 HMR API를 얹어서, 페이지 전체를 새로고침하지 않고 바뀐 모듈만 정밀하게 교체해요. React는 공식적으로 React Fast Refresh로, Vue는 SFC로 1급 통합돼 있어요. create-vite로 앱을 만들면 템플릿에 미리 설정돼 있어서 따로 손댈 일이 없죠.
  • TypeScript — .ts 파일을 바로 import할 수 있어요. 다만 Vite는 트랜스파일만 하고 타입 검사는 하지 않아요. "타입 오류는 브라우저에서 어떻게든 보자"는 접근 대신, IDE와 빌드 과정이 타입 검사를 맡는다고 보는 거예요. 타입 검사는 전체 모듈 그래프를 알아야 해서 Vite의 파일 단위 변환 모델과 안 맞거든요. 프로덕션 빌드 때 tsc --noEmit을, 개발 중엔 별도 프로세스로 tsc --noEmit --watch를 돌리거나 vite-plugin-checker를 쓰는 걸 권장해요.
  • 빌드 최적화 — 기본 설정만으로 자동 적용되는 것들이 있어요. 비동기 청크에 쓰인 CSS를 별도 파일로 뽑아 FOUC를 피하는 CSS 코드 스플리팅, 엔트리 청크에 <link rel="modulepreload">를 만들고, 동적 import 시 공통 청크를 병렬로 미리 가져오는 비동기 청크 로딩 최적화 등이 대표적이에요.

한 가지 짚고 갈 점은 TypeScript 변환 방식이에요. Vite는 타입 전용 import를 안전하게 다루기 위해 import type 문법을 권장해요. 타입만 가져오는 걸 런타임 코드로 잘못 묶는 문제를 피하려는 거예요. isolatedModules: true도 중요한데, 파일 단위 독립 변환에서 안 되는 const enum 같은 기능을 쓰지 않도록 경고를 띄워줘요.

실제 적용(데이터스케쳐스 관점)

캔버스는 React + Vite 에디터라서 "TypeScript는 변환만 하고 타입 검사를 안 한다"는 Vite의 설계가 바로 개발 방식에 반영돼요. Vite의 빠른 변환 속도를 타입 검사가 깎아먹지 않도록, 타입 검사는 빌드 파이프라인에서 tsc --noEmit으로 따로 실행하는 구조예요. 그래야 개발 서버는 항상 빠르고, 타입 안정성은 별도 게이트가 보장하죠.

개발 중엔 HMR이 핵심 가치예요. 캔버스처럼 편집 상태를 오래 들고 있는 화면에서, 노드를 옮기는 로직을 고쳐도 HMR이 바뀐 컴포넌트만 교체해서 상태를 유지한 채 바로 확인할 수 있어요.

// 개발 서버와 빌드를 띄우는 기본 흐름이에요.
npm run dev      // Vite 개발 서버 + HMR
npm run build    // Rollup/Rolldown 배포 번들
npm run preview  // 빌드 결과를 미리 확인

페이지 전체를 새로고침하는 방식이라면 그때마다 편집 중이던 상태가 사라져서 개발 흐름이 끊기죠. Vite의 "직접 켜는 설정 없이 좋은 개발 경험"이라는 방향이 바로 여기서 빛을 보는 거예요. 명령 하나에 개발과 빌드가 갈리는 구조만 기억해 두면, 역할이 다르다는 점이 분명해져요.

더 알아보기