Svelte, Express, JWT, MongoDB๋ฅผ ์ฌ์ฉํด์ ์น ๊ฒ์์ ๋ง๋ค์ด ๋ณผ ์ ์์ต๋๋ค. FrontEnd์ BackEnd ๋ชจ๋ ๋ค๋ฃจ์ด ๋ณด๊ณ ์ถ์ผ์ ๋ถ๋ค ํ์ํฉ๋๋ค!
Svelte๋ฅผ ์ฌ์ฉํด์ ์ค๋์ฟ ๊ฒ์์ ๋ง๋ค์ด์
Express๋ก Node.JS๋ฅผ ํ์ตํด์
MongoDB, JWT, Lodash, Axios, Crypto ๋ฑ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ๋ฒ์ ๋ฐฐ์์
Heroku ์๋ฒ์ ์ค์ ์น ์๋น์ค๋ฅผ ๋ฐฐํฌํ ์ ์์ด์
ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ์์ฐ๋ฅด๋ ์ค๋ฒจํธ ์ค์ ๊ฐ์,
Svelte์ Express๋ก ์ค๋์ฟ ๊ฒ์ ๋ง๋ค๊ธฐ !
์ค๋์ฟ ๊ฒ์์ ๋ง๋ค๋ฉฐ ์ตํ๋
Svelte(์ค๋ฒจํธ) ์ค์ ๊ฐ์์
๋๋ค.
Svelte์ Express๋ฅผ ์ฌ์ฉํด์ ์ค๋์ฟ ๊ฒ์์ ๋ง๋ค์ด ๋ณด๋ ๊ฐ์์ ๋๋ค. ํ๋ก ํธ์๋๋ถํฐ ๋ฐฑ์๋๊น์ง ๋๊ฒ ๋ณด๊ณ ๋์ ๊ฐ๋ ์ ๋ง๋ค๊ธฐ ์ํ ๊ฐ์๋ก ์ค๋นํ์ต๋๋ค. ๋ณธ ๊ฐ์์์๋ JWT, MongoDB ๋ฑ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ๊ณผ ํจ๊ป ๊ธฐ๋ณธ ๊ฐ๋ ๋ ์ค๋ช ํด ๋๋ฆฝ๋๋ค. Svelte์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ๋ชจ๋ฅด์ ๋ ์ด๋ ต์ง ์๊ฒ ์ดํดํ์ค ์ ์๋๋ก ๊ตฌ์ฑํ์ผ๋ ๋ง์ค์ด์ง ๋ง๊ณ ๋์ ํด๋ณด์ธ์!
์ค์ ๊ฐ๊ฐ์ ์ตํ๋ ์ง๋ฆ๊ธธ์ ๋ฐ๋ก ์ค์ต! Svelte(์ค๋ฒจํธ)์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์๊ณ ๊ณ์ ๋ค๋ฉด, ๊ทธ๋ค์ ์์๋ ์ง์ ๋ชธ์ผ๋ก ์ตํ๋ณด๋ ๊ฒ์ ๋๋ค. ์ค์ ๋ก ์ฌ์ฉํด ๋ณด์ง ์๊ณ ๋ฌธ๋ฒ๋ง ๊ณต๋ถํ๋ฉด ๊ธ์ธ ๊ธฐ์ต ์์์ ์ํ๊ธฐ ๋ง๋ จ์ด๋๊น์. ์ ์ ํจ๊ป ์ง๊ธ ๋น์ฅ! ์ค๋์ฟ ๊ฒ์์ ๋ง๋ค์ด ๋ณด์์.
์ด ๊ฐ์์ ๋ชฉํ๋ ํ๋ก ํธ์๋์ ๋ฐฑ์๋ ๋ชจ๋ ๋ค๋ค๋ณด๋ฉฐ ๋~์ ๊ฐ๋ ์ ๋ง๋๋ ๊ฒ์ ๋๋ค. ํ๋ก ํธ์๋ ๋ถ์ผ๋ ๋๊ณ ๋ฐฑ์๋ ๋ถ์ผ๋ ๋์ด์ ๋ง์คํฐ๋ ๋ถ๊ฐ๋ฅํ ์ง ๋ชจ๋ฅด์ง๋ง, ์ต์ํ ์๋ก๋ฅผ ์ดํดํ๊ณ ์์ ํ๋ฉด ๋ฅ๋ ฅ์ด ํฅ์๋๊ฒ ์ฃ ?!
ํ๋ก ํธ์๋๋ Svelte, ๋ฐฑ์๋๋ Express, DB๋ MongoDB, ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ์ธ์ฆ์ ์ํด JWT๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์๋ ๋ชฉ๋ก์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ฌ์ฉํ๋ ์ฐธ๊ณ ํด์ฃผ์ธ์. ๋์ค์ ์ฐพ์์ ๋ฐ๋ก ๊ณต๋ถํ์๊ธฐ ํธํ์๋๋ก, ์ฌ์ฉํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ชจ๋ ๊ณต์ ๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์ฌ ์ค๋ช ํด ๋๋ฆฝ๋๋ค.
์ค์ต ๊ฐ์์ ๊ฐ๋ ์ ์ค๋ช ํด ๋๋ฆฌ๋ ์ฐธ๊ณ ์ด๋ก ๊ฐ์๊ฐ ๋ชจ๋ ์์ต๋๋ค. ํ๋ก์ ํธ๋ฅผ ์์ฑํ์ ํ์ ๋ถ๋ก ๊ฐ์๋ฅผ ๋ณด์๊ณ Heroku ์๋ฒ์ ๋ฐฐํฌํด ๋ณด์ค ์๋ ์์ต๋๋ค.
๊ฐ์ PPT์ ์์ค์ฝ๋: https://github.com/beomy/inflearn-svelte-practice
Demo: https://svelte-sudoku.herokuapp.com/
Q. Svelte๋ฅผ ์ฒ์ ๋ค์ด๋ณด๋๋ฐ ์๊ฐ ๊ฐ๋ฅํ๊ฐ์?
A. ์๊ฐ ๊ฐ๋ฅํฉ๋๋ค. ์ด ๊ฐ์์์ ์งํํ๋ Svelte ๋ฌธ๋ฒ์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ด ์์ฃผ์ด๊ธฐ ๋๋ฌธ์ Svelte๋ฅผ ์ฒ์ ๋ค์ด๋ณด์
๋ ์๊ฐํ์ค ์ ์์ต๋๋ค. ํ์ง๋ง ๊ธฐ๋ณธ์ด ํํํด์ผ ์ป๋ ๊ฒ์ด ๋ ๋ง์ต๋๋ค. ๐Svelte ์
๋ฌธ ๊ฐ์๋ฅผ ๋จผ์ ๋ฃ๊ณ ์ด ๊ฐ์๋ฅผ ๋ค์ผ์๋ ๊ฒ์ ์ถ์ฒํด ๋๋ฆฝ๋๋ค.
Q. ์ด ๊ฐ์์ ๋ชฉํ๊ฐ ๋ฌด์์ธ๊ฐ์?
A. ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋ ํ ํ๋ก ํธ์๋์ ๋ฐฑ์๋ ๋ชจ๋๋ฅผ ๋ง์คํฐํ๋ ๊ฒ์ด ์ด ๊ฐ์์ ๋ชฉํ๋ ์๋๋๋ค. ๋ฌผ๋ก ํ๋ก ํธ์๋์ ๋ฒก์๋๋ฅผ ๋ชจ๋ ๋ง์คํฐํ๊ฒ ๋๋ฉด ์ข๊ฒ ์ง๋ง ํ๋ก ํธ์๋ ์์ญ๋ ๋ฐฑ์๋ ์์ญ๋ ๋งค์ฐ ๋๊ธฐ ๋๋ฌธ์, ์ด ๊ฐ์๋ง์ผ๋ก ๋ชจ๋๋ฅผ ์ดํดํ๊ธฐ์๋ ํ๊ณ๊ฐ ์์ต๋๋ค. ์ด ๊ฐ์์ ๋ชฉํ๋ ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ์ดํดํ๊ณ ์ด๋ ํ ์์ญ์์ ์ผํ ๋ ๋ฐ๋์ชฝ ์์ญ์ ์ดํดํ๊ณ ์
๋ฌด ํจ์จ์ ๋์ผ ์ ์๊ฒ ํ๋ ๊ฒ์ด ์ด ๊ฐ์์ ๋ชฉํ์
๋๋ค.
Q. ์ด ๊ฐ์๋ง์ ํน๋ณํ ์ฅ์ ์ด ์์๊น์?
A. ํ๋ก ํธ์๋, ๋ฐฑ์๋์ ๊ฐ๋
์ ๋ชจ๋ ๋ง๋ค์ด๊ฐ๋ ๊ฒ์ด ๋ชฉํ์ด๊ธฐ ๋๋ฌธ์, ์ด๋ฒ ๊ฐ์๋ ์ค์ต ๊ฐ์์ด์ง๋ง ์ค์ต๋ง์ผ๋ก ๋๋๋ ๊ฐ์๋ ์๋๋๋ค. ์ถ๊ฐ ์ค๋ช
์ด ํ์ํ ๊ฐ๋
์ด๋ผ๋ฉด ์ถ๊ฐ ์ค๋ช
์ ์ํ ๊ฐ์๋ฅผ ์ ์ํ์์ต๋๋ค. ์ด ๊ฐ์๋ฅผ ๋ค์ผ์๊ณ ๊ฐ๋
ํน์ ๋ฌด์์ด๋ ๊ถ๊ธํ ์ ์ ์ง๋ฌธํด ์ฃผ์๋ฉด ์ ์ฑ๊ป ๋ต๋ณ ๋๋ฆฌ๋๋ก ํ๊ฒ ์ต๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
Svelte๋ฅผ ์ฌ์ฉํด์ ์ค๋ฌด์ ์ ์ฉํ๊ณ ์ถ์ผ์ ๋ถ
Express๋ก ๋ฐฑ์๋์ ์ ๋ฌธ ํ์๋ ๋ถ
JWT๋ฅผ ์ฒ์ ์ฌ์ฉํด ๋ณด์๋ ๋ถ
MongoDB๋ฅผ ์ฌ์ฉํด ๋ณด๊ณ ์ถ์ผ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
ES6+
Svelte ๊ธฐ๋ณธ ๋ฌธ๋ฒ
244
๋ช
์๊ฐ์
12
๊ฐ
์๊ฐํ
21
๊ฐ
๋ต๋ณ
4.6
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
์ ์ฒด
50๊ฐ โ (7์๊ฐ 51๋ถ)
[์ฐธ๊ณ ] CORS
08:25
ToDo ๋ฆฌ์คํธ
02:56
MongoDB ์ฐ๊ฒฐ
09:43
ํ์๊ฐ์ API
16:05
๋ก๊ทธ์ธ API
10:29
[์ฐธ๊ณ ] MondoDB
05:54