CRA(Create React App) vs. Vite + React

CRA(Create React App)

< CRA 공식문서 >

Getting Started | Create React App

 

Create React App은 단일 페이지 React 애플리케이션을 생성하기 위해 공식적으로 지원되는 방법이다.

 

Webpack이나 Babel 같은 도구들을 설정하거나 설치할 필요가 없다.

코드에 집중할 수 있도록 이미 설정되어있고 숨겨져 있다.

 

App 만들기

노드 14 이상의 버전이 필요하다.

새로운 app을 만들기 위해서는, 다음 방법중 하나를 골라서 하면 된다.

 

npx

npx create-react-app my-app

(npx는 npm 5.2버전 이상부터 제공된다.)

 

npm

npm init react-app my-app

npm init <initializer>은 npm 6 이상부터 사용가능하다.

 

yarn

yarn create react-app my-app

yarn create는 yarn 0.25 이상부터 사용가능하다.

 

템플릿 선택하기

프로젝트 생성 명령어에 --template [template-name] 을 붙여서 템플릿으로 프로젝트를 생성할 수 있다.

 

만약 템플릿을 선택하지 않는다면, 기본 템플릿으로 생성하게 된다.

npx create-react-app my-app --template [template-name]

 

TypeScript app 만들기

 

템플릿을 이용해서 새로운 TypeScript app을 만들 수 있다.

제공된 TypeScript 템플릿을 사용하기 위해선, 생성 명령어에 --template typescript 를 붙이면 된다.

npx create-react-app my-app --template typescript

 

스크립트

• npm start or yarn start
• npm test or yarn test
• npm run build or yarn build

---

Vite

< Vite 공식문서 >

Vite

 

Vite는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있다.

•  개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. 가령, Hot Module Replacement (HMR)과 같은 것들이다.
• 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정을 제공한다.

 

Vite는 버전 18+ 또는 20+의 Node.js를 요구한다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있다.

 

첫 Vite 프로젝트 만들어보기

npm create vite@latest [폴더이름] -- --template [템플릿명]

 

다음과 같은 템플릿이 있다.

• vue, vue-ts
• react, react-ts, react-swc, react-sws-ts
• preact, preact-ts
• lit, lit-ts
• svelte, svelte-ts
• solid, solid-ts
• qwik, qwik-ts