🚀 Vite로 마이그레이션하는 이유

프로그래머스 데브코스를 수료한지 벌써 한 달이 지났다. 이력서는 매일 넣고 있지만, 열람은 했지만 연락이 없거나, 서류탈락하거나, 열람조차 하지않는다..

이력서에 뭔가 강력하게 어필할 만한 경험을 기술할 내용이 뭐가 있을까 생각하다가, 예전에 Frontend 팀원들과 얘기를 나눴던 Vite로 마이그레이션을 해서 수치화하여 이력서에 기술하는게 우리 프로젝트에도 좋고 나에게도 좋은 경험이 될 것 같아서 시작하게 되었다.

Vite로 마이그레이션을 하기전에 CRA와 Vite의 차이점을 자세히 살펴보자

📘 기본 개념 및 철학

• CRA (Create React App): Facebook에서 공식적으로 제공하는 도구로, React 애플리케이션을 설정하는 데 필요한 기본적인 설정을 자동으로 처리해 준다. 복잡한 설정 없이 바로 React를 사용하여 개발을 시작할 수 있게 해준다. Webpack을 기반으로 하며, 설정 파일을 숨기고 기본 설정을 제공한다.

• Vite: Evan You가 만든 도구로, 원래는 Vue.js 애플리케이션을 위한 것이었으나 이제는 React를 포함한 여러 프레임워크를 지원한다. 빠른 빌드와 개발 서버 시작을 목표로 하며, 모듈 번들링보다 ES 모듈을 기반으로 한 빠른 개발 환경을 제공한다. Rollup을 사용하여 프로덕션 빌드를 한다.

⚡ 개발 서버 및 핫 모듈 교체(HMR)

• CRA: Webpack Dev Server를 사용하여 개발 서버를 구동한다. HMR(Hot Module Replacement)을 지원하지만, 큰 프로젝트에서는 HMR이 느려질 수 있다.

• Vite: 네이티브 ES 모듈을 이용하여 브라우저에서 직접 로드하므로, 페이지 리로딩 속도가 매우 빠르다. Vite는 모듈의 변화가 있을 때, 변경된 부분만 빠르게 갱신하는 HMR을 더욱 효율적으로 처리한다.

⏩ 빌드 속도 및 성능

• CRA: 초기 빌드와 재빌드가 느릴 수 있다. Webpack을 기반으로 하는 복잡한 설정과 번들링 과정 때문에 빌드 시간이 오래 걸릴 수 있습니다.

• Vite: ES 모듈을 기반으로 하기 때문에 개발 서버 시작과 재빌드가 매우 빠릅니다. 처음 로드할 때 필요한 모듈만 로드하고, 나중에 필요한 모듈은 그때그때 로드하는 방식이기 때문에 성능이 뛰어납니다.

🛠️ 설정 및 커스터마이징

• CRA: 기본적으로 설정 파일이 숨겨져 있으며, 커스터마이징하려면 eject 명령을 사용해야 한다. eject 명령을 사용하면 프로젝트 설정 파일이 외부로 노출되고, 이후에는 직접 Webpack 설정 등을 관리해야 한다.

• Vite: 설정 파일(vite.config.js/ts)이 기본적으로 제공되며, 프로젝트의 요구사항에 맞게 쉽게 커스터마이징할 수 있다. Rollup 기반 설정이므로, 플러그인 시스템을 활용하여 기능을 확장할 수 있다.

🌐 플러그인 및 생태계

• CRA: CRA 생태계 내에서 제공되는 여러 플러그인을 사용할 수 있으며, 커뮤니티에서도 다양한 플러그인을 제공한다. 그러나 Webpack 기반의 설정이기 때문에 복잡한 설정이 필요할 수 있다.

• Vite: Vite는 Rollup 플러그인 생태계를 그대로 활용할 수 있다. 또한 Vite 고유의 플러그인 시스템도 지원하므로, 다양한 기능을 쉽게 추가할 수 있다.

🏗️ 사용 사례

• CRA: 작은 규모의 프로젝트나 기본적인 설정으로 React 개발을 시작하고자 할 때 유용하다. 공식적인 도구이므로 안정성과 문서화가 잘 되어 있다.

• Vite: 빠른 개발 속도가 요구되는 프로젝트나 모듈화된 코드 구조를 가진 대규모 프로젝트에 적합하다. 또한 최신 브라우저 기능을 적극 활용하고자 할 때 유용하다.

🤔 왜 CRA를 지양하고 Vite를 지향해야 하는가?

🙅🏻‍♂️ CRA를 지양해야 하는 이유

CRA는 여전히 훌륭한 도구이지만, 앞서 언급한 개발 서버 속도와 빌드 속도, 커스터마이징의 어려움 등 몇 가지 한계가 있다. 특히 대규모 프로젝트나 빠른 개발 사이클이 요구되는 환경에서는 이러한 한계가 두드러진다.

🙆🏻‍♂️ Vite를 지향해야 하는 이유

Vite는 빠른 개발 서버 시작과 빌드 속도를 제공한다. 또한, 쉽게 커스터마이징할 수 있는 설정 파일과 강력한 플러그인 시스템을 갖추고 있다. Meta의 발표도 Vite로의 전환을 더욱 뒷받침한다. 최신 기술을 도입함으로써 개발 생산성을 높이고, 향후 유지보수와 확장성을 고려한 선택이 될 것이다.

🌟 정리

특성	CRA (Create React App)	Vite
개발 서버 시작 속도	상대적으로 느림	매우 빠름
빌드 속도	느림 (특히 대규모 프로젝트에서)	매우 빠름
개발 서버 및 HMR	Webpack Dev Server 사용, HMR 지원	네이티브 ES 모듈을 이용한 빠른 HMR
모듈 번들링	Webpack 기반	Rollup 기반
설정 및 커스터마이징	eject 명령어로 설정 파일 노출	설정 파일(vite.config.js 또는 .ts)로 쉬운 커스터마이징
플러그인 생태계	Webpack 기반 플러그인 사용	Rollup 기반 플러그인 사용, Vite 고유 플러그인 시스템
사용 사례	작은 규모 프로젝트 및 기본적인 설정으로 시작하는 경우	빠른 개발 속도 및 대규모 프로젝트의 경우
주요 장점	안정적이고 문서화가 잘 되어 있음	빠른 개발 서버 시작과 빌드 속도, 효율적인 HMR
주요 단점	느린 빌드 시간, 커스터마이징이 어려움	초기 설정이 복잡하지 않음

사실 DangDangWalk는 대규모 프로젝트도 아니고 현재 사용자가 많은 것도 아니라서(😅) 이런 부분에 있어서는 CRA 그대로 가는게 맞긴 하지만, 그래도! 빌드나 번들링 속도차이가 얼마나 나는지 궁금하기도 하고 Frontend 개발자로서 좋은 경험이 될 것 같아서 Vite로 전환하는게 맞다고 결론지었다.