리액트 프로젝트 초기 설정 - CRA vs Vite

번들러란?

https://blog.leehov.in/24

[JavaScript] 번들러(Bundler)란?

 

번들러역사를 살펴보자

일단 비교를 하기전에 번들러의 역사를 살펴보자면
Grunt, Gulp 같은 자동화 도구를 사용하다가
웹팩을 얼굴마담으로 해서 번들 기반들이 나타나기 시작했습니다.
webpack, rollup, parcel가 여기에 속한 친구들이죠

출처: https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html

 

 

반면에 차세대 번들러들이 나타났습니다.
Native ESM기반으로 동작하거나
또는 swc기반으로 동작하는 친구들이죠
(esbuild, Snowpack, Vite, wmr, Turbopack)

 

차세대 번들러

이 친구들의 특징은 구번전의 번들러와 다르게 모든 내용을 번들링하지 않고 

최소한에 필요한 부분만 진행하다보니 속도가 무척 빠릅니다.

 

보일러플레이트가 뭘까요?

보일러플레이트라는건 어떤 라이브러리라 프레임워크를 사용할 때,
사용자가 폴더구조를 포함한 환경세팅을 하지않고 처음부터 개발에 필요한 내용들이 전부 만들어져 있는걸 얘기합니다.

 

 

CRA(Create React App)

리액트의 보일러플레이트가 CRA 인거죠

CRA은 리액트 프로젝트를 시작할 때 필요한 개발 환경을 세팅 해주는 도구입니다.

CRA의 장점으로는 npx create-react-app [app 이름] 명령어 하나로 모든 설치가 완료됩니다.

개발을 처음 시작할 때 리액트 이외의 Webpack, Babel, ESLint 등 다른 복잡한 툴을 전혀 알 필요가 없습니다.

Vite와 비교한 CRA의 단점으로는 모듈 번들러로 webpack을 사용하기 때문에 esbuild보다 느립니다.

정확히는 웹팩으로 만든 리액트 보일러플레이트가 CRA이고
next.js의 보일러플레이트가 CNA인거죠

 

Vite(비트)

npm package 이용한 웹개발시 의존성 있는 패키지 소스코드를 esbuild를 써서  빠르게 pre-bundling 해주고 es6 modules 문법과 HMR을 이용해서 실시간 미리보기 기능도 편리하게 해주고 jsx, css module 번들링도 알아서 잘되는 build tool 입니다. 웹팩처럼 플로그인 사용도 되고 cli을 이용한 프로토타이핑도 쉽고 ESbuild를 기반으로 하는 프론트엔드 빌드 툴입니다.

 

 

다시 본론으로 돌아와서 CRA와 vite를 비교한다는건

웹팩으로 만든 리액트 보일러플레이트와 vite로만든 리액트 보일러플레이트를 비교한다는 얘기이고

개발단계를 dev과 prod로 나눴을 때, vite를 쓰면 dev에서 유의미한 속도차를 느낄 수 있는거죠