[React] Vite를 사용하는 이유와 CRA의 한계점

1. React Vite란?

 

Vite는 빠르고 가벼운 프론트엔드 빌드 도구로, 빠른 개발 환경과 최적화된 번들링을 제공합니다. React 프로젝트에서 Vite를 사용하면, 애플리케이션을 빠르게 실행하고 빌드할 수 있으며, HMR(Hot Module Replacement) 기능을 통해 개발 중에 코드 변경 사항이 즉시 반영됩니다.

 

Vite의 주요 특징:

 

• 빠른 개발 서버: Vite는 모듈을 ESM(ECMAScript Modules) 형식으로 제공하며, 필요한 모듈만 즉시 로드하여 매우 빠른 개발 환경을 제공합니다.

• Hot Module Replacement (HMR): 코드 변경 사항을 즉시 반영하여 브라우저 새로고침 없이도 UI를 업데이트할 수 있습니다.

• 빠른 번들링: Vite는 Esbuild를 사용해 번들링 속도를 크게 향상시켰습니다.

 

2. Vite를 사용하는 이유

 

Vite는 기존의 **Create React App (CRA)**에 비해 더 빠르고 가벼운 개발 환경을 제공하기 때문에 많은 개발자들이 Vite로 전환하고 있습니다. 특히 대규모 프로젝트에서 Vite는 첫 번째 빌드와 재빌드 속도가 크게 향상됩니다.

 

Vite를 사용하는 이유:

 

1. 빠른 초기 빌드: Vite는 개발 서버를 시작할 때 전체 애플리케이션을 번들링하지 않고, 필요한 모듈만 번들링하므로 매우 빠르게 시작할 수 있습니다.

2. 빠른 HMR: 변경된 모듈만 다시 로드하여 페이지를 새로고침하지 않고도 즉시 변경 사항을 반영합니다.

3. 최적화된 빌드 성능: Vite는 Esbuild로 번들링하여 대규모 애플리케이션에서도 빌드 속도가 매우 빠릅니다.

 

3. Create React App (CRA)란?

 

**Create React App (CRA)**는 React 프로젝트를 쉽게 시작할 수 있도록 해주는 CLI 도구입니다. Webpack을 사용하여 번들링하고, 바벨로 최신 자바스크립트를 변환하는 설정을 포함하여, 복잡한 빌드 설정 없이 바로 React 프로젝트를 시작할 수 있게 도와줍니다.

 

(CLI는 Command Line Interface의 약자로, 명령어 기반 인터페이스를 의미합니다. 사용자가 명령어를 입력하는 방식으로 프로그램을 실행하고 제어할 수 있는 인터페이스입니다. GUI(그래픽 사용자 인터페이스)와 달리 텍스트 명령어로 프로그램을 조작합니다.)

 

CRA의 주요 특징:

 

• Webpack 기반: CRA는 내부적으로 Webpack을 사용해 애플리케이션을 번들링하고, 바벨을 통해 최신 자바스크립트 문법을 변환합니다.

• 기본 설정 제공: 초기 설정이 모두 포함되어 있어 복잡한 빌드 설정을 할 필요가 없습니다.

• React 개발 환경 제공: 기본적인 React 개발 환경과 빌드 도구를 포함하고 있어, 별도의 설정 없이 React 앱을 바로 시작할 수 있습니다.

 

4. 왜 Vite로 전환하는가?

 

CRA는 초기 프로젝트 설정과 빌드를 쉽게 할 수 있는 장점이 있지만, 프로젝트가 커지거나 요구 사항이 복잡해지면 속도와 번들링 최적화 측면에서 한계가 있습니다.

 

CRA의 한계:

 

• 느린 빌드 속도: CRA는 초기 빌드와 재빌드 시 Webpack을 사용하므로, 프로젝트가 커질수록 빌드 시간이 길어집니다.

• 느린 HMR: Hot Module Replacement가 느리고, 개발 중 변경 사항을 적용하는 데 시간이 걸릴 수 있습니다.

• 대규모 애플리케이션에서 성능 저하: 대규모 프로젝트에서 Webpack의 빌드 시간이 매우 길어져서 개발 생산성이 떨어질 수 있습니다.

 

Vite의 개선점:

 

• 더 빠른 개발 환경: Vite는 ESM을 사용하여 초기 빌드 시간과 재빌드 속도가 CRA에 비해 훨씬 빠릅니다.

• 최적화된 번들링: Esbuild를 사용해 빠른 번들링 속도를 제공합니다.

• 유연한 설정: Vite는 커스터마이징이 쉽고, 다양한 플러그인 시스템을 제공합니다.

 

결론:

 

• CRA는 초기 React 프로젝트를 시작하기에 편리한 도구지만, 프로젝트가 커지면 빌드 속도가 느려질 수 있습니다.

• Vite는 빠른 개발 서버와 번들링 성능 덕분에, 특히 대규모 프로젝트에서 더욱 효율적입니다.

 

 

공식사이트

https://ko.vitejs.dev/guide/why.html