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

Svelte ์‹ค์ „ ๊ฐ•์˜ - ์Šค๋„์ฟ  ๋งŒ๋“ค๊ธฐ

Svelte, Express, JWT, MongoDB๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์›น ๊ฒŒ์ž„์„ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. FrontEnd์™€ BackEnd ๋ชจ๋‘ ๋‹ค๋ฃจ์–ด ๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!

56๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

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

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

  • Svelte๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์Šค๋„์ฟ  ๊ฒŒ์ž„์„ ๋งŒ๋“ค์–ด์š”

  • Express๋กœ Node.JS๋ฅผ ํ•™์Šตํ•ด์š”

  • MongoDB, JWT, Lodash, Axios, Crypto ๋“ฑ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ๋ฒ•์„ ๋ฐฐ์›Œ์š”

  • Heroku ์„œ๋ฒ„์— ์‹ค์ œ ์›น ์„œ๋น„์Šค๋ฅผ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์–ด์š”

ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ์•„์šฐ๋ฅด๋Š” ์Šค๋ฒจํŠธ ์‹ค์ „ ๊ฐ•์˜,
Svelte์™€ Express๋กœ ์Šค๋„์ฟ  ๊ฒŒ์ž„ ๋งŒ๋“ค๊ธฐ !

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

์Šค๋„์ฟ  ๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ์ตํžˆ๋Š”
Svelte(์Šค๋ฒจํŠธ)
 ์‹ค์ „ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

 

Svelte์™€ Express๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์Šค๋„์ฟ  ๊ฒŒ์ž„์„ ๋งŒ๋“ค์–ด ๋ณด๋Š” ๊ฐ•์˜์ž…๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ๋ถ€ํ„ฐ ๋ฐฑ์—”๋“œ๊นŒ์ง€ ๋„“๊ฒŒ ๋ณด๊ณ  ๋„“์€ ๊ฐœ๋…์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๊ฐ•์˜๋กœ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์˜์—์„œ๋Š” JWT, MongoDB ๋“ฑ ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ๊ณผ ํ•จ๊ป˜ ๊ธฐ๋ณธ ๊ฐœ๋…๋„ ์„ค๋ช…ํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค. Svelte์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ๋ชจ๋ฅด์…”๋„ ์–ด๋ ต์ง€ ์•Š๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ–ˆ์œผ๋‹ˆ ๋ง์„ค์ด์ง€ ๋ง๊ณ  ๋„์ „ํ•ด๋ณด์„ธ์š”!

์™œ ์ด ๊ฐ•์˜๋ฅผ ๋“ค์–ด์•ผ ํ•˜๋‚˜์š”? โœ’๏ธ

์‹ค์ „ ๊ฐ๊ฐ์„ ์ตํžˆ๋Š” ์ง€๋ฆ„๊ธธ์€ ๋ฐ”๋กœ ์‹ค์Šต! Svelte(์Šค๋ฒจํŠธ)์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์„ ์•Œ๊ณ  ๊ณ„์‹ ๋‹ค๋ฉด, ๊ทธ๋‹ค์Œ ์ˆœ์„œ๋Š” ์ง์ ‘ ๋ชธ์œผ๋กœ ์ตํ˜€๋ณด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•ด ๋ณด์ง€ ์•Š๊ณ  ๋ฌธ๋ฒ•๋งŒ ๊ณต๋ถ€ํ•˜๋ฉด ๊ธˆ์„ธ ๊ธฐ์–ต ์†์—์„œ ์žŠํžˆ๊ธฐ ๋งˆ๋ จ์ด๋‹ˆ๊นŒ์š”. ์ €์™€ ํ•จ๊ป˜ ์ง€๊ธˆ ๋‹น์žฅ! ์Šค๋„์ฟ  ๊ฒŒ์ž„์„ ๋งŒ๋“ค์–ด ๋ณด์•„์š”.

์ด ๊ฐ•์˜์˜ ๋ชฉํ‘œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๋ชจ๋‘ ๋‹ค๋ค„๋ณด๋ฉฐ ๋„“~์€ ๊ฐœ๋…์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ๋ถ„์•ผ๋„ ๋„“๊ณ  ๋ฐฑ์—”๋“œ ๋ถ„์•ผ๋„ ๋„“์–ด์„œ ๋งˆ์Šคํ„ฐ๋Š” ๋ถˆ๊ฐ€๋Šฅํ• ์ง€ ๋ชจ๋ฅด์ง€๋งŒ, ์ตœ์†Œํ•œ ์„œ๋กœ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์ž‘์—…ํ•˜๋ฉด ๋Šฅ๋ ฅ์ด ํ–ฅ์ƒ๋˜๊ฒ ์ฃ ?!

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

ํ”„๋ก ํŠธ์—”๋“œ๋Š” Svelte, ๋ฐฑ์—”๋“œ๋Š” Express, DB๋Š” MongoDB, ๊ทธ๋ฆฌ๊ณ  ์‚ฌ์šฉ์ž ์ธ์ฆ์„ ์œ„ํ•ด JWT๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ๋ชฉ๋ก์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ์‚ฌ์šฉํ•˜๋‹ˆ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”. ๋‚˜์ค‘์— ์ฐพ์•„์„œ ๋”ฐ๋กœ ๊ณต๋ถ€ํ•˜์‹œ๊ธฐ ํŽธํ•˜์‹œ๋„๋ก, ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ชจ๋‘ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์„ค๋ช…ํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

  • Svelte (svelte-spa-router)
  • Express (http-errors, crypto, cors)
  • JWT (jwt-decode, jsonwebtoken)
  • MongoDB (mongoose)
  • Lodash
  • Axios

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

์‹ค์Šต ๊ฐ•์˜์™€ ๊ฐœ๋…์„ ์„ค๋ช…ํ•ด ๋“œ๋ฆฌ๋Š” ์ฐธ๊ณ  ์ด๋ก  ๊ฐ•์˜๊ฐ€ ๋ชจ๋‘ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•˜์‹  ํ›„์— ๋ถ€๋ก ๊ฐ•์˜๋ฅผ ๋ณด์‹œ๊ณ  Heroku ์„œ๋ฒ„์— ๋ฐฐํฌํ•ด ๋ณด์‹ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜ ์ž๋ฃŒ ๐Ÿ“–

๊ฐ•์˜ PPT์™€ ์†Œ์Šค์ฝ”๋“œ: https://github.com/beomy/inflearn-svelte-practice

Demo: https://svelte-sudoku.herokuapp.com/

์ง€๋‚œ ๊ฐ•์˜ ํ•จ๊ป˜ ๋ณด๊ธฐ ๐Ÿ‘€

์Šค๋ฒจํŠธ Svelte ์ž…๋ฌธ ๊ฐ•์˜ - A๋ถ€ํ„ฐ Z๊นŒ์ง€   ์ถ”์ฒœ ์ž…๋ฌธ๊ฐ•์˜ 
๊ณต์‹๋ฌธ์„œ ๊ธฐ๋ฐ˜์˜ ์Šค๋ฒจํŠธ ๊ธฐ๋ณธ๊ธฐ + ํ•ต์‹ฌ๋ฌธ๋ฒ•

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

Q. Svelte๋ฅผ ์ฒ˜์Œ ๋“ค์–ด๋ณด๋Š”๋ฐ ์ˆ˜๊ฐ• ๊ฐ€๋Šฅํ•œ๊ฐ€์š”?
A. ์ˆ˜๊ฐ• ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜์—์„œ ์ง„ํ–‰ํ•˜๋Š” Svelte ๋ฌธ๋ฒ•์€ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•์ด ์œ„์ฃผ์ด๊ธฐ ๋•Œ๋ฌธ์— Svelte๋ฅผ ์ฒ˜์Œ ๋“ค์–ด๋ณด์…”๋„ ์ˆ˜๊ฐ•ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ธฐ๋ณธ์ด ํƒ„ํƒ„ํ•ด์•ผ ์–ป๋Š” ๊ฒƒ์ด ๋” ๋งŽ์Šต๋‹ˆ๋‹ค. ๐Ÿ‘‰Svelte ์ž…๋ฌธ ๊ฐ•์˜๋ฅผ ๋จผ์ € ๋“ฃ๊ณ  ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜์˜ ๋ชฉํ‘œ๊ฐ€ ๋ฌด์—‡์ธ๊ฐ€์š”?
A. ์ด ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋‚œ ํ›„ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๋ชจ๋‘๋ฅผ ๋งˆ์Šคํ„ฐํ•˜๋Š” ๊ฒƒ์ด ์ด ๊ฐ•์˜์˜ ๋ชฉํ‘œ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ๋ฌผ๋ก  ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฒก์—”๋“œ๋ฅผ ๋ชจ๋‘ ๋งˆ์Šคํ„ฐํ•˜๊ฒŒ ๋˜๋ฉด ์ข‹๊ฒ ์ง€๋งŒ ํ”„๋ก ํŠธ์—”๋“œ ์˜์—ญ๋„ ๋ฐฑ์—”๋“œ ์˜์—ญ๋„ ๋งค์šฐ ๋„“๊ธฐ ๋•Œ๋ฌธ์—, ์ด ๊ฐ•์˜๋งŒ์œผ๋กœ ๋ชจ๋‘๋ฅผ ์ดํ•ดํ•˜๊ธฐ์—๋Š” ํ•œ๊ณ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜์˜ ๋ชฉํ‘œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์–ด๋А ํ•œ ์˜์—ญ์—์„œ ์ผํ•  ๋•Œ ๋ฐ˜๋Œ€์ชฝ ์˜์—ญ์„ ์ดํ•ดํ•˜๊ณ  ์—…๋ฌด ํšจ์œจ์„ ๋†’์ผ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ด ์ด ๊ฐ•์˜์˜ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?
A. ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ์˜ ๊ฐœ๋…์„ ๋ชจ๋‘ ๋งŒ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์ด๊ธฐ ๋•Œ๋ฌธ์—, ์ด๋ฒˆ ๊ฐ•์˜๋Š” ์‹ค์Šต ๊ฐ•์˜์ด์ง€๋งŒ ์‹ค์Šต๋งŒ์œผ๋กœ ๋๋‚˜๋Š” ๊ฐ•์˜๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ์ถ”๊ฐ€ ์„ค๋ช…์ด ํ•„์š”ํ•œ ๊ฐœ๋…์ด๋ผ๋ฉด ์ถ”๊ฐ€ ์„ค๋ช…์„ ์œ„ํ•œ ๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ์‹œ๊ณ  ๊ฐœ๋… ํ˜น์€ ๋ฌด์—‡์ด๋“  ๊ถ๊ธˆํ•œ ์ ์„ ์งˆ๋ฌธํ•ด ์ฃผ์‹œ๋ฉด ์ •์„ฑ๊ป ๋‹ต๋ณ€ ๋“œ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

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

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

  • Svelte๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์‹ค๋ฌด์— ์ ์šฉํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„

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

  • JWT๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด ๋ณด์‹œ๋Š” ๋ถ„

  • MongoDB๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๊ณ ์‹ถ์œผ์‹  ๋ถ„

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

  • ES6+

  • Svelte ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

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

244

๋ช…

์ˆ˜๊ฐ•์ƒ

12

๊ฐœ

์ˆ˜๊ฐ•ํ‰

21

๊ฐœ

๋‹ต๋ณ€

4.6

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

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

์ „์ฒด

50๊ฐœ โˆ™ (7์‹œ๊ฐ„ 51๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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