[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/