[React] Vite에 대해서

들어가기 전

평소에 React를 사용할 때 CRA(Create React App) 라는 CLI 도구가 사용됐다.

React로 TailwindCss를 적용하기 위해서 공식문서를 확인하던 중 Vite에 대해서 알게 됐다.

Vite가 무엇이며 CRA (Create React App)가 있는데 왜 Vite를 사용하는지 알아보자.

 

https://ko.vite.dev/guide/

Vite

 

Vite란?

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

(Vite : 프랑스어로 "빠르다"를 의미)

 

CRA (Create React App) 대신 Vite를 사용하는 이유

1. CRA로 만든 프로젝트에 node_module은 많은 용량을 차지한다.

2. CRA는 JavaScript로 구성된 Webpack(웹팩)을 사용하는데, 라이브러리가 많으면 번들링 시간이 길다.

3. Vite는 Esbuild 사용한다. (Esbuild : Go언어로 작성된 JavaScript 빌드툴, 속도가 빠른 것이 특징.) 그렇기 때문에 CRA 보다 빠르다.

Vite로 React 프로젝트 설치

1. Vite 최신버전 설치

npm install vite@latest

 

2. 프로젝트 이름 설정

나는 react-practice 라는 이름으로 생성했다.

 

3. 프레임워크 설정 (React를 설정)

 

4. variant 설정

아직은 JavaScript가 더 편하다..

 

5. cd [프로젝트 이름]

 

6. 의존성 모듈 설치

npm install

 

7. npm run dev 로 코드 실행

npm run dev

 

코드가 실행되면 아래와 같은 화면이 실행된다.

 

CRA 가 React 프로젝트 생성의 전부인줄 알았었다. 이 기회에 Vite라는 새로운 빌드 도구를 알게된 좋은 시간이었다.

앞으로는 CRA가 아닌 Vite를 더 많이 사용하게 될 것 같다.