CRA(Create React App) vs Vite: 무엇이 더 나을까?

React 프로젝트를 시작할 때 대부분은 **CRA(Create React App)**을 사용해 봤을 것이다.

나 역시도 CRA3번 Vite2번 정도 사용해 봤다.
하지만 이 역시 프로젝트당시팀장이 하자는 대로 했던 것이라 뭐가 뭔지,

어떤 상황에 뭐가 더 좋은지 모른 채 진행했던 것 같다.

또한 최근까지 자동으로 CRA로 초기 세팅을 진행했고,

프로젝트 진행중 맞닥뜨린 오류를 보고,

레퍼런스를 참조하며 Vite에대해 깊게 파고들어 봤다.

그럼 CRA와 Vite는 어떤 차이점이 있고, 어떤 상황에서 더 적합할까?

두 빌드 도구를 상세하게 비교해 보자.

1. CRA(Create React App)란?

CRA는 React 개발을 위한 설정을 자동화해 주는 툴이다.

초보 개발자도 복잡한 설정 없이 React 프로젝트를 쉽게 시작할 수 있도록 도와준다.
(이것에 이끌려 아무것도 모른 채 CRA, CRA, CRA만 되뇌며 설치했다...)

간편한 설정: 개발자가 webpack, Babel 등 복잡한 설정을 신경 쓰지 않아도 된다. npx create-react-app 명령어 한 번이면 바로 프로젝트를 시작할 수 있다.
기본 제공 기능: React, webpack, Babel, ESLint, Jest 등의 기본 설정이 포함되어 있다. 바로 프로젝트를 실행하고 개발할 수 있다.
확장성: eject 명령어를 사용하면 CRA에서 기본 제공하는 설정을 꺼내서 직접 수정할 수 있다.

느린 빌드 시간: CRA는 웹팩을 사용해 전체 프로젝트를 번들링 하기 때문에, 특히 큰 프로젝트에서는 빌드 속도가 느리다.
개발 서버 성능: 프로젝트 크기가 커지면 개발 중에도 반응 속도가 느려지는 문제가 있다. HMR(Hot Module Replacement)도 상대적으로 느리게 동작한다.

확장성의 한계: CRA가 제공하는 설정을 마음대로 수정할 수 없고, eject를 해야만 내부 설정을 수정할 수 있다. eject를 한 후에는 설정이 복잡해지고 관리가 어려워질 수 있다.

사실 CRA의 문제점은
사용하지 않는 설정이나 라이브러리까지 Overloading 되어있는 점이다.
따라서 번들이 무거워져 빌드 시간이 길어질 수 있고,
CRA 사용 시웹팩을 커스텀하기 어려워진다는 단점 때문에
내가 프로젝트를 진행하며 Vite로 마이그레이션 해야겠다는 생각이 들었다.

Vite는 차세대 프런트엔드 빌드 도구로, 빠른 빌드 속도와 개발 환경을 제공하는 것을 목표로 한다. Evan You(Vue.js 창시자)가 만든 Vite는 다양한 프레임워크를 지원하지만, React 프로젝트에도 널리 사용된다.

빠른 개발 서버: Vite는 브라우저에서 ES 모듈을 직접 사용하는 방식으로 개발 서버를 실행한다. 이로 인해 서버를 부팅하고 HMR이 적용되는 속도가 매우 빠르다.
ESBuild 기반: Vite는 ESBuild를 사용해 JavaScript/TypeScript 파일을 번들링 한다. ESBuild는 Go로 작성되어 있어, 기존의 JavaScript 기반 번들러보다 훨씬 빠르다.
온디맨드 번들링: Vite는 전체 프로젝트를 번들링 하지 않고, 필요한 모듈만 즉시 로드하는 방식을 사용한다. 덕분에 첫 빌드 속도와 HMR 성능이 CRA보다 훨씬 빠르다.
구성 가능한 설정: CRA와 달리 Vite는 프로젝트 설정을 자유롭게 구성할 수 있다. 플러그인 시스템도 유연하여 Rollup 플러그인을 사용할 수 있다.

플러그인 의존성: CRA가 많은 설정을 기본으로 제공하는 것과 달리, Vite는 일부 기능을 플러그인을 통해 구현해야 한다. 설정을 직접 관리하는 것이 부담스러울 수 있다.
생태계: Vite는 CRA에 비해 역사가 짧아 일부 툴이나 라이브러리와의 호환성 문제를 겪을 수 있다. 다만, 이 문제는 빠르게 개선되고 있다.

CRA: CRA는 웹팩을 사용하여 전체 코드를 번들링 하므로, 프로젝트 크기가 커질수록 빌드 시간이 느려진다. 특히, 프로덕션 빌드 속도가 느린 편이다.
Vite: Vite는 빌드 속도가 CRA보다 훨씬 빠르다. ESBuild를 기반으로 한 빠른 번들링 덕분에 개발 중에도 즉각적인 반응을 얻을 수 있다. HMR 또한 빠르게 적용된다.

CRA: 개발 서버 성능은 상대적으로 느리다. 특히, 큰 프로젝트에서 HMR이 느리게 동작하고 전체 페이지 리로드가 자주 발생할 수 있다.
Vite: Vite는 HMR 속도가 매우 빠르며, 변경 사항이 있을 때 필요한 모듈만 업데이트해 준다. 개발 경험이 더 쾌적하다.

CRA: CRA는 기본 설정이 고정되어 있어, 세세한 설정을 할 수 없다. 이를 변경하려면 eject 명령어를 사용해야 하는데, 이 과정이 번거롭고 복잡하다.
Vite: Vite는 설정이 매우 유연하며, Rollup 기반의 플러그인을 사용해 원하는 대로 설정을 확장할 수 있다. 커스터마이징이 필요할 때 Vite가 더 적합하다.

CRA: 기본적으로 React 프로젝트에 필요한 모든 설정을 제공한다. TypeScript, Jest(테스트), ESLint(코드 린팅) 등이 포함되어 있어 바로 사용할 수 있다.
Vite: Vite는 최소한의 설정을 제공하며, 필요한 기능은 플러그인으로 추가해야 한다. Vite로 React 프로젝트를 시작할 때 TypeScript와 같은 설정도 손쉽게 추가할 수 있지만, 그 과정에서 세부 설정을 조정해야 할 수도 있다.

빠르고 유연한 개발 환경이 필요하다면 Vite가 훨씬 유리하다. 특히 대규모 프로젝트나 빠른 HMR을 필요로 하는 경우, Vite는 CRA보다 좋은 선택이다.

반면에 간편한 설정을 원하고, 별도의 설정 변경 없이 바로 React 프로젝트를 시작하고 싶다면 CRA가 더 나은 선택일 수 있다. 특히 작은 프로젝트나 개인 프로젝트에서는 CRA가 여전히 좋은 도구다.

~~이미 Vite로 마음이 넘어간 상태라 다소 객관적으로 보일 수 있음~~

이 정도면 CRA와 Vite의 차이점을 충분히 설명할 수 있을 것 같다.

혹시 추가하고 싶은 내용이나 더 강조하고 싶은 부분이 있다면 공유해 주시면 감사합니다.

(다음 포스트는 CRA에서 Vite로 마이그레이션 진행하며

생긴 이슈에 대해 작성할 예정입니다.)