들어가며
Next.js 프레임워크로 React 프로젝트를 매번 구성하던 중, 프레임워크 없이 새롭게 프로젝트 환경을 설정해야 할 상황이 생겼습니다. AI의 도움을 받아 설치를 진행하는 과정에서, 평소 익숙하게 사용하던 Create React App(CRA) 방식이 아닌 Vite 형태로 설치하는 것을 보게 되었습니다. 이를 계기로 Vite에 대해 알아보게 되었고, React 환경을 쉽게 시작할 수 있게 해주는 공식 CLI 도구인 CRA가 더 이상 사용되지 않는다는 소식을 접하면서 Vite로 설정하는 방법을 찾아보게 되었습니다.
CRA 문제점
올해 2025년 2월, React 팀이 공식적으로 CRA를 deprecated 선언했습니다.
더 이상 공식적으로 지원하지 않는다는 뜻이죠.
그렇다면 그동안 CRA 문제점은 어떤것들이 있었을까요?
- 불필요한 패키지들이 포함되어 있어서 프로젝트가 무겁고 개발 시작 시간이 오래걸림
- Webpack4 기준으로 오래된 의존성들이 존재함
- eject 없이는 CRA를 커스터마이징 하기가 어려움
- React19 이후 CRA가 제대로 작동하지 않는 현상 발생
이런 문제점들로 인해 새로운 대안들이 나오기 시작했는데요,
- Nextjs, Remix 등 프레임워크를 사용
- Vite, Parcel 등 다른 빌드 도구 틀 사용
이 중에서 Vite가 CRA의 가장 자연스러운 대안으로 자리잡고 있다고 말합니다.
그렇다면 왜 Vite 일까?
Vite의 핵심 장점들 중 ES Module을 활용한 방법은 기존 번들링 과정을 건너뛰고 브라우저가 직접 모듈을 로드하도록 하여 훨씬 빠른 빌드 환경을 제공하고 있습니다. 이외에도
- Hot Module Replacement (HMR) 기능을 통해 코드 변경 시 브라우저에 보다 빠르게 반영되고 CRA처럼 모든 모듈을 번들링 하지 않고 변경된 모듈만 번들링하고 나머지는 캐시 활용을 하여 효율성을 극대화 시킬 수 있습니다.
- 플러그인 시스템을 통해 복잡한 eject없이 사용자 설정 기능을 쉽게 추가할 수 있습니다.
- Sass, Less, Stylus 등의 CSS 전처리기를 별도 설정 없이 바로 사용할 수 있으며, CSS 모듈과 PostCSS도 기본적으로 지원하여 스타일링 작업의 효율성을 높입니다.
- Rollup 기반의 프로덕션 빌드에서 사용되지 않는 코드를 자동으로 제거하고, 동적 import를 통한 효율적인 코드 분할로 초기 로딩 성능을 크게 향상시킵니다.
Vite 로 React 환경 구성
Vite를 이용해 npm + React + Typescript 환경으로 프로젝트를 설정해보겠습니다.
# npm
npm create vite@latest my-react-app -- --template react-ts
Vite는 현재 node js 20.19+ 이상을 요구합니다.
이전 CRA처럼 복잡하게 선택하는 옵션 없이 명령어 입력후 y를 입력하게 되면 빠르게 완료됩니다!
패키지 설치 후 실행 스크립트를 입력하면
npm install
npm run dev
기본 5173 포트로 실행되게 됩니다. http://localhost:5173/
기존에 보던 CRA 처음 시작 모습과 다르게 생겼죠?
설정들은 next.config.ts 처럼 vite.config.ts 를 통해 설정할 수 있습니다.
같이 많이 사용하는 Storybook까지 설정해보겠습니다.
npm create storybook@latest
Storybook 최신버전을 설치합니다.
@storybook/react-vite 이 자동으로 설치되면서 react, vite 환경을 지원하는 Storybook 버전으로 설치됩니다.
빌드도 마찬가지로 스크립트를 실행하게 되면
npm run build
/dist 폴더 안에 빌드 결과물이 나오게 됩니다.
마치며
Vite로 설정하는것이 CRA보다 시작이 덜 복잡하다고 느꼈고 기존 CRA나 Next.js와 크게 다르진 않아서 처음 사용에 있어 어려움은 없었던 것 같습니다.
앞으로는 React 환경 설정 시 Vite를 잘 활용해보면 어떨까요?
읽어주셔서 감사합니다.