프로젝트를 만들고 있는 도중, React Router v7에 대한 발표 번역 글을 보게 되었습니다.
그 글 중에 한 부분이 관심이 쏠리더군요?
간단하게 요약하면, React Router는 Vite를 선호하며, Vite를 기반으로 개발할 계획이라고 하네요.
Vite가 무엇인지 모르는 저는 CRA(Create React App)과 Vite 둘 중 하나를 고르기 전에, 둘 다 무엇이고, 어떤 차이가 있는지 알아보겠습니다!
1. CRA(Create Reate App)
CRA는 Zero-configuration 설정을 지향한다고 합니다.
즉, 개발자가 설정 파일을 신경 쓰지 않고, 바로 React 프로젝트를 시작할 수 있도록 한다고 하네요!
또한, 웹팩(Webpack)을 사용하여, 애플리케이션 번들링 및 개발 서버를 제공합니다.
웹팩은 강력한 기능을 제공하지만, 대규모 프로젝트 시, 속도가 느려지는 단점이 있어요..
※ 웹팩(Webpack) : 웹 애플리케이션 구축 시, 사용되는 정적 모듈 번들러
하지만, CRA는 설정 파일을 직접 수정하지 못하게 되어 있으며, 설정을 변경하려면 eject 명령을 사용하여, CRA의 내부 설정을 프로젝트로 꺼내와야 합니다.
eject를 사용하려면, CRA의 설정이 복잡해지고 관리가 어려워질 수 있어요.
2. Vite
바이트가 아니라 비트구나...
Vite는 빠른 개발 빌드를 제공하기 위해, 설계되었습니다.
ES 모듈을 기반으로 하여, 필요한 부분만 동적으로 로드하고 번들링 합니다.
※ ES 모듈(ECMAScript Modules) : JavaScript에서 공식적으로 표준화된 모듈 시스템
ESBuild를 사용하기에, 매우 빠른 개발 서버를 제공합니다.
초기 빌드와 HMR(Hot Module Replacement) 속도가 CRA 보다 훨씬 빨라요!
※ HMR(Hot Module Replacement) : 모듈 번들러(Webpack, Vite 등)에서 제공하는 기능으로, 코드 변경 시, 전체 페이지를 새로 고침하지 않고 변경된 모듈만 실시간으로 교체하는 기술
3. CRA vs Vite
요약하면 CRA는 설정 없이 바로 사용할 수 있으며, React의 공식 지원 도구이지만, 대규모 프로젝트에서는 빌드 속도가 느려질 수 있고, 설정을 변경하려면 eject 명령이 필요하는 단점이 있다는 거네요.
Vite는 매우 빠른 개발 서버와 빌드 성능을 제공하며, 설정 파일을 통해 유연하게 설정을 변경할 수 있고, 다양한 모던 프레임워크를 지원하는 동시에 빠르게 성장하는 도구라는 건데...
제가 지금 개발하고 있는 프로젝트는 다양한 기능을 제공해야 하기에, CRA가 안정되어 있는 것 같지만, Vite를 선택하였습니다.
4. 정리하며
지금까지 CRA와 Vite가 무엇이며, 차이가 무엇인지 알아보았습니다.
프로젝트의 요구 사항, 개발 환경 등등 여러 조건을 확인해 보고 둘 중 어느 것을 선택할 것인지 고민해 보는 것이 좋을 것 같습니다!
참고
'Front-End Study > Vite' 카테고리의 다른 글
| vite-plugin-next-router (0) | 2024.06.17 |
|---|