[React] 왜 Create React App 대신에 Vite를 사용할까?

개요

2년전쯤 리액트를 처음 배울때는 CRA 를 통해 React app을 만들어서 공부를 했었는데요 , 요새는 vite를 더 추구하는것같습니다. 그래서 Vite를 사용한지도 약 1년정도 된거같은데, 체감상으로도 확실히 빌드속도 ,세팅속도 그리고 가장 매력적이였던건 개발 중 코드를 수정하고 브라우저에 반영하기까지의 속도가 CRA에 비해 굉장히 빨랐습니다.

 

어떤 점이 Vite가 CRA보다 궁금해서 검색을 하다가 설명이 너무 길지도 않고 Vite의 핵심만 담겨있는 포스트를 발견해서 번역 및 참고 해서 포스트를 하려고합니다.

 

Reference:https://makimo.com/blog/why-we-use-vite-instead-of-create-react-app/

Why we use Vite instead of Create React App — Makimo – Consultancy & Software Development Services

---

CRA가 느린 이유는 무엇인가요? 

CRA는 내부적으로 웹팩(Webpack)을 사용합니다. 웹팩은 애플리케이션 코드 전체를 번들로 묶은 후 서버에서 제공합니다. 큰 코드베이스의 경우 개발 서버를 실행하는 데 더 많은 시간이 걸리며 변경 사항이 반영되는 시간도 오래 걸립니다.

 

대다수의 프로젝트는 대표적인 프론트엔드 애플리케이션 개발 라이브러리인 React의 창시자들이 주도하는 Create React App (CRA)에 의존하고 있습니다.

 

CRA는 React 문서에서 기본 선택지이며, 많은 개발자들에게는 다른 JavaScript 앱 빌드 도구를 확인해보지 않아서 기본 선택으로 남게 되었습니다. 그러나 더 나은 대안들이 있습니다. 

 

Makimo에서는 많은 애플리케이션을 Vite로 전환하고 있습니다. 

아래에서는 이 작업을 진행한 이유를 설명하겠습니다. 또한 Create React App의 한계에 대해서도 논의하겠습니다.

CRA는 JavaScript 프로젝트를 구성하기 위한 매우 간단한 도구이며, 단일 명령으로 작동하는 작업을 생성할 수 있습니다. 그러나 구성 및 번들러 사용에 대한 제약으로 인해 Vite가 더 나은 선택임이 입증되었습니다.

 

 

Vite 대비 Create React App의 장점

Create React App (CRA)은 가장 인기 있는 번들러 중 하나인 Webpack을 구성할 필요 없이 사용할 수 있게 해주는 확장 프로그램입니다. CRA는 Webpack에 새로운 기능을 추가하지 않습니다. 오히려 가능한 선택지의 수를 제한하여 초보 개발자들을 위한 확실한 솔루션으로 만들어 줍니다.

빌드 속도

CRA를 Vite로 변경한 주된 이유는 속도입니다. Vite는 esbuild 번들러를 사용하며, CRA에서 사용되는 Webpack보다 훨씬 빠릅니다. Vite의 속도는 Go 언어로 작성되어 빠른 멀티스레드 언어로 기계 코드로 컴파일되기 때문에 생겨난 것입니다. 이에 반해 Webpack은 JavaScript로 작성되었고 해석되며 단일 스레드로 작동되어 더 느립니다.

 

보다 유연한 설정

많은 사람들은 CRA를 선택한 이유가 구성이 필요하지 않기 때문입니다. CRA의 주요 장점은 단일 명령으로 React 애플리케이션을 실행할 수 있는 능력입니다. 그러나 이는 유연성의 부족이라는 대가를 지닙니다. 큰 프로젝트에서는 분명히 CRA에 새로운 기능을 추가해야 할 필요성을 느낄 것입니다.

 

CRA가 기능을 지원하지 않을 때, 그 한계를 해결하기 위해 다양한 조치들이 필요합니다. 예를 들어 Webpack의 구성 파일을 복원하려면 CRA 자체 대신 CRACO를 설치해야 하며, 이로 인해 CRA 버전 4를 사용하는 것으로 제한됩니다.

 

반면 Vite는 rollup.js를 고려하여 개발된 플러그인 지원을 가지고 있습니다. 이는 빠르게 Rollup 플러그인을 작성할 수 있는 인기 있는 솔루션으로, 누락된 기능을 추가할 수 있도록 도와줍니다. Rollup은 훨씬 더 다양한 플러그인 생태계를 가지고 있어 필요에 맞는 환경을 생성할 수 있습니다.

 

프레임워크 지원

Vite는 React, Vue, Svelte와 같은 다양한 프레임워크를 사용합니다. CRA는 능력을 React에만 한정합니다. 다른 프레임워크에서 애플리케이션을 개발할 때마다 처음부터 새로운 도구를 학습해야 할 필요가 있습니다. Vite는 Vue의 창시자들이 만들었음에도 불구하고 React, Vue 및 SolidJS, Svelte 또는 Lit과 같은 덜 인기 있는 프레임워크를 구성할 수 있게 해줍니다. 모든 프로젝트에서 Vite를 사용함으로써 많은 학습 시간을 절약하고 새로운 개발자들이 쉽게 프로젝트에 참여할 수 있도록 합니다.

 

개발

이전에는 Snowpack라는 솔루션을 사용했으나, 불행히도 해당 프로젝트는 더 이상 유지되지 않아 계속해서 도구를 바꾸는 악순환에 빠지지 않도록 잘 개발된 대안을 찾기 시작했습니다. 그와 반대로 Vite는 상당히 안정적이며 포괄적인 생태계를 가지고 있습니다. npm에서 평균 주당 2.5백만 다운로드를 기록하고 있으며, 업데이트는 평균 한 달에 한 번씩 출시되며 커뮤니티는 계속해서 수정 작업을 진행하고 있습니다.

 

핵심기능

가장 중요한 이득은 응용 프로그램 개발 중의 속도입니다. 브라우저에서 응용 프로그램이 새로 고침되기까지 몇 초를 기다려야만 하는 경우 집중력을 잃고 주의가 흐트러질 수 있습니다. 이는 하루에 수백 번 이상 발생할 수 있습니다. Vite를 사용하면 이러한 문제를 겪지 않게 됩니다.

 

---

실제 사례

더 작은 프로젝트에서 CRA를 Vite로 교체한 결과, 애플리케이션 빌드 시간이 거의 절반으로 줄었습니다. 28.4초에서 16.1초로 개선되었습니다. 이 시간 절약은 Github Actions와 같은 자동화에서 가장 두드러집니다. 로컬 서버도 훨씬 빨리 시작됩니다. CRA는 동일한 프로젝트를 4.5초에 시작하지만, Vite는 390ms에 작업을 수행합니다. 이는 상당한 시간을 절약해줍니다. 개발자가 프로젝트에서 작업하는 경우 차이가 눈에 띄지 않을 수 있지만, 더 큰 규모에서는 이미 절약이 크게 나타납니다.

 

처음 빌드 및 배포에서의 시간 절약은 좋은 점일 수 있지만, 더 좋은 것이 있습니다. 개발 중에는 변경 사항을 빠르게 반영하기 위해 각 변경 후 애플리케이션을 다시 로드하는 핫 리로드 기능을 자주 사용합니다. CRA에서는 저장 후 뷰가 업데이트되기까지 약 5초를 기다려야 했습니다. 그러나 Vite에서는 이것이 거의 즉시 발생하여 개발을 더 즐겁고 효율적으로 만들어주며, 애플리케이션을 빌드하기를 기다리는 동안 기다리는 시간으로 인한 주의산만을 방지합니다. 이는 작업의 품질을 완전히 변화시킵니다.

 

매번 약간의 시간을 절약한다고 해서 별로 중요하지 않아 보일 수 있지만, 여러 분을 걸리는 큰 애플리케이션을 생각해보면 몇 분이 걸릴 수도 있는데, 그럴 때 차이는 분명히 더 눈에 띄게 됩니다.

 

아래 테이블은 CRA 에서 Vite 로 전환한 몇 가지 프로젝트의 예시입니다:

 

---

요약

Create React App는 React로 간단한 첫 번째 앱을 구축하는 데 적합합니다. 그러나 빠르게 제한 사항을 인식하게 되며, 앱을 생성할 때 더 유연한 도구를 선택하는 것이 의미가 있습니다.

만약 리액트 말고도 다양한 프레임워크를 사용할경우 Vite는 더욱 좋은 선택이 될것같습니다.

속도와 구성의 간편함으로 인해 Vite로 전환하는 데 투자한 시간은 빠르게 보답받습니다. 거대한 기능을 가지고 있음에도 불구하고, 이 도구는 사용하기 쉬우며 개발자들을 제한하지 않습니다. 무엇보다도 Vite의 사용은 시간을 절약해주며 어떤 JS 프로젝트에도 유연하게 적용할 수 있습니다.