Svelte

Svelte - ์„ค์น˜ ๋ฐ ์‹คํ–‰ ๋ฐฉ๋ฒ•

eddie0329 2020. 12. 26. 00:01
๋ฐ˜์‘ํ˜•

๋ชฉ๋ก

  • Introduction
  • Set Up
  • Conclusion
  • Reference

๐Ÿ“Œ Introduciton

์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜์€ ์š”์ฆ˜ ํ•œ์ฐฝ ๋œจ๊ณ  ์ž‡๋Š” svelte์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค ์ด๊ฑธ ์ ‘ํ•˜๊ฒŒ ๋œ ๊ณ„๊ธฐ๋Š” ์‹ค์ œ๋กœ svelte์— contribution์„ ํ•ด๋ณด๊ณ  ์‹ถ์–ด์„œ svelte์„ ๊ณต๋ถ€ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•„๋งˆ ๋งˆ์ง€๋ง‰ ์ฑ•ํ„ฐ์—์„œ๋Š” ์‹ค์ œ๋กœ contribute์„ ํ•ด๋ณด๋Š” ๊ทธ๋Ÿฐ ๋‹จ๊ณ„๊ฐ€ ์ด ๋ธ”๋กœ๊ทธ์— ์ ํ˜€์žˆ์œผ๋ฉด ์ข‹๊ฒ ๋„ค์š”. ๊ทธ๋Ÿผ ์ด์ œ ํ•œ๋ฒˆ ์‹œ์ž‘ํ•ด๋ณผ๊ฒŒ์š”.

๐Ÿ“Œ Set Up

Svelte์„ ์‹œ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜๋‚˜๋Š” REPL์ด๋ผ๋Š”๊ฑธ ์ด์šฉํ•˜๋Š” ๊ฑด๋ฐ์š”. ์ด๊ฑธ ์ด์šฉํ•˜๋ฉด codebox์ฒ˜๋Ÿผ ์ธํ„ฐ๋„ท์—์„œ svelte์„ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ์–ด์š”. ๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ digit์„ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.(CRA๋‚˜ vue-cli๊ฐ™์€ ํˆด์ด์˜ˆ์š”.) ์˜ค๋Š˜์€ ๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ•์„ ํ•œ๋ฒˆ ์‚ฌ์šฉํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ผ๋‹จ react์™€ vue์ฒ˜๋Ÿผ ๊ธ€๋กœ๋ฒŒ๋กœ ์„ค์น˜๋ฅผ ํ•ด์ค˜์•ผํ•ด์š”.

npm install -g degit

digit์„ ์„ค์น˜ํ•˜์…จ๋‹ค๋ฉด

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

ํ•ด๋‹น app์€ localhost:5000์— ์žˆ์„๊ฑฐ์˜ˆ์š”. ์ด๋ ‡๊ฒŒ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฒซ svelte app์„ ์‹คํ–‰์„ ์‹œํ‚ฌ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐธ ์‰ฝ์ฃ ? ๊ทธ๋ฆฌ๊ณ  ์•„๋งˆ ํ•œ๋ฒˆ ์‹คํ–‰์„ ํ•ด๋ณธ๋’ค์— ์—„์ฒญ๋‚œ ์ผ์„ ๋งˆ์ฃผํ• ๊ฑฐ์˜ˆ์š”. ๊ทธ๊ฑฐ์Šจ ์–ด๋งˆ์–ด๋งˆํ•œ compile speed์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ฒ˜์Œ ๊นœ์ง ๋†€๋ž์–ด์š”. ์ €์˜ ์ปดํ“จํ„ฐ๋„ ์„ฑ๋Šฅ์ด ์ข‹๊ธดํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ๋น ๋ฅด๊ฒŒ ๋„์›Œ์ง€๋Š” app์€ ์ฒ˜์Œ ๋ณด๊ฑฐ๋“ ์š”.

๐Ÿ“Œ Conclusion

์ด๋ ‡๊ฒŒ ํ•œ๋ฒˆ svelte์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ ๋‹จ๊ณ„๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ svelte app์„ ํ•œ๋ฒˆ ์‹คํ–‰์„ ์‹œ์ผœ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ๋งŒ๋‚˜์š”~ ์•ˆ๋…•!

๐Ÿ“Œ Reference

๋ฐ˜์‘ํ˜•