[React] CRA(Create React App), Vite

CRA란 ?

Create React App(CRA)는 React 애플리케이션을 쉽게 생성하고 설정하는 도구다. CRA를 사용하면 개발 환경을 구성하고 초기 프로젝트를 수동으로 처리하는 번거로움을 줄일 수 있다.

CRA가 없었을때

• Webpack, Babel 및 기타 도구를 직접 구성해야 했다. 물론 이 방법도 장점이 있는데, 프로젝트의 세부 설정을 완벽하게 제어하려는 경우에 유용할 수 있습니다. 하지만 초기 설정 및 프로젝트 구성에 시간이 더 많이 소요될 수 있었다.

CRA 장점

기본구성

• Babel, Webpack, ESLint, Jest등과 같은 도구를 별도로 설정하지 않아도 된다.

개발 서버

• CRA는 개발 서버를 내장하고 있어 로컬에서 프로젝트를 개발할 때 빠르게 미리보기를 확인할 수 있습니다. 또한 파일 변경 사항을 자동으로 감지하고 새로고침하지 않아도 변경 사항이 즉시 반영됩니다.

설정 가능

• CRA 프로젝트는 기본적으로 제공되는 설정을 사용하더라도 필요에 따라 세부적인 설정을 변경하거나 확장할 수 있습니다. eject 명령을 사용하여 CRA 프로젝트를 "배출"하면 웹팩 및 Babel 설정 등을 직접 수정할 수 있습니다.

개발 환경 분리

• CRA는 개발 환경과 프로덕션 환경을 분리하여 최적화된 빌드를 생성합니다. 이로써 빠른 개발과 효율적인 프로덕션 배포를 가능하게 합니다.

VITE

Vite의 주요 특징 및 장점

빠른 개발 서버

• Vite는 개발 서버를 사용하여 빠르게 코드 변경을 감지하고 반영하는데, 이로 인해 개발 시간이 크게 단축된다.

모듈 번들링

Vite는 기본적으로 ESM (ECMAScript Modules)을 사용하여 개발을 진행하며, 필요한 경우 프로덕션 빌드 시에만 모듈 번들링을 수행합니다. 이로 인해 개발 및 빌드 속도가 향상됩니다.

플러그인 시스템

Vite는 플러그인 시스템을 지원하여 다양한 기능을 확장하고 커스터마이징할 수 있다.

React 및 Vue 지원: Vite는 Vue.js와 함께 개발하기 위한 초석을 다졌지만, React와도 함께 사용할 수 있다.

단순한 설정: Vite의 설정은 간단하며 대부분의 경우 별도의 설정 파일 없이도 시작할 수 있다.

Vite의 단점

상대적으로 새로운 도구: Vite는 상대적으로 새로운 프로젝트이므로 CRA보다는 커뮤니티와 생태계가 작을 수 있습니다. 하지만 빠르게 성장하고 있습니다.

설정 커스터마이징 제한: Vite는 기본적으로 설정을 간단하게 유지하기 위해 디자인되었으므로, 일부 더 복잡한 구성을 변경하려면 추가적인 작업이 필요할 수 있습니다.

일부 플러그인 미지원: CRA와 비교했을 때, 일부 React 생태계의 플러그인 및 라이브러리가 Vite에서 지원되지 않을 수 있습니다. 이 경우 호환성 문제를 해결해야 할 수 있습니다.