Vite란 무엇인가?
공식문서에 따르면 프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
Create React App대신 사용하는 이유
CRA는 JavaScript로 구성된 Webpack을 사용하는데 속도가 느린편입니다. 평소에는 못느낄 수 있지만 처리해야 할 코드의 양이 많아질 수록 느린 속도를 채감할 수 있습니다.
위와 같은 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용하게 됩니다.
지원중인 템플릿
- vanilla
- vue
- react
- preact
- lit
- svelte
한마디로.
- vite를 사용하면, 빌드 시간을 매우 빠르게 할 수 있음.
- Webpack 이라는 안정적이고, 훌륭한 번들링 툴이 있지만 네이티브 등 빠르게 변화하는 웹을 위해 변화는 필요하다.
WebPack
- 10년 동안 개발, 관리되며 Plugin, Loader 등 생태계가 잘 갖춰져 있다
- Code Splitting이나 Tree Shaking 등을 잘 지원한다
- 모듈을 IIFE 방식으로 묶어주어 여러 브라우저를 지원할 수 있다
- 다양한 Boilerplate에서 쓰고 있어 자료가 많다 (CRA 등)
나또한, 지금까지 vanilla를 이용해 프론트를 개발해왔으나, 최근 시작하는 프로젝트들은 거의 React, Vue 이며, Vue 기반 Vite 프로젝트 를 접하게 되면서 Vite 를 알게 되었다.
시작하기
# npm 6.x
npm create vite@latest ${디렉터리 명} --template ${템플릿 명}
# npm 7+
npm create vite@latest ${디렉터리 명} -- --template ${템플릿 명}
# JavaScript react 템플릿 생성
npm create vite@latest vite-test -- --template react
# TypeScript react-ts 템플릿 생성
npm create vite@latest vite-test -- --template react-tsnpm run dev 을 통해 시작하면 된다. 그 외에 여러 세팅들이 존재하지만, 좀더 연습해보면서 정리를 해보려고 한다.
또한! vue를 사용하면서, tailwind 라는 라이브러리를 알게 되었는데 class에서 바로 css 를 사용할 수 있어 빠른 생산성을 보장한다!
예를 들어 보통 css 파일에서 마진을 주고 싶다면
.testCss {
margin-top: 5px;
}이런 식이 였다면 tailwind 를 이용하면
<div class="mt-5">생산성 뭐임?</div>
이렇게 빠른 코딩이 가능하다!
tailwind 의 여러 문법들은 공식 docs 를 통해 확인 할 수 있으며, 지원하는 게 부트스트랩 보다 많다고 한다!
또한 커스텀도 가능 하다니, 빠른 프로젝트에서는 유용하게 사용 될 것 같다.
진킴