[React] CRA가 아닌 Vite로 React 시작하기

처음 리액트 환경 세팅할 때 무작정 npx create-react-app 로 시작을 했었는데
오늘 프로젝트를 위해 환경 세팅을 알아보다가 Vite를 알게 되었다.

CRA로 프로젝트를 생성할경우 기본 제공되는 react-scripts 번들러를 사용하게 되는데 이 라이브러리 내부에서 사용되는 것은 webpack인데 Vite보다 속도도 느리고 메모리도 많이 사용되어 무겁다.

리액트는 JSX로 작성되어 JS로 컴파일 하는 과정이 필요한데 CRA는 코드가 바뀌면 모든 코드를 새로 번들링하기 때문에 앱이 커질수록 HMR(Hot Module Reloading)이 느려진다.

하지만 Vite는 Esbuild를 이용하여 변경된 부분만 새로 번들링한다. (물론 처음에 전체적으로 한 번 번들링한다)

그렇게 때문에 이번 프로젝트는 Vite로 React 프로젝트를 생성하기로 하였다.

생성 방법도 간단하다.

1. 터미널에 npm init vite
2. cd [프로그램 이름]
3. npm install
4. npm run dev