CRA와 Vite

 

 

 

 이번에 새 프로젝트를 하면서 Vite(비트; 프랑스어로 빠르다는 뜻)를 처음 사용해 보게 되었다. 좋다는 얘기는 많이 들었는데, 실제로 사용해 보니 정말 마음에 들어서 간단한 사용법 등을 정리해 보려고 한다. 

 

 

 먼저 기존에 사용하던 CRA에 대해 이야기해 보자면, CRA란 Create React  App의 줄임말로 별도의 설정 없이 최신 빌드 설정을 할 수 있는 공식적으로 지원되는 방법이다. 편하게 프로젝트를 시작할 수 있는 좋은 방법이지만, CRA를 이용해 프로젝트를 진행하다 보면 개발 모드를 켜는데 종종 문제가 생기곤 한다. (컴퓨터 사양에 따라 문제가 없을 수도 있지만) 모드가 켜지는데 너무 오랜 시간이 걸리기도 하고, 분명 이전에 종료했는데도 포트가 사용 중이라는 문구가 뜬다거나 아예 켜지지 않는 경우도 있다. 대부분 시간이 조금 지난 후 다시 시도하면 되지만 env 파일을 바꾼다거나 프록시 설정을 한다거나 해서 개발 모드를 자주 다시 실행해야 하는 경우가 생긴다면... 생각만 해도 좀 답답해진다. 

 

 

 이러한 문제가 생기는 이유가 뭘까? 여러 파일로 분리되어 작성된 코드는 번들링(bundling) 과정을 거쳐 하나의 파일로 만들어야 브라우저에서의 실행이 가능해진다. 그리고 CRA에서 기본 제공되는 Webpack이라는 번들러는 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야 실제 페이지를 제공할 수 있다. 때문에 프로젝트가 커질수록 빌드 속도가 느려지는 문제가 발생하는 것이다. 이 부분에 있어 Vite는 사전에 번들링을 하고, 필요한 부분만 번들링 하는 식으로 문제를 해결하며 빠른 빌드 속도를 제공한다.

 

 

- 읽어볼 만한 글 -

https://yozm.wishket.com/magazine/detail/1620/

Vite 이야기(feat. Svelte) | 요즘IT

 

 

- Vite 시작하기 -

https://ko.vitejs.dev/guide/#scaffolding-your-first-vite-project

Vite

 

 

	CRA (Webpack)	Vite
개발 모드 실행 명령어	npm start	npm run dev
개발 모드 기본 포트	http://localhost:3000	http://localhost:5173
환경 변수 쓰는 법 (예)	REACT_APP_BASE_URL process.env.REACT_APP_BASE_URL	VITE_BASE_URL import.meta.env.VITE_BASE_URL