CRA는 옛말! Vite로 더 빠르게 React 개발 시작하세요!

React 팀이 공식적으로 CRA(Create React App)의 지원 중단을 발표함

CRA의 무거운 번들링, 오래된 의존성 등의 문제점을 Vite가 해결

Vite는 ES Module을 활용하여 빠른 빌드 속도와 간편한 설정 제공

Vite의 핵심: ES Module과 HMR

Vite는 ES Module을 활용하여 브라우저가 직접 모듈을 로드하도록 하여 빌드 시간을 단축한다. Hot Module Replacement(HMR) 기능을 통해 코드 변경 시 즉각적인 피드백을 제공한다. 따라서 개발 생산성을 향상시키고, 번들링 속도를 획기적으로 개선한다.

CRA vs Vite: 무엇이 달라졌나?

CRA는 무거운 번들링 과정과 복잡한 설정으로 개발 시작 시간을 지연시켰다. Vite는 플러그인 시스템을 통해 간편한 설정과 CSS 전처리기 지원을 제공한다. 반면, CRA는 eject 없이는 커스터마이징이 어려웠다. 따라서 Vite는 개발 편의성을 높였다.

Vite로 React 프로젝트 설정하기

Vite를 사용하면 `npm create vite@latest` 명령어를 통해 React 프로젝트를 빠르게 설정할 수 있다. Storybook과 같은 도구도 쉽게 통합 가능하다. 구체적으로, vite.config.ts 파일을 통해 프로젝트 설정을 관리한다. 따라서 CRA보다 간결하고 직관적인 개발 환경을 구축할 수 있다.