Logo

Vite 처음 시작하기

Vite가 Webpack이나 Parcel과 같은 전통적인 번들러를 위협하는 차세대 번들러(bundler)로 빠르게 부상하고 있습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 빠른 개발 서버와 빌드 최적화를 제공하여 현대적인 프론트엔드 개발에 핵심적인 도구로 자리 잡고 있는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들의 위해서 Vite를 시작하는 방법을 안내해드리겠습니다.

Vite란?

Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험을 향상시키기 위해서 등장한 차세대 번들러입니다. 브라우저에서 지원하는 ESM(ES Modules)를 적극적으로 활용하고, 자바스크립트 대신에 컴파일 언어인 Go로 작성된 현대적인 자바스크립트 개발 도구이죠.

Vite은 예전부터 널리 사용되던 번들러인 Webpack보다 설정이 훨씬 쉽고 간단하며, 설정이 필요 없기로 유명하던 번들러인 Parcel보다도 훨씬 빠릅니다. 이로 인해서 기존 번들러보다 뛰어난 개발자 경험을 제고하여 많은 개발자로부터 사랑을 받고 있는 번들러입니다.

2023년 Sate of JavaScript 설문 결과를 보시면 빌드 도구 부분에서 Vite(73%)가 Parcel(30%)을 아득히 넘고 Webpack(90%)에 이어서 사용률 2위를 기록하고 있습니다. 2021년에 20% 사용률로 처음 그래프에 등장했는데 무서운 성장세가 아닐 수 없습니다.

stateofjs2023-build-tools-usage

더욱 고무적인 부분은 바로 Vite를 써본 응답자들의 만족도입니다. 88%로 압도적인 1위를 차지하고 있으며, Webpack의 만족도는 45%까지 곤두박질 친 것을 볼 수 있습니다.

stateofjs2023-build-tools-positivity

참고로 많은 분들이 영문 철자만 보시고 Vite를 “바이트”라고 발음해야 하는 걸로 오해하시는데요. 사실 Vite라는 이름은 “빠름”을 의미하는 프랑스어에서 유래되었고 그래서 정확한 발음은 “비트”라고 합니다. 한국 개발자들 사이에서는 우스갯 소리로 빛처럼 빠르다고 “빛”이라고도 많이 부르는 것 같습니다. 😄

Vite 프로젝트 생성

Vite는 누구나 손쉽게 프로젝트를 시작할 수 있도록 명령줄 도구(CLI)를 제공하고 있습니다. 이 명령줄 도구는 npm 패키지 저장소에 vite라는 이름으로 등록되어 있습니다.

Node.js를 사용하신다면 터미널에서 npm 명령어를 사용하여 Vite 프로젝트를 시작할 수 있습니다.

$ npm create vite@latest

차세대 자바스크립트 런타임인 Bun을 사용하신다면 bun 명령어를 사용하시면 됩니다.

$ bun create vite

위 명령어를 실행하면 어떤 유형의 프로젝트를 만들건지 다양한 질문이 나올 겁니다. 답변을 선택 하시면 이를 토대로 별다른 추가 설정없이 바로 개발을 시작할 수 있는 프로젝트 하나가 뚝딱 만들어지죠.

본 포스팅에서는 최대한 간단한 실습을 위해서 TypeScript를 사용하는 Vanilla(아무 프레임워크도 안 쓰는) 프로젝트를 만들어 보겠습니다. vite-project 폴더에 만들겠습니다.

✔ Project name: … vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /Users/daleseo/Temp/vite-project...

Done. Now run:

  cd vite-project
  bun install
  bun run dev

다양한 자바스크립트 프로젝트 생성법에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

개발 서버 구동

개발자 입장에서 Vite가 가장 매력적인 이유는 무엇보다 말도 안 되게 빠르고 올라가고 실시간으로 코드 변경을 감시하여 반영해주는 개발 서버입니다.

위에서 프로젝트를 생성하면 나오는데로 프로젝트 폴더에 들어가서 패키지만 설치하면 바로 개발 서버를 구동해볼 수 있습니다.

$ cd vite-project
$ bun install
bun install v1.1.15 (b23ba1fe)

+ typescript@5.5.3
+ vite@5.3.4

12 packages installed [1220.00ms]
$ bun run dev
$ vite

  VITE v5.3.4  ready in 399 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

(Node.js를 쓰신다면 bun install 대신에 npm install, bun run dev 대신에 npm run dev를 실행하시면 됩니다.)

이제 브라우저에서 http://localhost:5173/을 접속해보시면 카운터 버튼이 있는 웹사이트 하나가 열릴 것입니다.

Vite의 개발 서버는 프로젝트 내의 소스 코드를 변경되면 눈 깜짝할 사이에 브라우저에 반영을 해줍니다. 이러한 HMR(Hot Module Replacement) 기능은 Webpack이나 Parcel과 같은 기존 번들러도 지원했지만 Vite는 내부적으로 Go 언어로 작성된 esbuild를 사용하기 때문에 속도 체감이 크게 납니다.

간단한 실습을 위해서 src/counter.ts 파일을 아래와 같이 수정한 후 저장해보세요. Cmd + S 버튼을 누르자 마자 수정분이 웹사이트에 반영이 되는 것을 볼 수 있으실 것입니다. 🏎️

src/counter.ts
export function setupCounter(element: HTMLButtonElement) {
  let counter = 0;
  const setCounter = (count: number) => {
    counter = count;    // element.innerHTML = `count is ${counter}`;    element.innerHTML = `카운트는 ${counter} 입니다.`;
  };
  element.addEventListener("click", () => setCounter(counter + 1));
  setCounter(0);
}

프로덕션 빌드

Vite는 프로덕션(production) 빌드(build) 시에는 Rollup을 사용하여 상용 환경에 최적화된 번들을 생성해줍니다. 때문에 Rollup의 오래 시간 축적된 풍부한 플러그인 생태계를 그대로 누릴 수 있다는 장점이 있습니다.

웹사이트를 빌드하면 우선 타입스크립트로 컴파일(compile)한 후에 프로젝트의 최상위 경로에 dist 폴더가 생기고 그 안에 HTML, CSS, JS 파일이 생기는데요.

Bun을 사용하신다면 터미널에서 bun run build 명령어를 실행하면 됩니다.

$ bun run build
$ tsc && vite build
vite v5.3.4 building for production...
✓ 7 modules transformed.
dist/index.html                 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CbFCNpm3.css  1.20 kB │ gzip: 0.62 kB
dist/assets/index-DnV3Igaa.js   3.06 kB │ gzip: 1.65 kB
✓ built in 50ms

Node.js를 쓰신다면 터미널에서 npm run build 명령어를 실행하면 됩니다.

$ npm run build

> vite-project@0.0.0 build
> tsc && vite build

vite v5.3.4 building for production...
✓ 7 modules transformed.
dist/index.html                 0.46 kB │ gzip: 0.29 kB
dist/assets/index-CbFCNpm3.css  1.20 kB │ gzip: 0.62 kB
dist/assets/index-DnV3Igaa.js   3.06 kB │ gzip: 1.65 kB
✓ built in 76ms

dist 폴더에 생성된 번들 파일들을 그대로 상용 서버에 올리면 웹사이트가 배포가 완료되게 됩니다. 물론 실제 프로젝트에서는 직접 올리지 않고 CI/CD 도구를 통해서 배포를 자동화하겠죠?

프로덕션 프리뷰

Vite를 통해서 개발 서버 기준이 아닌 최종 빌드된 번들 파일들을 기준으로 웹사이트를 돌려볼 수도 있습니다. 배포 하기 전에 상용 환경에서 웹사이트가 어떻게 보일지 로컬 환경에서 확인해보고 싶을 때 유용합니다.

터미널에서 bun run preview 또는 npm run preview 명령어를 실행하면 프로덕션 프리뷰를 할 수 있습니다.

$ bun run preview
$ vite preview
  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

이제 브라우저에서 http://localhost:4173/을 열어보면 상용 환경에서 웹사이트가 어떻게 보일지 확인할 수 있을 것입니다. 🎉

참고로 아까 전에 개발 서버로 웹사이트를 띄울 때는 5173 포트를 사용했었는데요. 프로덕션 프리뷰를 할 때는 포트 충돌이 나지 않도록 4173을 기본 포트로 사용합니다. 참 세심한 배려죠?

마치면서

이상으로 Vite로 간단한 타입스크립트 프로젝트를 어떻게 시작할 수 있는지 알아보았습니다. 또한 Vite의 개발 서버를 사용해보고, 프로젝트 빌드와 웹사이트 프리뷰도 해보았습니다.

본 포스팅이 Vite를 처음 접하시는 분들께서 좀 더 쉽게 Vite를 시작하시는데 도움이 되었으면 좋겠습니다. 후속 포스팅을 통해서 Vite의 여러 가지 기능들을 좀 더 깊게 알아보는 시간을 갖도록 하겠습니다.

Vite 연관된 포스팅은 Vite 태그를 통해서 쉽게 만나보세요!

This work is licensed under CC BY 4.0

messageCircle