[FrontEnd] Vite를 사용해서 프로젝트를 생성해보자

Vite(비트)의 정의

Vite는 프론트엔드 개발 환경을 위한 최신 빌드 도구이다.

Webpack과 달리 브라우저의 네이티브 ES 모듈(ES Modules)을 활용하여 빠른 개발 서버 구동과 즉각적인 핫 모듈 리로드(HMR)를 제공한다. Vue.js 창시자 Evan You가 개발한 툴로, 특히 Vue나 React 같은 모던 프레임워크와의 궁합이 뛰어나다.

 

vite의 주요 특징

특징	설명
⚡ 초고속 서버 구동	개발 서버를 즉시 실행, 대기 시간 거의 없음
💡 ESM 기반	브라우저가 모듈을 직접 처리 – 빌드 없이 개발 가능
🔥 HMR 지원	변경 시 빠르게 새로고침 없이 화면 반영 (Hot Module Replacement)
📦 빠른 번들링	빌드 시에는 Rollup 기반으로 최적화된 번들 생성
🧩 플러그인 확장성	다양한 Vite 플러그인 사용 가능

 

Vue CLI vs Vite vs CRA

항목	Vue CLI	Vite	CRA (Create React App)
서버 실행 속도	느림 (Webpack 기반)	매우 빠름 (Native ESM)	느림 (Webpack 기반)
구성 방식	복잡함	단순하고 직관적	비교적 간단하나 확장성 제한적
플러그인	Vue 전용 위주	Rollup 기반, 범용적	React 전용 위주
상태	점차 사용 감소 중	Vue 3 공식 권장	React 진영에서 사용 감소 중 (Vite, Next.js 등으로 이동 중)

 

 

Vite 설치 방법

Vite를 설치하는 방법은 매우 간단하다. npm이나 yarn을 이용하여 쉽게 설치할 수 있다.

# npm을 이용한 설치 방법
npm create vite@latest

# yarn을 이용한 설치 방법
yarn create vite

 

 

Vite로 프로젝트 시작하기

기본적으로 프로젝트를 이름을 정하고 프레임워크와 언어를 선택하면 프로젝트가 생성이 된다.

 

1. 터미널에서 아래 명령어로 프로젝트 생성을 시작한다.

# npm을 이용한 설치 방법
npm create vite@latest

# yarn을 이용한 설치 방법
yarn create vite@latest

 

2. 프로젝트 이름을 정한다.

 

3. 프레임워크를 선택한다.

바닐라 자바스크립트 프로젝트부터

Vue, React 모두 지원한다.

 

4. 언어를 선택한다.

 

5. 아래와 같이 프로젝트가 생성된 것을 볼 수 있다.

 

6. 해당 프로젝트에서 아래 명령어를 실행하여 Node 모듈과 같이 프로젝트 실행에 필요한 파일을 다운 받는다.

프로젝트에 필요한 패키지를 프로젝트에 모두 포함시키면 프로젝트가 굉장히 커질 수 있으므로 package.json에서 의존성 주입을 통해 팔요한 플러그인을 실행하는 환경에서 내려받도록 하는 것이다.

# npm을 이용한 설치 방법
npm install

# yarn을 이용한 설치 방법
yarn install

 

7. 아래 명령어를 실행하여 http://localhost:5173에 접속하여 해당 화면이 나오면 성공이다.

# npm을 이용한 설치 방법
npm dev

# yarn을 이용한 설치 방법
yarn dev

 

 

Vite로 프로젝트를 생성할 때 프로젝트 이름과 template를 아래처럼 함께 적으면 바로 프로젝트를 생성할 수 있다.

Vite + Vue

npm create vite@latest my-vue-app -- --template vue

 

Vite + React

npm create vite@latest my-react-app -- --template react

 

마치며

Vite는 빠른 속도와 간단한 설정으로 개발자의 생산성을 크게 향상시켜준다. Vue나 React 기반의 프로젝트를 빠르게 시작하고 싶다면 Vite를 적극 추천한다.