[React] vite로 리액트 프로젝트 시작하기

1. vite란?

빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. Esbuild를 사용하여 기존 JavaScript 기반 도구에서 나타나는 느린 성능 적용 및 서버 가동의 문제점을 해결했다. 

 

2. create react app(CRA)과의 차이점?

가장 궁금했던 부분이다. 처음 설치했을 때 나타나는 웹페이지 기본창만 다르고 기능들을 똑같은 거 같은데 왜 vite가 권장되는지 둘 사이에 차이점이 있는지 궁금했다.

 

 CRA는 Webpack이라는 모듈 번들러를 사용하는데 라이브러리를 많이 설치하고 코드가 길어지면 느려진다고 한다. 그걸 해결하기 위해 vite는 Go 언어로 작성되고 속독 빠른 빌드툴인 Esbiuld를 기반으로 한다.

 

3. 사용방법

• 사용하기 전에 Node.js가 설치되어있어야 한다.

npm create vite@latest

 

이후 프롬프트 창에 출력되는 메시지를 따라가면 된다. 프로젝트를 만들 때 프로젝트 이름과 템플릿을 한 번에 지정할 수 있다.

 

# npm v7 이상에서 '--' 반드시 붙이기
npm create vite@latest [프로젝트 이름] -- --template vue

 

템플릿은 이밖에도 vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts가 있다.

 

 현재 디렉터리에서 프로젝트를 생성하려면 프로젝트 이름으로 .을 사용하면 된다.

 

• 프로젝트 설치부터 실행 방법

npm create vite@latest [프로젝트 이름] -- --template react
cd [프로젝트 이름]

npm install
npm run dev

 

 

CRA보다 속도가 빠른 건 처음 알았다. 같은 기능이어도 새로운 버전? 새로운 방법?이 계속 생기는 건 이유가 있었구나