Create React App (CRA)는 Facebook에서 제공하는 React 애플리케이션 개발을 쉽게 시작할 수 있도록 도와주는 공식 도구입니다.
이 도구를 사용하면, 프로젝트를 설정하고 빌드하는 과정을 자동화하여 개발자들이 간단한 명령어를 입력해서 프로젝트를 생성하고 실행할 수 있습니다.
CRA를 사용하면, 개발자가 Webpack, Babel 등의 도구를 설치하고 설정하는 작업을 하지 않아도 됩니다. 이를 통해 개발자들은 보다 빠르게 React 애플리케이션을 시작하고, 개발에 집중할 수 있습니다.
npx create-react-app 생성할 프로젝트 이름
npx create-react-app 생성할 프로젝트 이름 --typescript
Vite(프랑스어로 빠르다는 뜻)는 Vue.js, React, Preact 및 Svelte를 위한 최신 빌드 도구입니다. 기존 번들링 도구들과는 달리, 브라우저에서 ES 모듈로 import하는 방식으로 빌드를 수행하기 때문에 빠른 개발환경을 제공합니다.
Vite는 각각의 컴포넌트에 대해 개별적으로 컴파일하고 번들링하는 것이 아니라, 각 모듈을 독립적으로 처리하여 빠른 개발환경을 제공합니다.
또한, 라이브 리로딩을 지원하여 코드 수정시 즉각적인 브라우저 업데이트를 확인할 수 있습니다.
Vite는 더 나은 성능을 제공하기 위해 다양한 최적화 기술을 사용합니다. 특히, Vite는 빌드 시간을 대폭 줄이는 Rollup과 같은 번들러를 사용하지 않고, 개발 서버에서 모듈 번들링을 진행하므로 초기 로딩 속도가 빨라집니다.
Vite의 성능은 프로젝트의 규모와 복잡도에 따라 다르겠지만, 일반적으로 CRA보다 2배에서 10배 이상 빠르다는 결과를 얻은 경우가 있습니다.