[React] CRA 보다 빠른 Vite로 React 프로젝트 생성하기

240124 수 TIL ✍

저번 강의에서 CRA 를 배웠었다.

CRA 란, Create React App의 줄임말로 - 한 줄의 명령어 입력으로 React 프로젝트 개발의 필수요소를 자동으로 구성하는 방법이다. (리액트 프로젝트를 구성하는 데에 필요한 WebPack, babel, esline 등을 이 한 줄 명령어로 다 셋팅할 수 있다)

원래 이 방법,명령어로 리액트 프로젝트 생성하도록 배웠었는데
Vite('빗')로 생성하는게 더 빠르고 좋다고 한닷 !! 🐱‍🏍 CRA는 발전이 없고 정체되어서 그렇다나. ..
Vite는 프론트엔드 툴로, CRA 보다 Vite를 사용하면 개발 시 속도도 빠르고 메모리도 덜 잡아먹어 좋다고 한다.

(React 뿐만 아니라 다른 자바스크립트 프레임워크 -Vue, Vanilla 등을 통한 프로젝트 역시 생성 가능함)

그럼 기존의 CRA 와, Vite를 사용한 방법 모두 알아보고 리액트 프로젝트를 생성해보자 😺

---

먼저 리액트 프로젝트를 생성하려면
윈도우는 git bash나 power shell에서, 맥은 터미널terminal에서 아래 코드를 입력하면 된다.
(vs code의 터미널이라거나)

기존 git 명령어로 (ls : 현재 디렉토리 위치 확인 / cd 폴더이름 : 리액트 프젝 생성하고픈 폴더로 이동 등)
원하는 폴더로 이동 후

 

기존의 CRA 명령어는,

• yarn create react-app 생성할 프로젝트폴더명 :
  해당 이름으로 프로젝트 폴더가 생성되고, 그 안에 react 프로젝트가 생성된다.

혹은

• npx create-react-app 생성할 프로젝트폴더명
  (+ yarn을 쓰는 경우, 해당 패키지 매니저의 버전이 올라가면서 오류가 발생할 수 있다고 한당 .. )

로 프로젝트를 생성하고, 이후 프로젝트를 실행 (시작) 하려면 yarn start 나 npm start 를 입력하면 된다

(근데 내 경우에도 정말 시작하는데 오래걸렸다 .. ㅠ-ㅠ 인내심 시험.. )

 

Vite로 생성하는 명령어는,

yarn create vite 혹은 npm create-vite 를 쓰면 되고,

이후 선택하는 부분에선,
사용할 프레임워크 (여기선 React) 를 선택해주고,
variant를 선택하라고 뜨는 부분은 TypeScript나 JavaScript를 선택하면 된다.
+SWC 는 성능이 더 좋고 별 큰 차이는 없어서 그냥 이거 선택하는 걸로.. (그래서 JavaScript + SWC 선택)

프로젝트 실행은

yarn dev 혹은 npm run dev 명령어를 치면 된다.

local: 주소가 뜰텐데, 그 주소 링크를 ctrl+클릭 으로 타고 들어가면 열린다.

 

그 외 CRA와 Vite의 차이

CRA로 생성했을 때는 index.html파일이 public폴더 안에 있는데,
Vite로 생성 시 해당 파일이 public안이 아닌 밖에 나와있다.  그 외에는 폴더 구조 등 동일하다. 

또 직접 해보니 확실히 빠른 느낌?! ⚡
그리고 npm 으로 CRA 했을 때와 다르게, 초기 설정이 다크 모드 였담 !!!
이는 Vite의 기본 설정으로, 바꾸고싶다면 index.css 파일에서 바꿔주면 된다. (background-color 바꿔주기)

---

그 외 Vite에 관한 건, 공식 (한글번역) 문서 페이지를 참고해보자 !
https://ko.vitejs.dev/guide/