javascript 는 처음에 간단한 동작만을 구현하는 것이 목적이었기 때문에 크기가 작아 모듈 관련된 표준 문법이 없었다.

하지만 프로젝트가 커지고 코드가 복잡해지면서 모듈 단위로 개발할 필요가 있었고 이 모듈을 관리해 주는 것이 번들러이다.

번들러는 의존성이 있는 모듈 코드를 하나이상의 파일로 만들어 주는 도구로, 브라우저 환경에서 잘 실행될 수 있도록 가공해 주는 역할을 한다.

대표적으로 webpack 이 있으며 Create React App 으로 리액트 프로젝트를 생성하면 webpack 을 이용하여 파일 로더, 빌드 툴, ES6, Eslint 등으로 개발을 할 수 있도록 한다.


vite 는 go언어로 작성된 Esbuild 를 기반으로 만들어진 빌드툴이다.

기존 Create React App 으로 생성해 webpack 을 사용하는 것 보다 속도가 훨씬 빠르다.

vite 는 Native ESM 으로 브라우저가 번들링 작업을 하도록 한다.

브라우저가 요청할 때 해당 코드만 변환해서 제공하는 것이다.

그래서 CRA 가 아닌 vite 로 프로젝트를 생성해보았다.


설치

프로젝트 루트폴더에서 아래 명령어로 설치를 진행한다.

npm create vite@latest

명령어를 입력하면 템플릿(vanilla, vue, react 등)과 typescript 의 사용여부를 선택한다.

설치를 완료하면 public 과 src 폴더 및 설정 파일들이 생성된다.


dev server 실행

npm run dev

더 빠른가?

그렇게까지 거대한 서비스를 만들어보지 않아서 잘 모르겠다 ㅎㅎ


그리고 vite 는 바이트가 아니라고 한다.

프랑스어로 ‘빠르다’를 의미하며 비트라고 발음한다.