[React] CRA보단 Vite / Vite + React.ts 프로젝트 생성

Vite VS CRA ( Create React App )

우선 주인공 설명에 앞서서 CRA 부터 알아보겠습니다.

CRA

CRA는 리액트 팀에서 추천하는 공식 보일러 플레이트로 가장 대중적으로 사용되고 있습니다.

기본적으로 Webpack을 사용합니다.

Webpack은 자바스크립트로 개발된 번들 툴로 여러개의 파일( 소스, css, 사진 등 )을 하나로 합쳐서 하나의 번들로 만들어서 전송하는 방식입니다.

JS의 파일을 저장하지 못하고 매번 로딩을 해야한다는 단점은 극복되었지만 가장 큰 문제는 속도였습니다. 수정할 때 마다 모든 파일을 하나로 합치는 빌드 과정을 거쳐야 해서 속도가 상당히 느립니다.

그래서 개발자들은 Low-Level-Language를 활용하여 자바스크립트 툴을 만들어냈는데 그렇게 생겨난게 Esbuild 입니다.

​

Esbuild

Go 언어로 작성된 자바스크립트 빌드 툴로 빠른 속도를 자랑합니다.

하지만 이렇게 빠른 속도에도 불구하고 아쉽게도 Webpack을 대체하진 못했습니다.

Webpack은 단순 빌드 툴을 넘어서 CSS, HTML, asset, Hot Module Replace, DevServer, Loader 등 다양한 기능을 제공하는 종합 툴이었지만 esbuild는 그저 빌드만 제공할 뿐 이였습니다.

그래서 나온 것이 Snowpack 입니다.

​

Snowpack

Snowpack은 ES 모듈을 활용하여 모든 자바 스크립트 코드를 컴파일하지 않아도 브라우저에서 필요로 하는 부분의 코드만 변환하여 제공하는 방식입니다.

빌드를 할 때는 esbuild를 이용하고 브라우저의 표준 방식으로 개발하면서, 완제품을 만들 땐 Webpack을 사용하게 됩니다.

기존의 모든 파일을 하나로 만들어내는 빌드 방식이 아닌, 각각의 모듈을 별도로 빌드하고 수정이 발생할 경우 해당 파일만 다시 빌드하여 업데이트 하는 방식으로 만들어내었습니다. 덕분에 Hot Module Replace 에서 매우 강력한 성능을 보입니다.

다만 Webpack 과의 연동과정에서 많은 버그들이 있었고, Webpack의 loader 호환 문제 등 각종 이슈가 있었습니다.

이런 Snowpack의 단점을 보완하여 Vite가 탄생하게 됩니다.

​

Vite

Vite는 esbuild와 브라우저 모듈을 이용한 개발 모드/서버, 프록시, 툴, 코드 스프리팅, Hot Module Replace 등 Snowpack의 컨셉과 다른 번들 도구들에서 제공하는 기능을 하나로 모은 프론트 엔드 번들 툴을 만들게 됩니다. 다만 번들은 Webpack이 아닌 Rollup 을 사용하게 됩니다.

Webpack과 Rollup은 기능은 서로 비슷하나 ES6 빌드, 호이스팅, Treeshaking, 파일 크기 등에서 유리한 면을 보입니다. 저거까지 설명하기엔 글이 너무 길어지니 여기까지..

​

​

Vite + React.ts 구성

Node.js 설치

https://nodejs.org/ko/

Node.js

 

 

pnpm 설치

npm install -g pnpm

vite react 프로젝트 생성

1) CMD > 프로젝트를 다운로드할 디렉터리로 이동

2) 아래 명령어 입력

pnpm create vite
Project name : 프로젝트 명
Select a framework : react
Select a variant : react-ts