Vite에 대하여!

최근 예전부터 해보고 싶었던 인터렉티브 페이지 개발을 해보고 싶기도 했고, 교내 동아리 스터디를 들으면서 Vite에 대해서 알게 되었다. 바로 사용하기 전에! vite가 무엇인지 알아보고, 시작해보자

 

Vite란?

최신 웹 프로젝트에 더 빠르고 효율적인 개발 환경을 제공하는 것을 목표로 하는 빌드 도구

1. 빠른 개발 환경 제공

2. 최신 JavaScript(ES6+) 모듈 활용 가능

 

Vite의 특성

기존의 Webpack 같은 번들러보다 훨씬 빠른 핫 리로딩, 경량화된 번들링, 빠른 초기 빌드 속도를 제공함.

기능	Webpack	Vite
개발 서버 속도	느림 (번들링 필요)	매우 빠름 (ESM 사용)
핫 리로딩	느림 (파일 수정 시 전체 번들 재생성)	즉각적인 변경 적용
초기 로딩 시간	느림 (번들 크기 영향)	필요할 때만 모듈 로드
구성	복잡함	간단함 (거의 설정 필요 없음)
빌드 속도	느림 (코드 최적화 과정이 긺)	최적화된 빌드 (esbuild 사용)

 

1️⃣ 초고속 개발 서버

• 브라우저에서 바로 ES 모듈(ESM)을 로드
• HMR(Hot Module Replacement)으로 빠른 코드 반영

2️⃣ 빠른 번들링 (esbuild 사용)

• Webpack보다 최대 10~100배 빠름
• ES6+, TypeScript, JSX 지원

3️⃣ 설정이 거의 필요 없음

• vite.config.js를 추가하면 커스텀 가능하지만 기본 설정이 강력

4️⃣ 플러그인 지원 (Rollup 기반)

• 다양한 Vite 플러그인 사용 가능
• 예: TailwindCSS, PWA, Vue, React, Three.js 등

 

여기서, Webpack은 뭐고, 번들링은 뭘까?

번들링이란, 여러 개의 JS 파일을 하나로 묶어 브라우저가 효율적으로 로드할 수 있도록 최적화하는 과정

-> 이를 통해 로딩 속도를 개선하고 코드를 최적화할 수 있음.

-> 모든 파일 들이 bundle.js로 묶이는 것을 말함!

 

Vite 설치 및 사용법

# Vite 프로젝트 생성
npm create vite@latest my-project --template vanilla

# 프로젝트 폴더 이동
cd my-project

# 패키지 설치
npm install

# 개발 서버 실행 (기본 포트: 5173)
npm run dev

 

헷갈려서 찾아본 결과...

Vite는 개발 환경을 최적화하는 도구이고

React는 UI를 만드는 라이브러리라고 한다!

 

React를 사용하려면 빌드 도구가 필요한데, 기존엔 Webpack을 썼다면 요즘엔 Vite가 많이 사용되는 추세임

 

 

프로젝트별 실행 명령어와 개발 도구!

프로젝트 유형	실행 명령어	사용되는 개발 도구
Vite 프로젝트	npm run dev	Vite
Create React App (CRA)	npm start	Webpack
Next.js	npm run dev	Next.js 자체 서버
Parcel	npm run dev	Parcel
Vanilla JS	npm start	Webpack