Vite(비트)란?
Vite는 프랑스어로 "빠르다(Quick)"을 의미하며, 발음은 "veet"와 (비트)로 발음한다. 이 vite는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.(ex. Hot Module Replacement (HMR))
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다.
CRA(Create React App)와 Vite
CRA는 자바스크립트 코드로 구성된 툴인 Webpack을 사용한다. 자바스크립트는 기본적으로 interpreted 언어이기 때문에 느리다. 코드의 양이 적다면 차이를 느끼기 어렵지만, 처리해야할 코드의 양이 방대해질 경우에는 그 단점이 확연히 드러난다. 그래서 개발자들은 위와 같은 단점을 해결하기 위해 Go와 같은 저급언어(low-level language)를 활용해서 자바스크립트 툴을 창조했고 그렇게 해서 생겨난 게 Esbuild이며 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하게 된 것이다.
- Esbuild: Go 언어로 작성된 JavaScript 빌드툴로 속도가 빠르다.
Vite가 지원하는 템플릿
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
| solid | solid-ts |
| qwik | qwik-ts |
Vite로 프로젝트 생성하기.
호환성의 문제로 현재 시점의 Vite는 버전 18+ 또는 20+ 의 Node.js를 요구한다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다.
Vite로 React 프로젝트 생성하기
npm create vite@latest project-name -- --template react
Vite로 typescript 기반 React 프로젝트 생성하기
npm create vite@latest project-name -- --template react-ts
cd my-project
npm install
npm run dev
이 화면이 보이면 프로젝트 생성에 성공!
참조
