[react] vite 사용하기

react에서 Vite를 사용하는 방법을 알아보자. 자세한 내용은 공식 사이트의 내용을 참고하면 된다.

영문] https://vitejs.dev/guide/
한글] https://ko.vitejs.dev/guide/

Vite는 프랑스어로 빠른(quick)이라는 뜻이다. 읽을 때 바이트가 아니라 빝(/vit/)으로 발음해야 한다. Vite는 기존 webpack보다 빠른 환경을 제공하기 위해서 만들어졌다. 빠른 Hot Module Replacement (HMR) 등의 ES 모듈에서의 기능 강화와 번들링할 때의 최적화 작업을 한다고 한다.

Create React App 대신에 Vite를 사용하는 이유

지금까지 리액트 개발 시 CRA를 사용했었다. 하지만 Vite가 나온 이유가 뭘까?

기본적으로 개발 시 필요한 라이브러리는 npm을 사용하여 설치를 한다. 그리고 개발한 다음 다른 모듈에서 쉽게 사용할 수 있도록 하나의 파일로 묶어서 배포한다. 이를 번들링(bundling)이라고 한다. CRA에서는 기본적으로 웹팩(webpack)을 통해 번들링을 한다. 하지만 파일이 많아지면 엄청 무거워지고 번들링할 때 오래 걸리는 문제가 생긴다.

Vite에서는 번들링을 webpack이 아닌 esbuild를 사용한다. esbuild는 go 언어로 작성되어서 속도가 엄청 빠르다. 번들링할 때 "변경된 부분"만 새롭게 번들링을 한다.

그리고 실행하는 서버도 CRA는 express 서버를 사용하는 반면 Vite는 Koa라는 작은 서버를 사용해서 리소스도 적게 먹는다.

설치 방법

아래 명령어로 vite를 설치를 한다.

npm create vite@latest

다음 프로젝트의 이름을 입력한다. vite-demo

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

TypeScript를 사용할지를 선택한다. TypeScript

이렇게 하여 설치가 완료되었다. 그리고 아래 방법대로 3가지 명령어를 추가하여 dev 서버를 기동한다.

Scaffolding project in /Users/.../vite-demo...

Done. Now run:

  cd vite-demo
  npm install
  npm run dev

CRA에서는 npm start로 시작했지만 Vite에서는 npm run dev로 서버를 시작한다. 그리고 기본 포트로 3000번이 아닌 5173으로 뜬다.

 VITE v5.1.4  ready in 578 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

http://localhost:5173/ 으로 접속을 해보면 아래와 같은 화면이 표시된다.