1. 소개

빠른 프론트엔드 개발 환경을 만들어주는 빌드 툴이다.

Webpack, Parcel, Rollup 같은 도구와 비슷한 역할을 하지만, 훨씬 빠른 개발 서버 속도와 빌드 성능을 제공하는것으로 알려져있다.

특히, ES Module 방식으로 로드하기 때문에 아래와 같은 장점을 지닌다.

1. 새로고침 속도가 빠름
2. 빌드속도가 짧음
3. 사용하지 않는 코드를 번들링에서 제외하여 최적화

2. 핵심 특징

• 빠른 개발 서버 : 파일을 수정하면 실시간으로 변경된 부분만 다시 로드(HMR)
• ES 모듈 기반 : 브라우저의 native ESM(import/export) 기능을 활용
• 빌드 시 Rollup 사용 : 최종 빌드는 Rollup 기반으로 최적화
• JSX, TypeScript 지원 : babel 없이도 vite가 변환 가능
• 플러그인 시스템 : React, Vuew, Svelte 등 다양한 프레임워크 지원
• 간단한 설정 : Webpack 보다 설정이 훨씬 간결

3. Vite + Babel 조합의 장점

Vite는 기본적으로 JS/JSX 처리를 지원한다.
하지만Babel을 추가하면 아래와 같은 장점을 얻을 수 있다.

상황	Babel이 필요 없는 경우	Babel이 유용한 경우
기본 JS/JSX 변환	Vite의 esbuild 또는 swc로 충분	Babel이 없어도 됨
최신 브라우저 대상	Vite 기본 설정으로 충분	없음
구버전 브라우저 호환	기본 지원 부족	Babel + preset-env 사용
커스텀 문법	기본 지원 안 됨	Babel Plugin으로 처리
코드 변환 테스트	esbuild 사용	Babel 플러그인으로 실험 가능
React 자동 런타임	Vite 기본 지원	Babel로 세밀한 설정 가능
타입스크립트 변환	esbuild로 충분	Babel로 타입 제거 후 변환 가능 (선택사항)

결론

대부분의 경우는 Vite 단독으로도 충분하지만, 구버전 브라우저와의 연동이나 커스텀 변환이 필요할 경우 Babel이 필요하다.

4. 프로젝트 생성

npm create 명령어로 Vite 프로젝트를 생성할 수 있다.

npm create vite@latest

5. 기본 폴더 구조

Vite 프로젝트는 기본적으로 아래와 같은 구조를 따라야한다.

• vite.config.js : Vite의 모든 설정 관리
  • Alias 설정(@ -> src/)
  • 플러그인 추가
  • 빌드 대상 경로 설정
• src/ : 소스 코드
• public/ 정적 파일(이미지, 폰트 등)

6. 설정 파일(vite.config.js)

설정 예시

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  build: {
    outDir: 'build', // dist 대신 build 폴더 사용
  },
});

주요 설정 항목들

• root : 프로젝트 루트 디렉토리
• base : 배포용 기본 URL 경로(/my-app/ 등)
• resolve.alias : 경로 별칭 설정(@/components 등)
• server.port : 개발 서버 포트
• build.outDir : 빌드 결과물 폴더 설정(dist 등)
• plugins : React, Vue 등 플로그인 등록

7. 빌드 & 배포

빌드

npm run build

기본적으로 /dist 폴더에 정적 파일을 생성(HTML, CS, CSS 등)

배포 예시

• Vercel, Netlify : dist 폴더를 정적 배포
• GitHub Pages : vite.config.js에서 base 설정 필요 (my-repo)
• Nginx, Apache : dist 폴더를 /var/www/html/ 등으로 이동
• S3 + CloudFront : dist 폴더를 S3에 업로드, CloudFront로 배포

8. 환경변수 설정(.env)

• .env 파일로 개발/운영 환경 분리
• VITE_ 접두어를 붙여야 클라이언트 코드에서 사용 가능

.env 파일 예시

VITE_API_URL=https://api.example.com

사용 예시

console.log(import.meta.env.VITE_API_URL);

9. 플러그인

• Vite의 기능을 확장하거나 개발 환경을 커스터마이즈할 때 사용한다.
• Vite는 Rollup을 기반으로 하고 있기 때문에, Rollup 플러그인과 구조가 비슷하지만 개발 서버용 기능(HMR, Dev Proxy 등)을 추가로 제공한다.

플러그인의 역할

• 프레임워크 지원 : React, Vuew, Svelte 등
• 파일 변환 : JSX, TypeScript, SVG ->js
• 개발 서버 동작 변경 : API 프록시, CORS 설정 등
• 빌드 결과 최적화 : 압축, 코드 분할, 구버전 브라우저 대응
• 정적 파일 처리 : 이미지 최적화, Markdown -> HTML 변환 등
• PWA, SSR, 자동 import 등 확장 : 다양한 커스텀 기능 추가

플러그인 목록

• @vitejs/plugin-react : React 지원
• @vitejs/plugin-vue : Vue 지원
• @vitejs/plugin-legacy : 구버전 브라우저 지원(ex. IE 11)
• vite-plugin-svgr : SVG 파일을 React 컴포넌트로 사용 가능
• vite-plugin-pwa : PWA 지원
• vite-plugin-compression : 빌드 결과물 gzip 압축
• vite-plugin-legacy : 구버전 브라우저 지원 추가
• vite-plugin-pages : 파일 기반 라우팅 자동 생성
• vite-plugin-html : HTML 템플릿 확장 및 변환 가능

설치 및 사용 예시

1. React 플러그인 설치

npm install --save-dev @vitejs/plugin-react

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

2. SVG를 React 컴포넌트로 사용 (vite-plugin-svgr)

npm install --save-dev vite-plugin-svgr

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()],
});

사용 예시

import { ReactComponent as Logo } from './logo.svg';

export default function App() {
  return <Logo />;
}