๐Ÿ›ก๏ธ Vite ์ฐ๋จนํ•ด๋ณด๊ธฐ

thumb_hyeokยท2023๋…„ 3์›” 14์ผ
1
post-thumbnail

๐Ÿค” ์™œ Vite์ธ๊ฐ€?

์ตœ๊ทผ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๊ธฐ์—…๋“ค์˜ ๊ณผ์ œ๋ฅผ ํ•˜๋‹ค๊ฐ€ ๋Š๋‚€ ์ ์ด ์žˆ๋‹ค. webpack์ด๋ผ๋Š” ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋Š” ์ดˆ๊ธฐ ์„ค์ •์ด ๋งค์šฐ ๋ฒˆ๊ฑฐ๋กญ๋‹ค๋Š” ์ ์ด๋‹ค. ๋ฌผ๋ก  ํ•œ ๋ฒˆ ์ œ๋Œ€๋กœ ์„ค์ •ํ•ด๋‘๋ฉด ์ดํ›„๋กœ ํฌ๊ฒŒ ๋ณ€๋™์ด ์ƒ๊ธฐ๊ฑฐ๋‚˜ ํ•˜๋Š” ์ผ์€ ๋“œ๋ฌผ์ง€๋งŒ, ์ผ์ฃผ์ผ๋งŒ์— ๋๋‚ด์•ผํ•˜๋Š” ๊ณผ์ œํ…Œ์ŠคํŠธ์˜ ํŠน์„ฑ์ƒ ๋ฒˆ๊ฑฐ๋กœ์šด ์„ค์ •์„ ํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” webpack์€ ํ•์— ๋งž์ง€ ์•Š๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๊ณ  ํ•ด์„œ ๋‚ด ๋งˆ์Œ๋Œ€๋กœ ์ปค์Šคํ…€์ด ํž˜๋“  CRA๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์ง€๋Š” ์•Š์•˜๊ธฐ์—, ์ƒˆ๋กœ์šด ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ฐพ์•˜๋‹ค. ๊ทธ๊ฒŒ ๋ฐ”๋กœ โ€œViteโ€์˜€๋‹ค. Vite๋Š” webpack์— ๋น„ํ•ด ์ดˆ๊ธฐ ์„ค์ •์ด ๋งค์šฐ ๊ฐ„๋‹จํ•˜๋‹ค๊ณ  ํ•œ๋‹ค. webpack๊ณผ ๋น„ํ•  ๋ฐ”๊ฐ€ ์•„๋‹ˆ๋ผ ์˜คํžˆ๋ ค CRA์˜ ๊ฒฝ์Ÿ ์ƒ๋Œ€ ์ •๋„์˜€๋‹ค.

snowpack, esbuild์™€ ๊ฐ™์€ ๋‹ค๋ฅธ ๋ฒˆ๋“ค๋Ÿฌ๋“ค๋„ ๋น„๊ตํ•ด๋ดค์ง€๋งŒ, ์†๋„ ๋ฌธ์ œ์™€ SSR ๋ฌธ์ œ๋ฅผ ๊ฑด๋„ˆ ๋›ฐ๊ณ  ์ดˆ๊ธฐ ์„ค์ •๋งŒ ์ƒ๊ฐํ–ˆ์„ ๋•Œ๋Š” Vite๋ฅผ ์—ฌ๋Ÿฌ ๊ณณ์— ์ฑ„ํƒํ•ด๋ด„์งํ•˜๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค.


๐Ÿš€ ๋” ๋น ๋ฅธ ๋นŒ๋“œ ํƒ€์ž„

Vite์€ ๋‹ค๋ฅธ ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋“ค๊ณผ ๋‹ค๋ฅด๊ฒŒ ์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํฌ๋กค๋งํ•˜๊ณ  ๋นŒ๋“œํ•ด์„œ ์„œ๋น„์Šค๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๋ฐฉ์‹์ด ์•„๋‹ˆ๋‹ค. ๋จผ์ € โ€œ์ข…์†์„ฑโ€๊ณผ โ€œ์ฝ”๋“œโ€ ๋‘ ๊ฐ€์ง€ ๋ฒ”์ฃผ๋กœ ๋‚˜๋ˆ„์–ด ์„œ๋ฒ„ ์‹œ์ž‘ ์‹œ๊ฐ„์„ ๊ฐœ์„ ํ•œ๋‹ค.

์ข…์†์„ฑ์€ ๊ฐœ๋ฐœ ๋„์ค‘ ์ž˜ ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ๊ฒƒ์œผ๋กœ, esbuild๋ฅผ ํ†ตํ•ด ์‚ฌ์ „ ๋ฒˆ๋“ค๋ง์ด ๋œ๋‹ค.

์ฝ”๋“œ๋Š” ์ผ๋ฐ˜ JS๊ฐ€ ์•„๋‹Œ(JSX, CSS ๋“ฑ๋“ฑ) ๊ฒƒ๋“ค์ด ํฌํ•จ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์œผ๋ฉฐ ์ž์ฃผ ํŽธ์ง‘ํ•˜๊ฒŒ ๋œ๋‹ค.

Vite ์€ ์•„๋ž˜ ๋ฐฉ์‹์ธ โ€œNative ESMโ€์„ ํ†ตํ•ด ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ๋‹ค์‹œ๋งํ•ด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ณง ๋ฒˆ๋“ค๋Ÿฌ๋ผ๋Š” ๋ง์ด๋‹ค.

Vite๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์š”์ฒญ์— ๋”ฐ๋ผ ํ•„์š”์— ๋”ฐ๋ผ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋ณ€ํ™˜ํ•˜์—ฌ ์ œ๊ณตํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋œ๋‹ค. ๊ฐ„๋‹จํžˆ ๋งํ•ด ๊ทธ๋ƒฅ ํŒŒ์ผ์ด ๋ณ€๊ฒฝ๋˜๋ฉด ๋ณ€๊ฒฝ๋œ ํŒŒ์ผ์„ ๋ธŒ๋ผ์šฐ์ € ์š”์ฒญ์— ๋”ฐ๋ผ ๋ณด๋‚ด์ฃผ๋Š” ์—ญํ• ๋งŒ ํ•œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.

๊ทธ๋Ÿฌ๋‚˜, NoiseEffector ์ •๋„์˜ ์†Œ๊ทœ๋ชจ์˜ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ์†๋„ ์ฐจ์ด๊ฐ€ ๋ฏธ๋น„ํ•œ ์ˆ˜์ค€ ์•„๋‹๊นŒ ์ƒ๊ฐํ•œ๋‹ค.

์ถ”๊ฐ€์ ์œผ๋กœ๋Š” ESM ๊ธฐ๋ฐ˜์˜ HMR, HTTP cache ๋“ฑ์˜ ์žฅ์ ๋„ ์กด์žฌํ•˜๋‚˜ ์‚ฌ์‹ค ํ”„๋กœ์ ํŠธ๊ฐ€ ์›Œ๋‚™ ์ž‘๋‹ค๋ณด๋‹ˆ webpack๊ณผ HMR์—์„œ ํฐ ์ฐจ์ด๋ฅผ ๋Š๋‚„ ์ •๋„๋Š” ์•ˆ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

์ •์ ํŒŒ์ผ HTTP cache๋Š” ๋‚ด๊ฐ€ ๋”ฐ๋กœ ์„ค์ •์„ ์•ˆํ•ด์ค˜๋„ ๋œ๋‹ค๋Š” ์ ์—์„œ ๊ฝค ์ข‹์•˜๋‹ค.


โš™๏ธ ๊ฐ„๋‹จํ•œ ์ดˆ๊ธฐ ์„ค์ •

์ •๋ง ์ดˆ๊ธฐ ์„ค์ •์ด ์—†๋Š” ์ˆ˜์ค€์ด๋‹ค. webpack์œผ๋กœ ํ•˜๋ฃจ ์ข…์ผ ์ดˆ๊ธฐ ์„ค์ •์„ ํ•˜๊ณ  ์žˆ๋˜ ๊ฑธ ์ƒ๊ฐํ•˜๋ฉด, CRA๋ฅผ ๋Œ€์ฒดํ•˜๊ณ  vite๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŽธ์ด ๋‚ซ์ง€ ์•Š๋‚˜ ์‹ถ์„ ์ •๋„๋กœ ํŽธํ•˜๋‹ค.

 $ npm create vite@latest

๋†€๋ž๊ฒŒ๋„ ์œ„ ํ•œ ์ค„๋งŒ ์น˜๋ฉด ์•„๋ž˜์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค!

(ํ™˜๊ฒฝ๋ณ€์ˆ˜๋‚˜ ์ ˆ๋Œ€๊ฒฝ๋กœ ๋“ฑ ๊ธฐ์กด๊ณผ ๋‹ค๋ฅธ ์„ค์ •์„ ๊ฑด๋“œ๋ฆฌ๋ ค๋ฉด ์‚ด์ง ๋ฒˆ๊ฑฐ๋กญ์ง€๋งŒ, ์ถฉ๋ถ„ํžˆ ํ•ด๋ด„์งํ•œ ๋ถ€๋ถ„์ด๋‹ค.)


๐Ÿง ํ›„๊ธฐ

Vite๋Š” ์ด๋Ÿด ๋•Œ ์“ฐ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค!

  • ์ดˆ๊ธฐ ํ™˜๊ฒฝ ์„ค์ •์ด ๋ณต์žกํ•˜์ง€ ์•Š์•˜์œผ๋ฉด ์ข‹๊ฒ ๋‹ค + ์ปค์Šคํ…€์ด ๊ฐ€๋Šฅํ–ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค
  • webpack + esbuild-loader ์กฐํ•ฉ๋ณด๋‹ค ๋นจ๋ž์œผ๋ฉด ์ข‹๊ฒ ๋‹ค

๐Ÿ“–ย ์ฐธ๊ณ  ์ž๋ฃŒ

Vite

์ฐจ์„ธ๋Œ€ ๋นŒ๋“œ ๋„๊ตฌ ๋น„๊ต

Webpack โ†’ Vite: ๋ฒˆ๋“ค๋Ÿฌ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ์ด์•ผ๊ธฐ

(๋ฒˆ์—ญ) 'Create React App ๊ถŒ์žฅ์„ Vite๋กœ ๋Œ€์ฒด' PR ๋Œ€ํ•œ Dan Abramov์˜ ๋‹ต๋ณ€

profile
์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค 4๊ธฐ ์›น ํ”„๋ก ํŠธ์—”๋“œ

0๊ฐœ์˜ ๋Œ“๊ธ€