[React] CRA대신 Vite로 React 설치 및 실행하기 (TypeScript)

 

 

npx create-react-app [프로젝트 명] --template typescript

 

기존에는 react 설치할 때, CRA(Create React App)을 사용했었다. 

 

CRA란,
리액트로 앱을 만드는 방법 중 하나이다. 

 

위의 명령어를 치면 아래처럼 디렉토리가 완성된다. 

 

webpack, babel, 타입스크립트 설정까지 제공해주지만 사용자가 원하는 방식대로 설정을 바꾸기 어려운 단점이 있다. 그리고 프로젝트 크기가 커질수록 속도가 더 느려진다. 

 

webpack이란,
프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구이다. (자바스크립트 번들러)
프레임워크가 .js,.css,.jpg와 같은 기존 웹문서 파일을 사용하지 않고 .sass 같은 파일로 작성하기도 하는데, 웹브라우저는 .sass 파일을 해석하지 못하므로 중간에 누군가 이 파일을 해석해주어야 한다. 그 역할을 하는 도구가 웹팩이다. 

 

babel이란,
자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

 

💡그래서 CRA 대신 Vite(비트)를 써야하는 이유는?

1. CRA의 지원 중단

2. Vite는 개발 서버를 실행할 때 즉시 페이지를 로드할 수 있다. 이는 파일 변경 시 필요한 모듈만 다시 빌드하기 때문이다. CRA는 전체 앱을 번들링하기 때문에 초기 로드 시간이 상대적으로 길어질 수 있다. 웹팩대신 esbuild를 사용하여 매우 빠르다. 

npm create vite@latest [프로젝트 명] -- --template react-ts

 

 

너무나도 빠르게 끝나버렸다...

 

 

 

초기 구조는 이렇다. 

 

npm install
npm run dev

 

실행 시킬때, npm start가 아니라 run을 사용한다. 

 

 

창이 바로 뜨진 않고, url로 들어가야한다. 포트가 3000이 아니어서 신기했다. 

 

url로 들어가면 이런 화면을 볼 수 있다! 근데 진짜 빠르다.

🧐오류가 안 보이네?

 

CRA였으면 터미널에 계속 오류를 뿜었을텐데, Vite는 굉장히 조용하다. 터미널에 아무것도 안 찍힌다. 

 

 

CRA는 Webpack Dev Server가 내부적으로 터미널에 오류를 출력하도록 구성되어 있어서, 개발 중 오류가 발생하면 즉시 터미널에 표시됩니다. Vite는 주로 브라우저에서 발생하는 오류를 표시하도록 되어 있으며, 터미널에는 기본적으로 오류 로그가 잘 출력되지 않습니다.

 

라고 챗지피티가 말해주엇다.