Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

Svelte๋กœ ์‹œ์ž‘ํ•˜๋Š” ์›น ํ”„๋ŸฐํŠธ์—”๋“œ

์„ธ๊ณ„์ ์œผ๋กœ ๊ด€์‹ฌ์ด ๋†’์•„์ง€๊ณ  ์žˆ๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ, Svelte(์Šค๋ฒจํŠธ)์˜ ํ•ต์‹ฌ ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ์ •๋ฆฌํ•œ ๊ธฐ์ดˆ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ํ•œ๊ตญ์˜ ์ข€ ๋” ๋งŽ์€ ๋ถ„๋“ค์ด Svelte๋ฅผ ์‰ฝ๊ณ  ํŽธ๋ฆฌํ•˜๊ฒŒ ์ด์šฉํ•˜๊ธฐ๋ฅผ ๋ฐ”๋ผ๋Š” ๋งˆ์Œ์—์„œ ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

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

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

  • Svelte (์Šค๋ฒจํŠธ)

  • ์›น ํ”„๋ŸฐํŠธ์—”๋“œ ๊ธฐ์ดˆ

๋– ์˜ค๋ฅด๋Š” FE ๋Œ€์„ธ ์Šค๋ฒจํŠธ(Svelte) 
๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ! 

Svelte๋ผ๊ณ  ๋“ค์–ด๋ณด์…จ๋‚˜์š”?

Svelte๋Š” ํ˜„์žฌ ์ „์„ธ๊ณ„ ํ”„๋ŸฐํŠธ์—”๋“œ ์‹œ์žฅ์—์„œ ๊ฐ€์žฅ ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. React(๋ฆฌ์•กํŠธ)๋‚˜ Vue(Vue.js)๋ณด๋‹ค ๋‹ค์†Œ ๋Šฆ๊ฒŒ ์„ธ์ƒ์— ๋‚˜์™”์ง€๋งŒ ํ›„๋ฐœ ์ฃผ์ž์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ด๋“ค ์ด์ƒ์˜ ํฐ ๊ธฐ๋Œ€๋ฅผ ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

StactOverflow ๋ฐ Stateofjs ๋“ฑ์„ ๋ณด๋ฉด ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด Svelte์— ๊ด€์‹ฌ์„ ๊ฐ–๊ณ  ์žˆ๋Š”์ง€๋ฅผ ํ•œ๋ˆˆ์— ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

StackOverflow ์—ฐ๋ง ์„œ๋ฒ ์ด
State of JS 2022 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ˆœ์œ„

์ด๋Ÿฐ ๊ฒƒ๋“ค์„ ๋ฐฐ์›Œ์š” โœ’๏ธ

์Šค๋ฒจํŠธ ๋„์„œ ์ €์ž ์ง๊ฐ•!

์ด ๊ฐ•์˜๋Š” โ€˜์Šค๋ฒจํŠธ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์›น ํ”„๋ŸฐํŠธ์—”๋“œโ€™ ๋„์„œ์˜ ์ผ๋ถ€ ์ฑ•ํ„ฐ๋ฅผ ์˜์ƒ์œผ๋กœ ๋งŒ๋“  ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. 
(์„ ์ˆ˜ ์ง€์‹: HTML/CSS ๋ฐ JavaScript ๊ธฐ์ดˆ)

์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๊ฐœ๋ฐœ๋˜๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ์˜ ๊ธฐ๋ณธ์„ Svelte๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์ธ ํ†ต์‹  ๋ฐฉ๋ฒ•, ์ด๋ฒคํŠธ ์กฐ์ž‘, ํ™”๋ฉด ํšจ๊ณผ ๋“ฑ์„ ํ†ตํ•ด์„œ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ๊ฒฐ๊ณผ๋ฌผ๋“ค์ด ์–ด๋–ป๊ฒŒ Reactiveํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ง€๊ณ  ์กฐ์ž‘๋˜๋Š”์ง€๋ฅผ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (HTML, JavaScript & Svelte)

  • โœ… Svelte ๊ธฐ์ดˆ ๋ฌธ๋ฒ•
  • โœ… ์ปดํฌ๋„ŒํŠธ๊ฐ„ ํ†ต์‹ ๋ฐฉ๋ฒ•
  • โœ… ํ™”๋ฉด ์ „ํ™˜ ์• ๋‹ˆ๋ฉ”์ด์…˜
  • โœ… ์ด๋ฒคํŠธ ์กฐ์ž‘ ๋ฐฉ๋ฒ•
  • โœ… ๋ฐ˜์‘ํ˜• ์ฝ”๋“œ๋ฅผ ํ†ตํ•œ Reactiveํ•œ ํ”„๋กœ๊ทธ๋žจ ๊ธฐ๋ฒ•

์Šค๋ฒจํŠธ๋กœ ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” FE ๊ฒฐ๊ณผ๋ฌผ ๐Ÿ‘€

Svelte๊ฐ€ ๊ฐ€์ง„ ํŠน์ง•์€ ๋งŽ์ง€๋งŒ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ์‰ฝ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ์ง€์‹๋งŒ ์žˆ๋‹ค๋ฉด ์ •๋ง ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๊ณ  ๊ณง๋ฐ”๋กœ ์–ด๋–ค ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ด ์ฒ˜์Œ์ธ ๊ฐœ๋ฐœ์ž ๋ถ„๋“ค๋„ ๊ฐ•์˜๋ฅผ ํ†ตํ•ด ๋Œ€๋žต์ ์œผ๋กœ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ด ์–ด๋–ค ์‹์œผ๋กœ ์ง„ํ–‰๋˜๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ๊ฐ•์˜์—์„œ๋Š” ์ด Svelte ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ํ•„์š”ํ•œ ํ•„์ˆ˜์ ์ธ ๋‚ด์šฉ๋งŒ์„ ์„ ๋ณ„ํ•ด์„œ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค ๐Ÿ™†โ€โ™€๏ธ

ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์ด ์žˆ๋Š” ๋ˆ„๊ตฌ๋‚˜

์ข€ ๋” ๋น ๋ฅด๊ฒŒ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

Svelte์— ๋Œ€ํ•ด ํ•œ๋ฒˆ์ฏค ๋“ค์–ด๋ณด์‹  ๋ถ„

ํ”„๋ก ํŠธ์—”๋“œ์— ๋„์ „ํ•˜๊ณ  ์‹ถ์€ ๋””์ž์ด๋„ˆ, ํผ๋ธ”๋ฆฌ์…”


Q&A ๐Ÿ’ฌ

Q. ๊ฐ•์˜ ๋‚œ์ด๋„๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”?

HTML, Javascript์— ๋Œ€ํ•œ ๊ธฐ์ดˆ์ ์ธ ์ง€์‹์ด ์žˆ๋Š” ๋ถ„์ด๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ํ•™์Šต ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. Svelte์— ๊ด€ํ•œ ๋‚ด์šฉ์ค‘์—์„œ ๋ณต์žกํ•˜๊ณ  ๋œ ์ค‘์š”ํ•œ ๋ถ€๋ถ„๋“ค์€ ์ œ์™ธํ•˜๊ณ  ํ•„์ˆ˜๋กœ ์•Œ์•„์•ผ ํ•˜๋Š” ๋ถ€๋ถ„๋“ค๋งŒ ๊ฐ„์ถ”๋ ค์„œ ๋งŒ๋“  Svelte ๊ธฐ์ดˆ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

Q. ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์€ ์–ด๋–ป๊ฒŒ ๋˜๋‚˜์š”?

macOS, Windows, Linux ๋“ฑ Node.js๋ฅผ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ๋Š” ์–ด๋–ค PC์—์„œ๋ผ๋„ ๊ฐœ๋ฐœํ™˜๊ฒฝ์— ํ•„์š”ํ•œ ํ”„๋กœ๊ทธ๋žจ์„ ์„ค์น˜ํ•˜๊ณ  ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

  • ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์ด ์žˆ๋Š” ๋ˆ„๊ตฌ๋‚˜

  • ์ข€ ๋” ๋น ๋ฅด๊ฒŒ ๋ฌด์–ธ๊ฐ€๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

  • Svelte์— ๋Œ€ํ•ด ํ•œ ๋ฒˆ์ฏค ๋“ค์–ด๋ณด์‹  ๋ถ„

  • ๋””์ž์ด๋„ˆ ๋˜๋Š” ํผ๋ธ”๋ฆฌ์…”์—์„œ ํ”„๋ŸฐํŠธ์—”๋“œ์— ๋„์ „ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

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

  • HTML ๋ฐ CSS ๊ธฐ์ดˆ

  • JavaScript ๊ธฐ์ดˆ

์•ˆ๋…•ํ•˜์„ธ์š”
Indie Coder์ž…๋‹ˆ๋‹ค.

2,281

๋ช…

์ˆ˜๊ฐ•์ƒ

48

๊ฐœ

์ˆ˜๊ฐ•ํ‰

80

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

2000๋…„๋„ ์ค‘๋ฐ˜๋ถ€ํ„ฐ ๋ณธ๊ฒฉ์ ์œผ๋กœ ์›น๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•˜์—ฌ ํ˜„์žฌ๊นŒ์ง€ ํ”„๋ฆฌ๋žœ์„œ ๊ฐœ๋ฐœ์ž๋กœ ํ™œ๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์•ฝ5๋…„๊ฐ„ Amplix BI ์†”๋ฃจ์…˜ ์‹ค๋ฌด์ž ๊ต์œก์„ ์ง„ํ–‰ํ•˜๊ณ  ๊ฐœ๋ฐœ์„ ์ง€์›ํ•˜๋ฉฐ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ํšจ์œจ์ ์œผ๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ๋งŽ์€ ๊ฒฝํ—˜๊ณผ ๊ณ ๋ฏผ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. 

ํ˜„์žฌ๋Š” ๊ฐœ๋ฐœ ์—…๋ฌด์™€ ํ•จ๊ป˜ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ๋„์›€์ด ๋ ๋งŒํ•œ ์›น๊ด€๋ จ ๋ถ„์•ผ์˜ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์„ ์ฐพ๊ณ  ๊ฐ•์ขŒ์™€ ์ฑ…์„ ํ†ตํ•ด ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 

 

ํ˜„) ํ”„๋ฆฌ๋žœ์„œ

์ „) (์ฃผ) ๋น„์ฆˆํ”Œ๋Ÿฌ๊ทธ ์ „๋žต์†”๋ฃจ์…˜ ์‚ฌ์—…๋ถ€ ํŒ€์žฅ

์ „) (์ฃผ) ํผ๋‹ˆ๋ชฝํ‚ค์Šค ์œ„๋‹ˆ์Šคํ† ๋ฆฌ ์„œ๋น„์Šค ๊ฐœ๋ฐœ ํŒ€์žฅ

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw 

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

 

๊ฐ•์ขŒ ๋ชฉ๋ก

์ถœ๊ฐ„๋„์„œ

yes24, ๊ต๋ณด๋ฌธ๊ณ , ์•Œ๋ผ๋”˜

 

 

 

๋”๋ณด๊ธฐ

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

์ „์ฒด

5๊ฐœ โˆ™ (1์‹œ๊ฐ„ 6๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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

๋ฌด๋ฃŒ