0. CRA & Vite 에 대한 조사

[hoyyChoi]

CRA (create react app)

• 리액트 프로젝트를 시작할 때 필요한 개발 환경을 세팅 해주는 도구
• webpack과 babel 등을 이용하여 파일로더, 빌드 툴, es6 문법 지원, eslint등 기본적인 리액트를 이용한 개발 바로 가능
• react는 UI기능만 제공하기 때문에 직접 구축해야 할 것이 많지만 cra를 이용하면 리액트 웹 애플리케이션을 만들기 위한 환경을 제공
• 하나의 명령어로 리액트 개발환경을 구축 가능

CRA 세팅

1. Desktop - project 폴더 진입
   cd Desktop/project
2. react-app 설치
   npx create-react-app my-project
3. my-project 폴더진입
   cd my-project
4. 로컬 서버 띄우기
   npm start

Vite

• 빠른 ESbuild를 기반으로 하는 프론트엔드 빌드 툴
• webpack을 사용할 때보다 훨씬 더 빠르게 개발하고 배포 가능
• 로컬에서 개발할 때 번들링을 하지 않고 esm 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠름

Vite 세팅

1. npm init vite

• 프로젝트 이름 설정
• 프레임워크 설정(vanilla, vue, react, preact,..)
• typescript 선택여부

2. npm i 후 npm run dev
3. http://localhost:3000 확인 가능

CRA와 Vite의 차이점

• cra는 webpack(자바스크립트 코드로 구성된 툴)기반 -> 인터프리터 언어이기에 속도가 느림.
• vite는 Esbuild(GO로 구성된 툴)기반 -> 저급언어를 활용하여 속도가 굉장히 빠름.