Vite
Vite는 네이티브 Javascript 모듈인 ES Module을 기반으로 한 데브 서버이다.
기존 프론트엔드 개발 생태계는 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있는데도 불구하고, 현재는 CRA를 통한 React 앱을 구축하는 것보다 Vite를 사용해서 React 앱을 구축하는 방향으로 많이 사용한다고 한다.
이제부터 왜 Vite를 사용하는지에 대해서 알아보자.
번들링
Vite에 대해서 이해하기 전에 알아야 할 사전 지식들이 몇 개 있다.
그 중 하나가 번들링이다.
웹 개발에서 번들링은 빌드라고 이해하면 될 것 같다.
번들링은 말 그대로 웹 애플리케이션을 제공하기 위해서 여러 코드와 프로그램들을 묶는 행위 정도이다.
개발자가 번들링된 웹 애플리케이션을 만들고, 사용자는 번들링한 파일을 받아와서 브라우저가 이 번들을 실행하는 것이다.
번들링을 하게 되면 여러 장점들이 있다.
먼저, 번들링을 하게 되면 기존보다 파일 크기가 작아지고, 실행 속도, 로딩 속도 등이 줄어들기 때문에 성능이 좋아진다.
또한, 번들링하지 않은 코드는 원본 수정이 가능하지만, 번들링한 코드를 사용자가 임의로 조작할 수 없다는 점이 있다.
뿐만 아니라, js 상 변수들의 범위는 전역으로 설정되어 있는데, 변수를 중복 선언하는 경우 등이 생긴다면 문제가 생길 여지가 있다.
이때, 번들링 도구인 웹팩은 모듈 번들링이라는 것을 활용해서 이 문제를 해결한다고 한다.
웹팩
웹팩은 위에서 언급한 것처럼 Javascript 애플리케이션을 위한 모듈 번들러이다.
이때, 모듈은 해당 애플리케이션에 필요한 이미지 파일, 코드, 다른 기타 파일도 모두 포함한다고 보면 된다.
애플리케이션 규모가 점점 커지면서, js의 변수 범위 문제와 애플리케이션 실행 시의 네트워크 비용 문제가 발생하게 되었는데, 모듈 번들러는 가장 상단에 있는 파일, 리액트 앱의 경우는 index.js로부터 의존성을 가지는 모듈을 모두 추적해서 의존성 그래프를 생성하는 방식으로 진행한다.
js 변수 범위 문제는 모듈 별로 번들링을 하기 때문에 해결되었고, 네트워크 비용 문제의 경우, 필요한 자원을 일일이 서버에 요청해서 얻어오는 것이 아니라, 같은 타입의 자원을 요청해서 조금이나마 비용을 감소시킬 수 있는 것이다.
이렇게만 들으면 웹팩을 사용하면 아무 문제가 없는 것처럼 들린다.
하지만, Vite는 웹팩의 단점을 보완한 툴이다.
이제부터 Vite가 웹팩의 어떤 점을 보완하고, 왜 Vite를 써야 하는지에 대해서 알아보자.
Vite
Vite는 빠른 Javascript 번들링 툴이다.
Vite는 ESM 기반 번들링과 사전 번들링을 제공한다.
기존 CRA의 경우, 웹팩을 사용하도록 되어 있는데, 웹팩은 개발 서버 실행 시 전체 파일을 처음부터 번들링을 해야 한다는 단점이 있다.
하지만, Vite는 설치와 동시에 수정이 잘 일어나지 않는 의존성 패키지들을 ESBuild를 사용해서 사전 번들링해두고, 수정이 잦은 내부 소스 코드는 브라우저에서 ESM을 이용해서 번들러 역할을 수행하게 하기 때문에 최적화할 수 있게 된다.
이렇게만 들으면 웹팩 기반 프로그램과 Vite 기반 프로그램이 얼마나 차이가 나는지 가늠이 안 갈 수도 있다.
직접 같은 코드를 웹팩 기반과 Vite 기반으로 설정해서 비교해보면 알겠지만, 진짜 확연하게 다르다.
프론트 개발자들은 다 알 것이다.
기존 CRA 프로젝트를 실행시키기 위해서는 한참 기다려야 뜬다는 것을.
하지만, Vite는 다르다.
그냥 실행 명령어 치고 몇 초만 기다리면 바로 화면이 뜬다.
Vite는 최고다.
프로젝트 두 개를 진행하고 있는데 하나는 CRA 기반, 다른 하나는 Vite 기반이다.
CRA 기반으로 하는 프로젝트는 코드 수정 막바지인데, 수정을 마친 후에 Vite로 마이그레이션하려고 한다.
별로 어려운 작업은 아니고 설정 정보만 몇 개 변경해주면 되더라.
기존에 쓰던 설정들을 바꾸고 Vite로 마이그레이션할 만큼 의미 있는 속도 변화를 보여주었다.
만약 React 프로젝트를 진행한다면 꼭 Vite로 진행해보도록 하자.
참고 자료
'프로젝트 개발일지 > 프로젝트 세팅' 카테고리의 다른 글
| yarn berry + vite + react + typescript + react-query + emotion + prettier + eslint + husky + lint-staged + storybook 프로젝트 세팅을 해보자 (0) | 2023.09.17 |
|---|---|
| yarn berry에 대해서 알아보자 (0) | 2023.09.16 |
| 깃허브 이슈 템플릿과 PR 템플릿을 생성해보자 (2) | 2023.09.09 |
