[React] Vite 사용하기

개인적으로 시작하는 프로젝트에서 처음으로 vite를 사용하게 되었다.

근데 난 CRA만 사용해봤고, vite를 처음 들어봤어서…

정리를 하면서 Vite에 대해 알아가보려고 한다!!

 

📌 Vite란?

Vite는 프랑스어로 "빠르다(Quick)"를 의미하며,

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

• 개발 시 다양한 기능을 제공한다. ex) Hot Module Replacement (HMR)
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다.
  → 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며,
      미리 정의된 설정(Pre-configured)을 제공한다.

 

📌 CRA 대신 Vite를 사용하는 이유

CRA(Create React App)는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린 편이다.

종종 개발 서버를 가동하는 데 비합리적으로 오랜 시간을 기다려야 한다거나

HMR을 사용하더라도 변경된 파일이 적용될 때까지 수 초 이상 소요되곤 한다.

이를 해결하기 위해 Vite는 Esbuild를 사용한다.

Go로 작성된 Esbuild는 Webpack, Parcel과 같은 기존의 번들러 대비 10-100배 빠른 속도를 제공한다.

 

📌 사용해보기

$ npm create vite@latest
$ yarn create vite

실행하면 프로젝트 이름, 프레임워크, 언어를 선택하라고 나온다.
프로젝트 이름은 vite-project가 디폴트로 되어 있어서
vite-project / React / Typescript를 선택하였다.

위의 방법 외에도 아래처럼 하나의 명령으로 실행할 수 있다.

$ npm create vite@latest vite-project -- --template vue
$ yarn create vite myproject --template react-ts

-- template 뒤에 내가 사용할 프레임워크를 작성하면 된다.

(나는 react, ts니까 저렇게 적어주었다!)

 



작성이 끝나면 아래와 같이 파일들이 생성된다.

 

 

참고

🔗 https://ko.vitejs.dev/guide/