Create React App

Create React App은 React 애플리케이션을 쉽게 만들 수 있도록 도와주는 공식적인 툴이다. 다음과 같이 사용해서 React App 의 초기화를 도와준다.

npx create-react-app [app name]				// 대괄호 안에는 프로젝트 이름을 적어준다

이를 활용하면 개발자들이 React 앱을 시작할 때 초기 설정과 번거로운 작업을 최소화해준다. 이 도구를 사용하면 프로젝트를 위한 초기 구성이 준비되어 있어, 별도의 설정 없이 React 앱을 빠르게 만들고 실행할 수 있다.

CRA는 매우 유명한 리엑트 툴이지만, 이보다 더 빠르고 효율적인 React 초기화 툴이 있다. 그것이 바로 Vite이다.

Vite

공식문서에 따르면, Vite는 프랑스어로 '빠르다'라고 하며, '비트'라고 읽는다.
Vite는 빠른 속도와 효율성을 갖춘 프론트엔드 개발 도구이다. React 외에도, Vanilla App, Vue, Svelte TypeScript 등의 프레임워크와 라이브러리를 사용할 때 개발 환경을 설정하는 데 도움을 준다.

Vite역시 CRA와 마찬가지로 HMR(Hot Module Replacement)을 지원한다. HMR이란 코드를 저장했을 때, 애플리케이션을 재시작하지 않고도 변경사항이 화면에 바로 반영되는 기능을 뜻한다. 하지만 Vite는 CRA의 HMR 속도보다 몇배는 빠르다. 필자도 사용해본 결과, 체감상 3배 정도 빨랐다.

또한 빌드 시에도 속도가 매우 빠르다. 공식문서에서는 이 속도가 CRA보다 100배 빠르다고 나와있다.
이렇게 속도차이가 발생하는 이유들은 다음과 같다.

• ES 모듈 기반 번들링
  Vite는 ES 모듈을 기반으로 개별 파일을 처리한다. 이는 필요한 파일만 필요한 시점에 번들링하므로 초기 실행 속도가 빠르다. 반면 CRA는 기본적으로 CommonJS를 사용하고 있어 더 많은 파일을 번들링하기 때문에 초기 실행 속도에서 차이가 발생할 수 있다.

• 실시간 모듈 번들링
  Vite는 개발 서버를 실행하면서 실시간으로 파일을 번들링한다. 파일을 수정할 때마다 필요한 모듈만 다시 번들링하여 브라우저에 반영되므로 개발 과정에서 더 빠른 반응 속도를 제공한다.

생성된 프로젝트는 아래와 같다.