[React/리액트] Vite 설치 및 사용

Vite 란?

 

모던 웹 프로젝트 개발에 초점을 맞춰 만들어진 빠르고 간결한 빌드 도구로, CRA 의 단점을 해결하기 위해 Esbuild 를 기반으로 만들어진 빌드툴이다. CRA 는 자바스크립트로 구성된 Wepack 을 사용하는데, 다소 속도가 느린 편이다. 평소에는 체감하지 못할 수 있지만, 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 

 

(참고로 Esbuild 는 Go 언어로 작성된 자바스크립트 빌드툴로 속도가 빠르다.)

 

 

Vite 사용하기

 

아래 순서대로 따라하면 된다.

 

- $ npm init vite

- 프로젝트 이름 설정

 

 

- 프레임워크 설정

 

 

- variant 설정 -> 타입스크립트를 선택할 것인지 여부

 

 

- $ cd 프로젝트 이름

- npm install

- npm run dev

 

 

$ npm run dev 명령어를 입력하면 아래와 같이 뜬다. 로컬 주소로 들어가면 아래의 vite 빌드 도구를 활용한 리액트 페이지를 볼 수 있다!