React.js | Vite로 시작하기

https://ko.vitejs.dev/

 

이 글은 리액트 v18 기준입니다.

 

사실 작년까지는 CRA로 리액트 프로젝트를 사용했던것 같아요, 뭐...한두번이야 직접 CDN 방식으로 React를 구성해보기도 했지만..알잖아요? 귀찮은거..

 

혹시나 CRA도 궁금하신 분들은 (아마 없겠죠?) 아래 북마크를 참고해보시고요,..일단 vite에 대해서 살펴보려고 해요!

https://create-react-app.dev/

Create React App

 

대부분 CRA에 익숙할거 같네요, 저도 그랬으니깐...일단 vite를 사용해서 프로젝트를 구성한지는 얼마 되지 않아서, 어느정도 정리 차원에서 글 남기는거니깐~

 

일단 vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 라고 읽는다고 해요, 첨엔 바이트라 일어야 하나 했는데...빗~ 비트~ 하면 되지 않을까요?

 

그리고 대체적으로 vite 를 써야 하는 이유를 아래 북마크를 참조해서 살펴볼 수 있어요, 최신 프런트엔드 환경에 맞춰서 개발된 만큼 CRA 보다 진보하지 않았을까 라고 생각만 했는데,..

https://ko.vitejs.dev/guide/why.html

Vite

 

각설하고, vite로 프로젝트를 시작하려면 CRA와 비슷하게 시작합니다.

 

I. 프로젝트 생성하기

 npm create vite@latest

 

어디서 많이 본것같은...

npx create-react-app my-app

 

일단 첫 인상은,...vite가 빠르네~ 는 맞는것 같고요, 다만 CRA랑 비교했을때 근소한 차이..보다는 좀 더 빠른 느낌을 받긴 했는데..시간을 측정한 건 아니니깐..pass 하고,

 

근데, CRA는 node_modules/ 까지 만들어지던데 vite는 다시한번 명령어를 입력해주어야 하더라고요, 그래서 빨랐나?

npm install

 

..잠간, 끊었다가 다시 써야겠네요 ㅠ