Vite 란??
Vite(프랑스어로 “빠르다(Quick)”를 의미하며, 발음은 “veet”와 비슷한
/vit/입니다.)는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.
- 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement 과 같은 것들 말이죠.
- 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.
Vite를 선택한 이유
기존의 다른 빌드 도구보다 빠른 Vite는 사전 번들링 기능으로 Esbuild를 사용하고 Webpack, Parcel과 같은 번들러보다 10~100배 빠른 속도를 제공한다. 또한 Vue3는 기본적으로 Vite 사용을 권장하여 사용하게 되었다.
Vite 알아보기
Vite는 NodeJS 18 이상을 요구한다. 현재 18버전 lts가 나와있기 때문에 이번 프로젝트에서는 NodeJS 18을 사용한다.
vite에서 패키지 사용하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
}
}
});
vite.config.ts의 기본 설정이다. vite를 사용하게되면 src 하위의 파일을 import 하는 경우 컴포넌트 경로가 @로 시작하게 된다.
1
2
3
4
5
6
7
8
9
10
11
12
...
import { RootState } from "@/store/reducers";
...
const HomeMain = () => {
const userInfo = useSelector((state: RootState) => state.userInfo);
const [recommendedHometender, setRecommendedHometender] = useState<HometenderApiData | null>(null);
const [weather, setWeather] = useState<WeatherApiData | null>(null);
const banner = [<HometenderBanner {...recommendedHometender} />];
//console.log(axios.defaults.headers.common["Authorization"]);
useEffect(() => {
...
vite를 사용했던 프로젝트의 일부분이다. @/store/reducers 경로로 상태관리에 필요한 파일을 import하여 사용했다.
환경 변수 사용하기
개발 시 환경변수는 .env 파일에 저장하여 개발을 진행한다. React와 유사하게 Vite에서는 환경변수 파일을 다음과 같이 구성한다.
1
VITE_SOME_KEY=123
VITE_ 를 붙여 환경변수를 선언하게 된다. VITE_ 를 붙이지 않은 변수들은 호출했을 때 undefined가 뜨며 동작하지 않는다.
1
console.log(import.meta.env.VITE_SOME_KEY); // 123
코드에서 환경변수를 호출할 때 import.meta.env.[key] 형태로 호출하게 된다.
For Typescript
1
2
3
4
5
6
7
8
interface ImportMetaEnv {
readonly VITE_APP_TITLE: string;
// 다른 환경 변수들에 대한 타입 정의...
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
env.d.ts 파일에서 위와 같이 정의하게 되면 환경변수에 대한 타입을 지정할 수 있다.