Vite Document - dev-team-projects/DeliTalk GitHub Wiki

์ž‘์„ฑ์ž : ์ž„์„ฑ์ค€, ์ •ํ˜œ์˜, ์ด์œค์„œ


Vite

ํ”„๋กœ์ ํŠธ ๋นŒ๋“œ ๋„๊ตฌ - Vite

  • Vite๋Š” ์ฐจ์„ธ๋Œ€ ํ”„๋ก ํŠธ์—”๋“œ ๋ฒˆ๋“ค๋Ÿฌ ๋ฐ ๊ฐœ๋ฐœ ์„œ๋ฒ„์ž…๋‹ˆ๋‹ค.

  • ๋น ๋ฅธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ•๊ณผ ๋นŒ๋“œ ์†๋„๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

  • ๊ธฐ์กด ๋ฒˆ๋“ค๋Ÿฌ์ธ Webpack, Parcel ๋“ฑ๊ณผ ๋น„๊ตํ•˜์—ฌ ๋” ๋น ๋ฅด๊ณ  ๊ฐ€๋ณ๊ฒŒ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ค๊ณ„ํ•ฉ๋‹ˆ๋‹ค.

Vite์˜ ํŠน์ง•

  • ๋น ๋ฅธ ์„œ๋ฒ„ ์‹œ์ž‘ ์†๋„
    • esbuild ๊ธฐ๋ฐ˜์˜ ํ”„๋ฆฌ๋ฒˆ๋“ค๋ง์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„๊ฐ€ ์ฆ‰์‹œ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
    • ํŒŒ์ผ์„ ํ•˜๋‚˜๋กœ ํ•ฉ์น˜์ง€ ์•Š๊ณ  ๋ธŒ๋ผ์šฐ์ €์˜ native ES ๋ชจ๋“ˆ(import/export)์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ๋น ๋ฅธ HMR (Hot Module Replacement)
    • ์ฝ”๋“œ ๋ณ€๊ฒฝ ์‹œ ์ „์ฒด๊ฐ€ ์•„๋‹Œ ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๊ฐฑ์‹ ํ•˜์—ฌ ๋น ๋ฅด๊ฒŒ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค.
    • ์›นํŒฉ๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅธ ํ”ผ๋“œ๋ฐฑ ์‚ฌ์ดํด ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ„ํŽธํ•œ ์„ค์ • ๋ฐ ํ…œํ”Œ๋ฆฟ ์ œ๊ณต
    • React, Vue, Svelte ๋“ฑ ๋‹ค์–‘ํ•œ ํ…œํ”Œ๋ฆฟ์„ ๋ช…๋ น์–ด ํ•œ ์ค„๋กœ ์ƒ์„ฑ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
    • ๊ฐ„๋‹จํ•œ ํŒŒ์ผ ์„ค์ •

์„ ํƒ ์ด์œ 

ํŒ€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ํ˜‘์—…๊ณผ ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ์˜ ๋‹ค์–‘ํ•œ ๊ฒฝํ—˜์ด ๋ชฉ์ 

  1. ๋ณต์žกํ•œ ์„ค์ • ์—†์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์„ ํƒ
  2. Vite๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์ •ํ•  ์‹œ ๋น ๋ฅด๊ณ  ๊ฐ€๋ฒผ์›Œ์„œ ์„ ํƒ
  3. CRA์— ๋น„ํ•ด ์„ค์น˜ ์‹œ๊ฐ„ ๋ฐ ์‹คํ–‰ ์‹œ๊ฐ„์ด ๋นจ๋ผ์„œ ์„ ํƒ