Vite + React App 생성하기
Vite를 이용하여 React 애플리케이션을 생성하고 실행하는 방법에 대해 정리한 내용입니다.
1. Vite 알아보기
Vite
Next Generation Frontend Tooling
vitejs.dev
Vite는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구입니다. 다음과 같이 주요한 두 가지 특징을 갖고 있습니다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공.
ex) HMR (Hot Module Replacement) - 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있음.
이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공.
또한 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 |
1.1. Vite를 사용해야 하는 이유
기존에 React App을 생성하기 위해선 CRA(Create React App)를 사용하였습니다. CRA는 JavaScript 기반의 Webpack을 사용하여 모듈 번들링을 진행하는데 JavaScript는 기본적으로 interpreted (or just-in-time compiled) 언어이기 때문에 속도가 느려지는 문제가 발생했습니다. 번들링 해야하는 JavaScript 모듈이 많아질수록 병목 현상이 발생하고 생산성에 영향을 주게 되었습니다. 이와 같은 문제를 해결하기 위해 Go 언어를 사용해서 Esbuild라는 빌드 툴을 만들었고, 이렇게 만들어진 Esbuild를 기반으로 Vite가 만들어지게 되었습니다. (Esbuild는 Webpack과 같은 기존 번들러와 대비하여 10-100배 빠른 속도를 제공합니다)
2. Vite 프로젝트 생성하고 실행하기
Vite 프로젝트 생성을 위해서는 사전에 18+ 또는 20+ 버전의 Node.js가 설치되어 있어야 합니다. 다음 명령어를 실행하여 Vite 프로젝트를 생성해줍니다.
// npm
npm create vite@latest
// yarn
yarn create vite
프로젝트 이름이나 사용할 템플릿을 지정하여 생성하려는 경우엔 다음과 같이 실행해줍니다.
// TypeScript React 템플릿 생성 (npm)
npm create vite@latest {PROJECT_NAME} -- --template react-ts
// TypeScript React 템플릿 생성 (yarn)
yarn create vite {PROJECT_NAME} --template react-ts
// 프로젝트 이름 없이 현재 경로에 생성 (npm)
npm create vite@latest . -- --template react-ts
// 프로젝트 이름 없이 현재 경로에 생성 (yarn)
yarn create vite . --template react-tsyarn create v1.22.22
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-vite@5.5.2" with binaries:
- create-vite
- cva
Scaffolding project in /vite-project/yarn-create-vite...
Done. Now run:
cd vite-project
yarn
yarn dev
✨ Done in 1.63s.
프로젝트가 생성되면 패키지 설치 후에 실행해줍니다.
cd vite-project
yarn
yarn dev
Vite 프로젝트의 기본 포트는 5173 입니다. 브라우저에서 다음과 같이 앱이 실행되는 것을 확인할 수 있습니다.
이상으로 Vite를 이용하여 React 프로젝트를 생성하고 실행하는 방법에 대해 알아봤습니다.
※ Reference
- ko.vitesjs.dev, 시작하기 | Vite, https://ko.vitejs.dev/guide/
- velog.io/@codns1223, [React] Vite 사용해서 React app 생성, https://velog.io/@codns1223/React-Vite-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-React-app-%EC%83%9D%EC%84%B1
- velog.io/@homile, [React] Vite를 사용해보자, https://velog.io/@homile/react-vite
