Vite란 무엇인가?
Vite(프랑스어로 '빠르다'라는 의미, 발음은 '비트')는 Vue.js의 제작자 Evan You가 개발한 차세대 프론트엔드 빌드 도구입니다. 2020년에 첫 버전이 공개된 이후 급속도로 인기를 얻어 현재는 React, Vue, Svelte, Lit 등 다양한 프레임워크를 지원하는 프론트엔드 개발 환경으로 자리잡았습니다.
Vite의 핵심 특징
1. 번개같은 개발 서버 구동 속도
Vite의 가장 큰 특징은 기존 번들러 기반 도구(Webpack, Parcel 등)와 달리 네이티브 ES 모듈(ESM)을 활용한다는 점입니다. 이로 인해:
- 초고속 서버 시작: 전체 애플리케이션을 번들링하지 않고 필요한 파일만 요청 시 변환하여 제공
- 즉각적인 HMR(Hot Module Replacement): 변경된 모듈만 교체하여 전체 페이지 새로고침 없이 빠르게 업데이트
graph TD;
A[기존 번들러] -->|전체 앱 번들링| B[개발 서버 시작]
C[Vite] -->|ESM 직접 사용| D[즉시 서버 시작]
B -->|수정 시 재번들링| E[변경사항 반영]
D -->|수정된 모듈만 교체| F[즉시 변경사항 반영]2. 최적화된 프로덕션 빌드
개발 환경에서는 ESM을 활용하고, 프로덕션 빌드에서는 Rollup을 사용해 최적화된 번들을 생성합니다:
- 코드 스플리팅
- 트리 쉐이킹
- 정적 자산 최적화
- CSS 코드 분할
3. 풍부한 기능과 플러그인 시스템
- TypeScript 내장 지원: 별도 설정 없이 바로 사용 가능
- JSX/TSX 지원: React 프로젝트도 쉽게 개발
- CSS 전처리기: Sass, Less, Stylus 등 지원
- 강력한 플러그인 시스템: Rollup 호환 플러그인과 Vite 전용 플러그인
4. 다양한 프레임워크 템플릿 제공
# React 프로젝트 생성
npm create vite@latest my-react-app -- --template react
# Vue 프로젝트 생성
npm create vite@latest my-vue-app -- --template vue
# 다른 프레임워크(Svelte, Lit, Preact 등) 지원Webpack과의 차이점
| 기능 | Vite | Webpack |
|---|---|---|
| 개발 서버 시작 속도 | 매우 빠름 (ESM 기반) | 상대적으로 느림 (번들링 필요) |
| HMR 성능 | 매우 빠름 | 앱 규모에 따라 느려짐 |
| 설정 복잡도 | 간단함 | 복잡함 |
| 생태계 | 성장 중 | 매우 성숙함 |
| 프로덕션 빌드 | Rollup 기반 | 자체 번들러 |
| 레거시 브라우저 지원 | 별도 설정 필요 | 기본 지원 |
Vite 설치 및 시작하기
1. 새 프로젝트 생성
# npm 사용
npm create vite@latest
# yarn 사용
yarn create vite
# pnpm 사용
pnpm create vite2. 프로젝트 설정 및 실행
cd my-vite-project
npm install
npm run dev3. 기본 프로젝트 구조
my-vite-project/
├── node_modules/
├── public/ # 정적 자산 (변환 없이 제공)
├── src/ # 소스 코드
│ ├── assets/ # 빌드 과정에서 처리될 자산
│ ├── components/ # 컴포넌트
│ ├── App.jsx # 메인 컴포넌트
│ └── main.jsx # 진입점
├── index.html # 진입 HTML (중요!)
├── package.json
└── vite.config.js # Vite 설정 파일Vite의 SVG 처리 방식
Vite에서는 SVG 파일을 여러 방식으로 처리할 수 있습니다:
-
URL로 가져오기: 기본적으로 SVG를 가져오면 URL 문자열을 반환
import logoUrl from './logo.svg'; // <img src={logoUrl} /> -
Raw 문자열로 가져오기: SVG를 텍스트로 처리
import logoSvg from './logo.svg?raw'; // <div dangerouslySetInnerHTML={{ __html: logoSvg }} /> -
React 컴포넌트로 가져오기:
?react쿼리 사용import Logo from './logo.svg?react'; // <Logo width={50} height={50} />
다른 빌드 도구(Webpack, Parcel 등)에서도 유사한 기능을 제공하지만, 설정 방법과 문법은 다를 수 있습니다.
Vite 환경 설정하기
기본 설정 (vite.config.js)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [
react(),
svgr() // SVG를 React 컴포넌트로 변환
],
resolve: {
alias: {
'@': '/src' // 경로 별칭 설정
}
},
server: {
port: 3000,
open: true
},
build: {
outDir: 'dist',
minify: 'terser',
sourcemap: false
}
});환경 변수 사용
// .env 파일
VITE_API_URL=https://api.example.com
// 코드에서 사용
const apiUrl = import.meta.env.VITE_API_URL;Vite 사용 시 장점
- 개발 경험 향상: 빠른 서버 시작과 HMR으로 개발 생산성 증가
- 간결한 설정: 대부분의 일반적인 작업이 기본 설정으로 가능
- 최신 웹 표준 활용: ESM, 동적 가져오기 등 최신 웹 기술 활용
- 최적화된 빌드: 효율적인 프로덕션 번들 생성
실제 사용 사례와 성능 비교
대규모 React 애플리케이션을 기준으로:
| 지표 | Vite | Create React App (Webpack) |
|---|---|---|
| 개발 서버 시작 | ~300ms | ~30초 |
| HMR 속도 | ~50ms | ~1초 |
| 프로덕션 빌드 | ~20초 | ~40초 |
| 번들 크기 | 비슷함 | 비슷함 |
타 빌드 도구와의 SVG 처리 비교
1. Webpack
Webpack에서는 SVGR 로더를 설정하여 SVG를 React 컴포넌트로 변환할 수 있습니다:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader']
}
]
}
};
// 사용법
import Logo from './logo.svg';
// <Logo />2. Next.js
Next.js에서는 SVGR을 통합 설정할 수 있습니다:
// next.config.js
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack']
});
return config;
}
};3. Create React App
CRA는 기본적으로 SVGR이 설정되어 있어 SVG를 컴포넌트로 바로 임포트할 수 있습니다:
import { ReactComponent as Logo } from './logo.svg';
// <Logo />결론
Vite는 빠른 개발 환경과 현대적인 빌드 최적화를 제공하는 강력한 도구입니다. 특히 대규모 프로젝트에서 개발 경험을 크게 향상시킬 수 있으며, SVG를 React 컴포넌트로 사용하는 ?react 쿼리 같은 편리한 기능도 제공합니다.
다른 빌드 도구들도 유사한 기능을 제공하지만, Vite의 간결한 설정과 뛰어난 성능은 프론트엔드 개발 환경으로서 큰 경쟁력을 가지고 있습니다. 새 프로젝트를 시작하거나 기존 프로젝트를 마이그레이션할 때 Vite를 고려해 볼 가치가 있습니다.
