[React] 리액트 시작하기

Quick Start

일단 리액트 프로젝트 를 시작하는 방법은 여러가지 인데 

 

그 중 CRA(Create-React-App) 와 vite 를 사용하는 방법이 있다. 

CRA 는 bundler로 babel + webpack 을 사용하는 방법으로 꽤 느린 편이기 때문에 최근에는 잘 사용하지 않는 편이다. 

 

vite를 사용하는 방법을 보면

vite는 bundler 중에서 Esbuild 와 Rollup 방식을 합친 방식이다. 

 

Rollup 은 js 로 만들어졌고, Esbuild 는 go 언어로 만들어졌다. 

js는 성능상 한계가 있기 떄문에 go 언어로 만들어진 Esbuild는 훨씬 빠르다. 

 

이 두 번들러의 장점을 합친 것이 vite 이다. 

따라서 최근에는 vite 를 많이 이용한다. 

 

근데 여기서 또 SWC 옵션도 이용할 수 있는데 Esbuild 와 거의 동일하지만 언어로 Rust 를 사용해서 더 더 빠르다고 한다. 

사실 대규모 프로젝트가 아닌 이상 그 차이를 사람이 느끼기에는 쉽지 않기 때문에 뭘 쓰던 상관은 없다. 

 

위에서 설명한 여러가지 방법의 폴더구조를 비교한 것은 다음과 같다. 

vite를 이용한 프로젝트 시작 명령어는 다음과 같다. 

yarn create vite <project name> --template react-ts
yarn create vite <project name>
// --template react-ts 를 써도 되지만 그냥 해도 선택할 수 있기 때문에 꼭 쓸 필요는 없다.
npm init vite@latest <project name>