요즘 이것저것 새로 배우고 있는데, 그 중에서 가장 먼저 알게 된 vite에 대해 간단하게 정리해보려고 한다.
vite(비트)에 대해 알아보기
vite는 프랑스어로 "빠르다(Quick)"를 의미한다고 한다. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구로 웹팩(webpack)을 사용할 때보다 더 빠르게 개발하고 배포할 수 있다. 또한, vite는 vue나 react 등 다양한 프레임워크와 라이브러리 환경에서도 지원된다.
또한, vite는 dependencies와 source code로 분리하여 빌드한다. 사전 번들링 기능으로 esbuild를 사용하여 source code와 의존성이 있는 dependencies만을 가져온다. 이렇게 사전 번들링된 dependencies는 캐시하여 사용하여 퍼포먼스를 향상시킬 수 있다.
vite(비트) 프로젝트 만들기
사용하는 packageManager에 따라서 아래 명령어를 사용하여 간단하게 프로젝트를 생성할 수 있다.
npm create vite@latest
yarn create vite 그럼 다음과 같은 구조를 가진 프로젝트가 생성된다.
.
├── index.html
├── package.json
├── public
| └── vite.svg
├── src
| ├── counter.ts
| ├── main.ts
| ├── style.css
| ├── typescript.svg
| └── vite-env.d.ts
└── tsconfig.json구조를 보면 신기하게도 index.html이 프로젝트 루트에 존재한고 있다.(기존까지 봐왔던 구조는 public안에 존재했다.) 이러한 구조를 가진 이유는 추가적인 번들링 없이 index.html이 애플리케이션의 진입점으로 인식되게 하기 위함이다.
또한, vite는 프로젝트 루트 외부에서도 dependencies를 가지고 올 수 있게 되어있어 모노레포 구성등 다양한 작업이 가능하다.
++ 모노레포(monorepo)
→ 버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략
프로젝트 실행해보기
기본 커맨드는 아래와 같다. 포트 번호를 지정하지 않고 실행하면 기본 포트로 :5173 이 열린다. 나는 vite --port 3000 으로 개발 서버 포트를 변경해주었다.
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},이 밖에 다양한 CLI 옵션은 공식 문서를 통해서 확인할 수 있다.
더 보기
