์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 

Svelte ์ž…๋ฌธ ๊ฐ•์˜ - A๋ถ€ํ„ฐ Z๊นŒ์ง€

React์™€ Vue, Angular ํ”„๋ก ํŠธ์—”๋“œ 3๋Œ€์žฅ์˜ ์ž๋ฆฌ๋ฅผ ์œ„ํ˜‘ํ•˜๋Š” Svelte ์ž…๋ฌธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. Svelte ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ† ๋Œ€๋กœ Svelte ๋ฌธ๋ฒ•์„ A๋ถ€ํ„ฐ Z๊นŒ์ง€ ๋ชจ๋‘ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ

  • ์›น ๊ฐœ๋ฐœ

  • Svelte ์‚ฌ์šฉ๋ฐฉ๋ฒ•

์ฒ˜์Œ ๋งŒ๋‚˜๋Š” ์Šค๋ฒจํŠธ, A๋ถ€ํ„ฐ Z๊นŒ์ง€ ์ƒˆ๋กญ๊ฒŒ ์‹œ์ž‘ํ•ด๋ณด์„ธ์š”! 

๊ฐ•์˜ ์†Œ๊ฐœ ๐Ÿ“

 

๋ฆฌ์•กํŠธ, ๋ทฐ, ์•ต๊ทค๋Ÿฌโ€ฆ
ํ”„๋ก ํŠธ์—”๋“œ 3๋Œ€์žฅ ์ž๋ฆฌ๋ฅผ ์œ„ํ˜‘ํ•˜๊ณ  ์žˆ๋Š”!!

Svelte(์Šค๋ฒจํŠธ)์˜ ์ž…๋ฌธ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

 

Svelte ๊ณต์‹ ๋ฌธ์„œ์™€ Beomy ๋ธ”๋กœ๊ทธ๋ฅผ ํ† ๋Œ€๋กœ Svelte ์‚ฌ์šฉ๋ฒ•์„ A๋ถ€ํ„ฐ Z๊นŒ์ง€ ๋ชจ๋‘ ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค. Svelte๋ฅผ ์ตํžˆ๊ธฐ ์œ„ํ•ด ์ด ๊ฐ•์˜ ์ € ๊ฐ•์˜, ์ด ๋ธ”๋กœ๊ทธ ์ € ๋ธ”๋กœ๊ทธ ์‚ดํŽด๋ณผ ํ•„์š” ์—†์ด Svelte ์ž…๋ฌธ ๊ฐ•์˜๋ฅผ ๋“ค์œผ์‹œ๋ฉด ํ•œ๋ฒˆ์— ํ•ด๊ฒฐํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ์‹  ํ›„์—๋Š” Svelte๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›นํŽ˜์ด์ง€ ๊ฐœ๋ฐœ์„ ํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค. :)

์™œ Svelte๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•˜๋‚˜์š”? โœ’๏ธ

Svelte๋Š” 2019๋…„์— ๋“ฑ์žฅํ•ด ๋ฌด๋Ÿญ๋ฌด๋Ÿญ ์ž๋ผ๋‚˜๊ณ  ์žˆ๋Š” ์ƒˆ๋กœ์šด ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.

โ–ฒ Svelte ๊ด€์‹ฌ๋„ ๋ณด๊ธฐ

2019๋…„์— ๋“ฑ์žฅํ•œ ํ›„์† ์ฃผ์ž์ด์ง€๋งŒ, ๋งŽ์€ ๋ถ„์ด ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ณ  ๊ณ„์‹  ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ๋ถ„์ด ๊ด€์‹ฌ์„ ๊ฐ€์ง€๋Š” ์ด์œ ๊ฐ€ ๋‹น์—ฐํžˆ ์žˆ๊ฒ ์ฃ ?

Svelte๋Š” ๊ฐ€์ƒ๋”์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„์„œ, React์™€ Vue์™€ ๋‹ค๋ฅธ ํŒจ๋Ÿฌ๋‹ค์ž„์„ ์ œ์‹œํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ๋ถ„์˜ ๊ด€์‹ฌ์„ ๋‘๊ฒŒ ๋งŒ๋“  ํž˜์€ Svelte์˜ ์„ฑ๋Šฅ์ด ์ปค ๋ณด์ž…๋‹ˆ๋‹ค.

โ–ฒ Svelte ์„ฑ๋Šฅ ๋ณด๊ธฐ

Svelte๋Š” ํ”„๋ก ํŠธ์—”๋“œ 3๋Œ€์žฅ๋“ค๋ณด๋‹ค ๋น ๋ฅธ ํผํฌ๋จผ์Šค๋กœ ์ถฉ๋ถ„ํžˆ ๋งค๋ ฅ์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ์‹œ๊ฐ„์ด ์ข€ ๋” ์ง€๋‚˜๋ฉด React๋‚˜ Vue๋งŒํผ ๋งŽ์€ ๊ณณ์— ์ฐพ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋กœ ์ž๋ผ๋‚  ๊ฐ€๋Šฅ์„ฑ์„ ๊ฐ€์ง„ ๋ฃจํ‚ค์ž…๋‹ˆ๋‹ค!

์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค โœ๏ธ

Svelte์˜ ๊ณต์‹ ๋ฌธ์„œ์— ์žˆ๋Š” ๋‚ด์šฉ์„ A๋ถ€ํ„ฐ Z๊นŒ์ง€ ๋ชจ๋‘ ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜ ํ•˜๋‚˜๋ฉด Svelte ์‹œ์ž‘์€ ๊ฑฐ๋œฌํžˆ ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜์—์„œ ์ง„ํ–‰ํ•˜๋Š” 18๊ฐœ์˜ ์„น์…˜์„ 6๊ฐ€์ง€๋กœ ์š”์•ฝํ•˜๋ฉด,

  • ํ™”๋ฉด์„ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•œ ๋ฌธ๋ฒ•
  • HTML ํƒœ๊ทธ์— ๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ ๋ฐฉ๋ฒ•
  • ์ปดํฌ๋„ŒํŠธ ๋ผ์ดํ”„ ์‚ฌ์ดํด
  • Svelte์—์„œ Store ์‚ฌ์šฉํ•˜๊ธฐ
  • Svelte์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‚ฌ์šฉํ•˜๊ธฐ (Motion, Transition, Animation)
  • Svelte ๊ณ ๊ธ‰ ๋ฌธ๋ฒ• (Action, Slot, Context, ๋‚ด์žฅ ์š”์†Œ)

์ด๋ ‡๊ฒŒ ๋‚˜๋‰  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Svelte ๊ณ ๊ธ‰ ๋ฌธ๋ฒ• ๋˜ํ•œ ์•Œ์•„๋‘์‹œ๋ฉด ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ๊ฐ•์˜์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ๋‚ด์šฉ์€ ๋ชจ๋‘ Svelte์˜ ํ•ต์‹ฌ๋งŒ ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜ ํŠน์ง• ๐Ÿ’ก 

์ด๋ก  ๊ฐ•์˜๋งŒ ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. Svelte์˜ ๋ฌธ๋ฒ•๋“ค์„ ์ „๋ถ€ ์ฝ”๋“œ๋กœ ์‹ค์Šตํ•˜๋ฉด์„œ ์•Œ์•„๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ์ง์ ‘ ๋”ฐ๋ผํ•˜๋ฉด์„œ, ์ฝ”๋“œ์™€ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด์„œ ์‰ฝ๊ฒŒ Svelte๋ฅผ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ 

Q. ๋น„์ „๊ณต์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?
A. ๋น„์ „๊ณต์ž๋ถ„๋“ค๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ์–ด๋ ต์ง€ ์•Š์€ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ๋‹ค๋งŒ HTML๊ณผ JavaScript, CSS ๊ธฐ์ดˆ๋ฅผ ์•Œ๊ณ  ์žˆ๋‹ค ๊ฐ€์ •ํ•˜๊ณ  ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์— HTML, JS, CSS์˜ ๊ธฐ๋ณธ ์ง€์‹์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด ๋”์šฑ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q. Svelte๋ฅผ ๋ฐฐ์šฐ๋ฉด ๋ฌด์—‡์ด ์ข‹์€๊ฐ€์š”?
A. Svelte๋Š” ์•„์ง ์‹ ๊ทœ ํ”„๋ ˆ์ž„์›Œํฌ์ด์ง€๋งŒ, ๋งŽ์€ ๋ถ„์ด ๊ด€์‹ฌ์„ ๊ฐ€์ง€๊ณ  ์ง€์ผœ๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. React๋‚˜ Vue์ฒ˜๋Ÿผ ์œ ๋ช…ํ•ด์ง€๋Š” ๊ฒƒ์€ ์‹œ๊ฐ„๋ฌธ์ œ๋ผ๊ณ  ์ €๋Š” ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค. ๋” ์œ ๋ช…ํ•ด์ง€๊ธฐ ์ „์— ๋ฏธ๋ฆฌ ๊ธฐ์ˆ ์„ ์Šต๋“ํ•˜๊ณ  ์„ ์ ํ•ด๋†“๋Š” ๊ฒƒ์€ ์–ด๋–จ๊นŒ์š”?

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?
A. ์ด ๊ฐ•์˜๋Š” Svelte์˜ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ† ๋Œ€๋กœ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ณต์‹ ๋ฌธ์„œ์—์„œ ์ด์•ผ๊ธฐํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ์ด์•ผ๊ธฐํ•˜๋Š” (๊ฒ€์ฆ๋œ?) ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. Svelte ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋๊นŒ์ง€ ํ›‘์–ด๋ณด๋Š” ๊ฐ•์˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋“ค์„ ํ•„์š” ์—†์ด ์ด ๊ฐ•์˜ ํ•˜๋‚˜๋ฉด Svelte ์ž…๋ฌธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ก ์œผ๋กœ๋งŒ ๋๋‚˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ Svelte ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๊ฐ•์˜๋งˆ๋‹ค ์‹ค์Šต์œผ๋กœ ์ง„ํ–‰ํ•˜๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์ž…๋ฌธํ•˜์‹œ๋Š” ๋ถ„๋“ค

  • Svelte๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค

  • ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ํŠธ๋žœ๋“œ์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹  ๋ถ„๋“ค

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • ES6+

์•ˆ๋…•ํ•˜์„ธ์š”
์ดํšจ๋ฒ”(Beomy)์ž…๋‹ˆ๋‹ค.

240

๋ช…

์ˆ˜๊ฐ•์ƒ

12

๊ฐœ

์ˆ˜๊ฐ•ํ‰

21

๊ฐœ

๋‹ต๋ณ€

4.6

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

74๊ฐœ โˆ™ (5์‹œ๊ฐ„ 24๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!