[React] CRA 대신 Vite 사용해서 프로젝트 만들기

CRA의 대체로 나온 Vite를 사용해볼 것이다. Vite는 CRA보다 속도가 빠르고 메모리를 적게 잡아먹는다는 장점이 있다고 한다.

 

프로젝트 만들기

npm create vite@latest

위 명령어를 입력하면 프로젝트를 만들 수 있는데 설정해주어야 할 것이 몇 개 있다.

Project name

- 따로 설정해주지 않으면 vite-project로 생성된다.

Select a framework

- 방향키를 이용하여 아래의 목록 중에 원하는 프레임워크를 선택하면 된다.

Select a variant

- 자바스크립트/타입스크립트 중에 선택할 수 있고 SWC를 사용할건지 선택할 수 있다. SWC에 대한 설명은 여기로

 

 

 

리액트 프로젝트 실행

vite-project 폴더로 이동해서 필요한 패키지를 설치하고 실행시켜보자.

cd vite-project

npm install
npm run dev

 

 

Vite는 CRA와는 달리 5173 포트를 사용한다.

 

리액트 로고가 빙글빙글 돌아가며 잘 실행되는 것을 확인할 수 있다.

 

 

[참고]

https://vitejs.dev/guide/

https://kg-dlife.tistory.com/210