Vite 빠르고 효율적인 프론트엔드 빌드 도구

Vite는 무엇인지 알아보고 어떻게 사용하는지 알아보자.

프론트엔드 개발이 진화하면서 더 빠르고 효율적인 도구가 필요해졌다. 그중 하나가 Vite다. 이 글에서는 Vite의 개념과 특징, 사용 방법, 그리고 다양한 활용 방안에 대해 알아본다.

Vite란 무엇인가?

Vite는 에반 유(Evan You)가 개발한 현대적인 프론트엔드 빌드 도구다. Vue.js의 창시자답게 Vite는 Vue 생태계뿐만 아니라 React, Svelte, Vanilla JS 등 다양한 프레임워크와도 잘 호환된다.

Vite의 핵심 특징

• 빠른 개발 서버: ES 모듈 기반의 온디맨드 파일 서빙을 통해 빌드 단계 없이 개발 서버를 즉시 시작할 수 있다.
• 번개처럼 빠른 HMR: 코드 변경 시 Hot Module Replacement가 빠르게 이루어져 큰 프로젝트에서도 효율적으로 개발할 수 있다.
• 최적화된 프로덕션 빌드: Rollup을 기반으로 최적화된 번들링을 제공한다.
• 다양한 기술 지원: TypeScript, JSX, CSS, SVG 등 다양한 기술이 바로 지원된다.

Vite 설치 및 사용법

Vite 프로젝트를 시작하는 방법은 간단하다.

1. 프로젝트 생성 및 설치

$ npm create vite@latest my-project
$ cd my-project
$ npm install

2. 개발 서버 시작

$ npm run dev

개발 서버가 시작되면 기본적으로 localhost:5173에서 앱을 확인할 수 있다.

3. 프로덕션 빌드 및 미리보기

npm run build    # 프로덕션 빌드
npm run preview  # 빌드 결과 확인

Vite를 활용한 프로젝트 구조

Vite 프로젝트의 기본 구조는 다음과 같다.

My-Project /
┝─ public/                # 정적 파일
┝─ src/                   # 소스 파일
┃  ┝─ main.js             # 진입점
┃  └─ App.vue             # 예제 앱 컴포넌트
┝─ index.html             # 메인 HTML 파일
┝─ package.json           # 프로젝트 메타데이터
└─ vite.config.js         # Vite 설정 파일

Vite 설정 파일 예시

Vite는 vite.config.js를 통해 간단하게 설정을 변경할 수 있다.

import { defineConfig } from 'vite';
 
export default defineConfig({
  base: '/',
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
  },
});

Vite의 주요 활용 사례

1. 단일 페이지 애플리케이션 (SPA) Vite는 Vue, React, Svelte 등 다양한 프레임워크 기반의 SPA 개발에 최적화되어 있다. 빠른 HMR 덕분에 개발 속도가 극적으로 향상된다.
2. 다중 페이지 애플리케이션 (MPA) Vite는 Rollup을 활용해 다중 페이지 애플리케이션도 빌드할 수 있다.
3. 라이브러리 개발 Vite는 라이브러리 모드도 제공해 번들 크기를 최소화하고 최적화된 빌드를 생성할 수 있다.
4. 환경 변수 활용 .env 파일을 통해 개발, 테스트, 프로덕션 환경에 따라 다른 변수를 사용할 수 있다.

VITE_API_URL=https://api.example.com

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

5. 커스텀 개발 서버 프록시 설정과 같은 고급 기능으로 외부 API 서버와 원활하게 연동할 수 있다.

server: {
  proxy: {
    '/api': {
      target: 'https://api.example.com',
      changeOrigin: true,
    }
  }
}

Vite와 Webpack의 차이점