๐ ๋ชฉ์ฐจ
- ์์ฝ
- ์๋ก
- ๋ ๋ฒจ์ ๋๋ผ์ ์ญ์ฌ
- Vite ๋ฌด๊ธฐ๋ฅผ ์ฐพ์์
- Vite ๋ฌด๊ธฐ ํ๋๋ฌ ๋ณด๊ธฐ. (ํ์ฌ ํ๋ก์ ํธ ์ ์ฉํ๊ธฐ)
- ๊ฒฐ๋ก
๐ ์์ฝ
๊ธฐ์กด | vite ์ ์ฉํ | |
---|---|---|
build time | 34,897ms | 548ms |
re-build time | 3,310ms | 100ms ์ดํ |
๐ ์๋ก
์๋ ํ์ธ์! ๋น ํฝ์ฒ์์ ์ข ์ ๋ฒ๋ฅผ ๋งก๊ณ ์๋ ์ต์ข ์ ์ด๋ผ๊ณ ํฉ๋๋ค. ๐๐ปโ๏ธ
์ ๋ฒ 1ํ์ ์ด์ง ์๊ฐ์ด ๋ง์ด ํ๋ ๋ค์. ๊ทธ๋์ ๋ ๋ฒจ์ ํ๋ก ํธ ํ๋ก์ ํธ์๋ ๋ง์ ๋ณํ๊ฐ ์์๊ณ ๋น๋ ํ์๋ํ ์ต๋ํ ์ค์ด๋ ค๋ ๋ ธ๋ ฅ๋ค์ด ์์์ต๋๋ค. (์กฐ๊ธ์ ์ฝ๋ ์์ ํ ๋งค๋ฒ ๊ธฐ๋ค๋ฆฌ๋ ์๊ฐ์ด ์๊น๊ณ ๊ธ๋ถ์ด ์ง์ค์ ๊ฐ์ง ์ข ์ ๋ฒ๋ ์ฝ๊ฒ ์ง์ค๋ ๊นจ์ง๊ธฐ ๋๋ฌธ์ ๋๋ค.)
๊ทธ๋ผ ์ด์ ์ด๋ป๊ฒ 3,4897ms์์ 548ms๊น์ง ์ค์ผ ์ ์์๋์ง์ ๋ํด์ ์์๋ณด๊ฒ ์ต๋๋ค. ๊ทธ๋ผ ์ถ๋ฐ! ๐
๐ ๋ ๋ฒจ์ ๋๋ผ์ ์ญ์ฌ
132,882ms -> 106,634ms -> 34,897ms -> ???ms
1ํ์ ์์ฑํ ๋น์๋ง ํด๋ ๋ ๋ฒจ์
ํ๋ก์ ํธ์ build ํ์์ ๊น์ง build ํ์์ด ์ฆ๊ฐ ํ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ต์ ํ๋ฅผ ํตํด 39,913ms
๊น์ง ๊ฐ์ ํ์์ผ๋ ์ดํ ์ถ๊ฐ ๋๋ ์ฝ๋๋ค๊ณผ ์์กด์ฑ๋ค์ ์ํด ๋ค์ 106,634ms
๊น์ง ์ฌ๋ผ๊ฐ๊ฒ ๋์์ต๋๋ค. ๊ทธ ์ดํ ๊ทธ๋์ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ์ ํ๋ฉด์ ์์ฌ์์๋ ๊ธฐ์ ๋ถ์ฑ๋ค๊ณผ build ํ์์ ํด๊ฒฐํ๊ธฐ ์ํด ๋๋์ ์ธ ํ๋ก ํธ์๋ ๋ฆฌ๋ด์ผ์ด ์์์ด ๋์๊ณ ๊ทธ ๊ฒฐ๊ณผ 34,897ms
๊น์ง ์ค์์ต๋๋ค. re-build๋ 3,310ms
๊น์ง ๋๋ฌ ํ์ผ๋ ๊ฐ๋ฐ์ ๋๋ ๋น์ฉ์ ์ต๋ํ ์ค์ด๊ณ ์ถ์์ต๋๋ค.
๐ Vite ๋ฌด๊ธฐ๋ฅผ ์ฐพ์์
๋จผ์ ๋ค์ด๊ฐ๊ธฐ ์ ์ vite๊ฐ ์์ํ์ค๊ฑฐ ๊ฐ์ ๊ฐ๋ตํ๊ฒ vite์ ๋ํด ์ค๋ช ํด๋ณด๊ฒ ์ต๋๋ค.
vite๋ ๋ฐ์ดํธ ๋ผ๊ณ ์ฝ์ง ์๊ณ ๋นํธ๋ผ๊ณ ์ฝ์ด์ผ ํ๋ต๋๋ค. (๋น ๋ฅด๋ค๋ ๋ป์ ๋ถ์ด๋ผ์ ์ด๋ ๊ฒ ์ฝ์ด์ผํฉ๋๋ค.)
๊ทธ๋ฆฌ๊ณ vite๋ ๊ธฐ์กด webpack, rollup, parcel ๊ณผ ๊ฐ์ bundler ๋ผ๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค.
๋ค๋ฅธ ํด๊ณผ๋ ๋ค๋ฅด๊ฒ ํจ์ฌ ๋ ๋น ๋ฅด๊ฒ server๋ฅผ ์์ํ๊ณ hot-module-replacement๊ฐ ๋น ๋ฆ
๋๋ค. ์๊ทธ๋ด๊น์?
Vite๊ฐ ์ฌํ ๋ค๋ฅธ ํด๋ณด๋ค ๋น ๋ฅธ ์ด์ :
vite๊ฐ ๋น ๋ฅธ ๊ฐ์ฅ ํฐ ์ด์ ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ES modules๋ฅผ ์ง์ํจ์ ๋ฐ๋ผ์ ์ผ๋ฐ์ ์ธ ๋ฒ๋ค๋ง ๊ณผ์ ์ ์๋ตํ๊ฒ ๋์ด ๊ทธ๋ ์ต๋๋ค.
๊ธฐ์กด:
Es module์ ํ์ฉํ ๋ฐฉ๋ฒ:
๊ทธ๋ฆผ์ ๋ณด์๋ฉด ๊ธฐ์กด์๋ ๋ชจ๋ ํ์ผ์ ๋ฒ๋ค๋ง์ ํ ํ์๋ ์๋ฒ๊ฐ ์์์ด ๋ฉ๋๋ค. ํ์ง๋ง ๋ณ๊ฒฝ๋ ๋ฐฉ๋ฒ์ ์๋ฒ๋ง ์์ํ ๋ค์๋ ํ์ผ์ด ๋จ์ด์ง๋๋ค. module์ ์ด์ฉํ์ฌ ๊ฐ๊ฐ์ ํ์ผ์ ๊ทธ๋๋ก ๋ชจ๋ ํํ๋ก ๋ธ๋ผ์ฐ์ ์์ ์ธ์ํ๊ฒ ํฉ๋๋ค. ๊ทธ๋์ ํจ์ฌ ๋น ๋ฅธ dev-server๊ฐ ๊ฐ๋ฅํ๊ฒ ๋ฉ๋๋ค.
๐ Vite ๋ฌด๊ธฐ ํ๋๋ฌ ๋ณด๊ธฐ. (ํ์ฌ ํ๋ก์ ํธ ์ ์ฉํ๊ธฐ)
ํ์ฌ ํ๋ก์ ํธ์ ์ ์ฉํ๊ธฐ์ ์์ ํ์ฌ ํ๋ก์ ํธ์ ๋ํด ์ค๋ช ์ ํ์๋ฉด ์ผ๋ฐ์ ์ธ vue framework ๋ mono-repo์๋ ์กฐ๊ธ ๋ค๋ฅด๊ฒ ํ๊ฒฝ์ด ์ค์ ์ด ๋์ด์์ต๋๋ค.
ํ์ฌ ํ๋ก์ ํธ ๊ตฌ์ฑ
- vue๋ฅผ ์ฌ์ฉํ๊ธด ํ์ง๋ง vue๋ฅผ ํตํ์ฌ ssr์ด ๊ฐ๋ฅํ๊ฒ ๋๋ ํํ๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
- mono-repo์ ํ์์ ๊ฐ์ง๊ณ ์์ง๋ง ์ค์ ๋ก๋ ๋ถ๋ฆฌ ๋์ด์๋ shared ํด๋๋ฅผ ๋ณต์ฌํด์ ๊ฐ์ ธ์จ ๋ค ํน์ alias๋ก ํ๋ก์ ํธ๊ฐ ์คํ๋๊ฒ ๋ฉ๋๋ค.
Vite์์ ssr ์ง์์ ํ์ฌ Experimetal
๋จ๊ณ์ด๊ธฐ ๋๋ฌธ์ ์์ง ์ ์ฉ์ ํ ์ ๊ฐ ์์์ต๋๋ค. ๋ฐ๋ผ์ ๋ค์๊ณผ ๊ฐ์ด ๊ฐ๋ฐํ๊ฒฝ์ ๊ตฌ์ถํฉ๋๋ค.
- ๊ฐ๋ฐ ํ๊ฒฝ์์๋ง(dev-server) Vite ์ ์ฉํ๊ธฐ.
- Production build์์๋ ๊ทธ๋๋ก webpack์ ์ฌ์ฉํ๊ธฐ.
- Vite์ Webpack์ ๊ณต์กดํ์ฌ ์ฌ์ฉํ๋ ์๋ก ์ถฉ๋์ด ๋์ง ์๊ฒ ํ๊ธฐ.
์ด์ ๋ฐ๋ผ ์ด๋ ค์ ๋ ์ ๋ค์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- Webpack๊ณผ Vite ์๋ก ์ถฉ๋๋๋ ๋ถ๋ถ ์๊ฒ ํ๊ธฐ
- .env.local ํ์ผ๊ด๋ฆฌ
- router dynamic import
- .vue ์ต์คํ ์ ์ฒ๋ฆฌ
- import.meta ์ฒ๋ฆฌ
- HMR ์ฒ๋ฆฌ
1. Webpack๊ณผ Vite ์๋ก ์ถฉ๋๋๋ ๋ถ๋ถ ์๊ฒ ํ๊ธฐ
๋จผ์ Webpack์์ ๊ธฐ๋ณธ์ ์ผ๋ก define์ด ๋์ด์๋ ๋ถ๋ถ์ Vite์ ์๊ธฐ์ ํด๋น ๋ถ๋ถ์ ์ฒ๋ฆฌ ํด์ฃผ์์ต๋๋ค.
// vite.config.js
export default defineConfig(({ mode, command }) => {
return {
define: {
// ๋ก์ปฌ์์๋ง vite๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ssr์ ํ ํ์๊ฐ ์์์ ๋ฐ๋ผ ํด๋น ๋ณ์๋ฅผ false๋ก ํด์ค
'TARGET_NODE': false,
// webpack์ hot-reloaded๋ฅผ ์ฌ์ฉํ๊ณ ์๊ธฐ๋๋ฌธ์ ํด๋น ๋ณ์๋ฅผ ๋น object๋ก ์ค์
'module': {}
},
};
});
๋ํ ์์์ ์ธ๊ธํ๋ ํน์ดํ ํํ์ monorepo๋ฅผ ์ฌ์ฉํ๊ณ ์๊ธฐ์ Webpack์์๋ CopyWebpackPlugin์ ์ฌ์ฉํ์ฌ shared
๋ฅผ ๋ณต์ฌํ์ฌ ๊ฐ์ ธ์ค๊ณ ์์์ต๋๋ค.
// vue.config.js
module.exports = {
configureWebpack:
{
// shared๋ฅผ ๋ณต์ฌํ์ฌ ๊ฐ์ ธ์ค๊ณ ์์
plugins: [new CopyWebpackPlugin([{ from: path.resolve(__dirname, '../../shared/public/'), to: 'shared/' }])]
}
}
};
์ด์ ๋ฐ๋ผ vite๋ ๋๊ฐ์ ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์์ต๋๋ค. (rollup-plugin-copy ์ฌ์ฉ)
// vite.config.js
import copy from "rollup-plugin-copy";
export default defineConfig(({ mode, command }) => {
return {
plugins: [
{
...copy({
targets: [
{
src: join(process.cwd(), "../../shared/public/img"),
dest: "shared/",
},
],
copyOnce: true, // ์คํํ๊ณ ํ๋ฒ๋ง copy ํ๊ฒ ๋ง๋ค์ด์ค
hook: "config", // hook์ผ๋ก config์ ์คํ ์์ ์ผ๋ก ์ผ์น ์์ผ์ค
}),
enforce: 'pre', // build ๋จ๊ณ์ผ๋ pre๋ก ์ฌ์ฉํ๋๋ก ๋ณ๊ฒฝ
apply: 'serve', // serve ๋ช
๋ น์ด ์ผ๋๋ง ์คํํ๋๋ก ๊ฐ์
},
],
};
});
2. .env.local ํ์ผ๊ด๋ฆฌ
vite์ default mode๋ development ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ local์ ๋งํ์ ธ ์์ต๋๋ค.(+ ์๋์ ์ผ๋ก .env.local ํ์ผ์ด ์ถ๊ฐ ๋ฉ๋๋ค.) ๋ ๋ฒจ์ ํ๋ก์ ํธ๋ฅผ ๋ก์ปฌ์์ ๊ฐ๋ฐํ ๋๋ .env.local์ ์ฌ์ฉํด์ผํ์ง๋ง --mode local๋ก ํด์ฃผ์ด์ผ ํฉ๋๋ค.(.env.development๋ ๋ฐ๋ก ์กด์ฌํจ) ์ด๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์๊ฐํ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- vite ์ ์ฉ .env.local ๊ฐ์ ํ์ผ์ ๋ง๋ฌ(ex> .env.viteLocal, --mode=viteLocal)
- mode๋ฅผ ์ด์ํ๊ฒ ์ฃผ์ด์ .env.local ํ์ผ๋ง ์๋ ์ํฌํธ๋ฅผ ํ๊ฒ ํจ
1๋ฒ ๋ฐฉ๋ฒ์ ์ด๋ฏธ .env ํ์ผ์ด 5๊ฐ(.env, .env.local, .env.development, .env.stage, .env.production)๋ ์๋ ์ํฉ ์ด์๊ณ .env.local์ ๋ณ๊ฒฝํ๋ค๋ฉด .env.viteLocal๋ ๋ณ๊ฒฝ์ ํด์ฃผ์ด์ผํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์์ด์ 2๋ฒ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐ์ ํ์์ต๋๋ค.
๋ฐ๋ผ์ ์ต์ข
์ ์ผ๋ก ์ด๋ฐ ๋ช
๋ น์ด๊ฐ ํ์ํ๊ฒ ๋ฉ๋๋ค.
vite --mode eddie_is_the_best
3. router dynamic import
๋ณดํต router์ dynamic import๋ฅผ ํ ๋ ์ด๋ฐ์์ factory ํจ์๋ก ๋ง์ด ์๋๋ค.
const view = path => () => import(/* webpackChunkName: "arena" */ `@/views/pages/arena/${path}`);
ํ์ง๋ง ์ด๊ฒฝ์ฐ alias๊ฐ ์ด๋ฏธ ๋ถ์ด ์๊ธฐ ์ ์ด๋ผ @๋ฅผ ์ฝ์์๊ฐ ์์ต๋๋ค. ์ด์ ๋ฐ๋ผ ์ด๋ ๊ฒ ๋ณ๊ฒฝ์ ํด์ฃผ์์ต๋๋ค.
const view = path => () => import(/* webpackChunkName: "arena" */ `../views/pages/arena/${path}.vue`);
4. .vue ์ต์คํ ์ ์ฒ๋ฆฌ
์ด๋ถ๋ถ์ด ๊ฐ์ฅ ๊ฑธ๋ ธ๋๊ฑฐ ๊ฐ์์. vite์์๋ ์ด์ extension์ ์ง์ ์
๋ ฅํ๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝ์ด ๋ฉ๋๋ค. .js์ธ์ ๋ชจ๋ ํ์ผ๋ค์ import ํ ๋ ์ด์ extension์ ๋ถ์ฌ ์ค์ผํฉ๋๋ค. (ex> .vue)
์๋ถ์ฌ ์ฃผ๋ฉด ์ด๋ ๊ฒ ๋ชป์ฐพ๋ ๋ค๋ ์๋ฌ๊ฐ ๋น๋๋ค.
๊ทธ๋์ ์ฒ์์๋ ๊ทธ๋ฅ ์๋์ ์ผ๋ก ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ํํ์์ต๋๋ค. ํ์ง๋ง ์ด๋ด ์ด๋ฐ๊ธ์ ๋ณด๊ฒ ๋ฉ๋๋ค.
๊ทธ๋ ์ต๋๋ค. ์๋์ผ๋ก extension์ ๋ถ์ฌ์ฃผ๋๊ฒ legacy๋ก ๋จ๊ฒ ๋ ๊ฒ์ด๊ณ ๋๊ตฐ๊ฐ๋ ์ด legacy๋ฅผ ํด๊ฒฐํด์ผ ํ๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
๊ทธ๋์ ๊ทธ๋ฅ ๋ถ์ฌ์ค์ผํ๋ค๊ณ ํ๋จ์ด ๋ค์์ต๋๋ค.
๋ค ๊ทธ๋ ์ต๋๋ค. ๋ ธ๊ฐ๋ค๋ฅผ ํ์ต๋๋ค.(์ฝ 2000๊ฐ์ ํ์ผ๋ค ๋ชจ๋ ์ฐพ์๋ค๋๋ฉด์ ๋ถ์ฌ์คฌ์ต๋๋ค. ๐ญ) ์ฒ์์ ์ธํ ๋ฆฌ์ ์ด์ ํ์ผ๋ก ์ ๊ท์์ผ๋ก ํ๋ฒ์ ๋ถ์ฌ๋ณด๋ ค๊ณ ํ์ง๋ง .js ์ธ์ง ๋ค๋ฅธ extension์ธ์ง ํ๋จ์ ํ ์๊ฐ ์์ด ์ง์ ๋ถ์ฌ์คฌ์ต๋๋ค.
5. import.meta ์ฒ๋ฆฌ
vite๋ import.meta์ ๊ดํ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ์ง๋ง webpack์ ๊ฐ๋ฅํ์ง ์์ต๋๋ค. ๋๋ฌธ์ webpack loader๋ฅผ ์ถ๊ฐ ์์ผ์ฃผ์์ต๋๋ค.
import.meta ์ฒ๋ฆฌ๊ฐ production ๋ชจ๋ ์ผ ๋ ๋น๋๊ฐ ์คํจํ์ฌ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ ํ์์ต๋๋ค.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="module" src="/src/vite-hmr.js"></script> // ์ฝ์
!
</body>
</html>
๐ง ํด๋น htmlํ์ผ์ vite ์ ์ฉ์ด๊ธฐ ๋๋ฌธ์ webpack ์ผ๋๋ ์ ๊ทผ์ ํ์ง ์์ต๋๋ค.
vite-hmr.js๋ ์๋์์ ์ค๋ช ํ๊ฒ ์ต๋๋ค.๐
6. HMR ์ฒ๋ฆฌ
ssr์ฒ๋ฆฌ๋ฅผ ์ํด vue์์ asyncData๋ webpack.module.hot์์ ์ ํธ๋ฅผ ๋ฐ์ ์ฒ๋ฆฌ๋ฅผ ํด์์ต๋๋ค.
if (process.env.NODE_ENV === 'development' && module && module['hot']) {
/** @type {{ addStatusHandler: (callback) => void }} */
const hot = module['hot'];
hot.addStatusHandler(status => {
if (status === 'idle') {
Vue.nextTick(async () => {
// ... ์ฌ๊ธฐ์ asyncData ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ๊ณ ์์
}
});
}
});
}
๋์ผํ๊ฒ vite์ hmr๋ ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ์ด์ผ ํ์ต๋๋ค.
ํ์ง๋ง ํด๋น ์ฒ๋ฆฌ๋ vite:beforeUpdate ์ดํ์ฌ์ผ ํ๊ธฐ ๋๋ฌธ์ plugin์ ํ๋ ๋ง๋ค์ด ์ฃผ์์ต๋๋ค.
import { HmrContext } from 'vite';
const customHmrHandler = () => ({
name: 'customHmrHandler',
/**
* @param {HmrContext} obj
*/
handleHotUpdate({ server }) {
setTimeout(() => {
server.ws.send({
type: 'custom',
event: 'deferred-updated',
data: {}
});
}, 250);
},
});
export default customHmrHandler;
์ด์ ์ด๊ฑธ vite.config.js์ ์ฐ๊ฒฐ ์์ผ๋์์ต๋๋ค.
import customHmrHandler from '../../shared/vitePlugins/customHmrHandler';
export default defineConfig(({ mode, command }) => {
return {
plugins: [customHmrHandler()]
}
}
๊ทธ๋ฆฌ๊ณ ์ด์ ์ ํธ๋ง ๋ฐ์ผ๋ฉด ๋ฉ๋๋ค.
// vite-hmr.js
if (import.meta.hot) {
import.meta.hot.on('deferred-updated', () => {
Vue.nextTick(async () => {
// ... ์ฌ๊ธฐ์ asyncData ์ฒ๋ฆฌ
}
});
});
}
์ด๋ถ๋ถ์ ์ถํ์ ๋ค์ ๊ณ ๋ฏผ์ ํด๋ด์ผ ํ ๊ฑฐ ๊ฐ์ต๋๋ค. ์ผ๋จ ๊ณ์ ์ฐพ์๋ณด๊ณ ์ฝ๋๋ ์ด์ฌํ ์ฐพ์๋ดค๋๋ฐ after updated๋ฅผ ๋ฐ์ ์ ์๋ event๊ฐ ์์์ต๋๋ค. ๊ทธ๋์ ์ผ๋จ vite.js์ issue๋ก ํด๋น ๊ธฐ๋ฅ์ ๊ตฌํ์์ฒญ์ ํด๋์ ์ํ์ ๋๋ค. (ํด๋น ISSUE ๋ฐ๋ก๊ฐ๊ธฐ)
๐ ๊ฒฐ๋ก
์ด์ ํจ์ฌ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ์ ํ ์ ์๊ฒ ๋์์ต๋๋ค.
๊ธฐ์กด | vite ์ ์ฉํ | |
---|---|---|
build time | 34,897ms | 548ms |
re-build time | 3,310ms | 100ms ์ดํ |
๊ธฐ์กด ์ฝ๋๋ ๋ฆฌ๋ด์ผ์ ํ๋ฒ ํด์ ๋ง์ด ๋น๋ ํ์์ ๋ฎ์ถ ์ํ์์ง๋ง ์ด๊ฒ์ผ๋ก ๋ง์กฑ์ ํ ์ ์์์ต๋๋ค.
์ ๋ ์กฐ๊ธ์ ๊ธฐ๋ค๋ฆผ์ด ์๋ ๊ทธ๋ฐ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ถ๊ตฌํฉ๋๋ค.
์ด ๋ฌธ์ ๋ ์์ฐ์ฑ๊ณผ ์ง์ ์ ์ธ ์ฐ๊ด์ด ์๋ ๋ฌธ์ ๋ผ ๊ผญ ํด๊ฒฐ์ ํ๊ณ ์ถ์๊ณ Vite๋ก ํด๊ฒฐ์ ํด๋ณด์์ต๋๋ค.
๊ทธ๋ผ ๊ธด๊ธ ์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๐๐ปโ๏ธ
๋๊ธ