Svelte.js ์ ๋ฌธ ๊ฐ์ด๋
HEROPY
2์๊ฐ์ด ๋๋ ์ ๋ฌธ์๋ฅผ ์ํ Svelte.js ๋ฌด๋ฃ ๊ฐ์!!
์ด๊ธ
Svelte
Svelte ๊ธฐ๋ฐ์ SPA ์ํ ๊ฒ์ ์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ฐฐํฌํฉ๋๋ค!
์๊ฐ์ 371๋ช
๋์ด๋ ์ค๊ธ์ด์
์๊ฐ๊ธฐํ ๋ฌด์ ํ





์ผ์ฑ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!





์ผ์ฑ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!
๋จผ์ ๊ฒฝํํ ์๊ฐ์๋ค์ ํ๊ธฐ
5.0
jude
์ค๋ฒจํธ๋ก ๋ง๋๋ ์ํ๊ฒ์ ํ๋ก์ ํธ ์๊ฐํ์ต๋๋ค :) ์ฌ์ค ์ด ๊ฐ์๋ฅผ ๊ตฌ์ ํด๋๊ณ ์๋ถ๋ถ๋ง ์กฐ๊ธ ๋ณด๊ณ ๋์ ์๊ฐ์ด ๊ฝค ๋๋๋ฐ, ํด์ฌ ํ ๋ณธ๊ฒฉ์ ์ผ๋ก ํ๋ก ํธ ๊ฐ๋ฐ ๊ณต๋ถ ์ค๋น๋ฅผ ํ๋ฉด์ ๋ค์ ์ฐพ์๋ณด๊ฒ ๋์ด์. ๊ฐ์ฌ๋์ ์ฒ์ ์๊ฒ๋๊ฑด ์ ํ๋ธ ์ค๋ฒจํธ ๊ฐ์ ์๋๋ฐ, ์ค๋ช ์ด ๊ฐ๋จ ๋ช ๋ฃํ๊ณ , ๋ญ๋๊น... ๋์์ด๋ ์ถ์ ์ด์ ์ ๊ทธ๋ฐ์ง ๊ธฐ์ด ์ง์์ด ๊ฑฐ์ ์์ด๋ ์ค๋ช ๋ง ์ ๋ฐ๋ผ ์ค๋ฉด ๋๊ตฌ๋ ์ดํดํ ์ ์๋๋ก ์งํํ๋ ๊ฒ์ด ์ ๋ง ํ์ํ์ด์. ํจ์คํธ์บ ํผ์ค์ ์ด๊ฒฉ์ฐจ ํจํค์ง์์ vue.js๋ก ๋ง๋ ์ํ๊ฒ์ ์ฌ์ดํธ ์์ ๋ฅผ ์งํํ๊ณ ๋์ ์ด ๊ฐ์๋ฅผ ๋น๊ตํด๊ฐ๋ฉด์ ์งํํด๋ดค๋๋ฐ ์ญ์ ์ฝ๋๋์ด ๋ง์ด ์ค์ด๋ ๊ฒ์ ๋ณผ ์ ์๊ณ , vue์ ๋ณต์กํ store ๊ฐ๋ ์ด ์์ ๋น ์ ธ๋ฒ๋ฆฌ๋๊น ํ๋ก์ ํธ ์ค๊ณ์ ํฐ ๊ทธ๋ฆผ์ ์ข ๋ ๋ช ๋ฃํ๊ฒ ์ก์ ์ ์๋๊ฑฐ ๊ฐ์์. ๊ทธ๋ฆฌ๊ณ ์ค๋ฒจํธ๋ ์ ๋ง ๋๋ ์ด ๋น ๋ฅด๊ฒ ๋ฐ์ ํด๋๊ฐ๋ ํ๋ ์์ํฌ์ธ๊ฑฐ ๊ฐ์์, daum ์ฒซ ํ๋ฉด๋ ์ด๋ฏธ ์ค๋ฒจํธ๋ฅผ ์ฐ๊ณ ์์ด์ ์ค๋ฌด์ ์จ๋ ๋ ๋งํผ ๋ถ์กฑํจ์ด ์๋ค๋ ๊ฒ์ด ์์ผ๋ก ๋์ฑ ๊ธฐ๋๊ฐ ๋๋๊ฑฐ ๊ฐ์์. ์ฌ์ ํ react๋ vue๊ฐ ๋ง๊ธด ํ์ง๋ง ์ฑ์ฉ ์์ฅ์์ ์กฐ๊ธ์ฉ ์ค๋ฒจํธ๋ผ๋ ๋จ์ด๊ฐ ๋์ค๋ ๊ฒ๋ ๋ณด์ด๊ตฌ์ ใ ใ ์์ผ๋ก ํ๋ก ํธ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ ๋ถ๋ค์ด๋ผ๋ฉด ์ด ๊ฐ์ ๋ฟ๋ง ์๋๋ผ ๋ฐ์์ ๊ฐ์ฌ๋์ ์ค๋ฒจํธ ์ ๋ฌธ, ์๋ฒฝ ๊ฐ์ด๋ ๊ฐ์๋ ์ ๊ทน ์ถ์ฒ ๋๋ฆฝ๋๋ค :D ๊ฐ์ฌํฉ๋๋ค.
5.0
mysend12
ํ๋ก ํธ์ชฝ์ ๊ด์ฌ์ด ๋ง์์๋๋ฐ, ์งํ์ด ๊น๋ํด์ ๋จธ๋ฆฟ์์ ์์ ๋ฐํ๋ ๋๋์ด์๊ณ ๋ฌด์๋ณด๋ค ์ฌ๋ฐ๊ฒ ๋ดค์ต๋๋ค!
5.0
์ ํ์ง Jeong
์ค์ ๋ก ๋์์ด ๋๋ ์ ๋ณด๊ฐ ํ๋ถํด์ ๋ง์ด ๋ฐฐ์ ์ต๋๋ค.
Svelte.js์ SPA(์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ )์ ๊ตฌ์ฑํ ์ ์์ด์!
SPA์ ์ฅ์ ์ ํ์ฉํ๊ณ ๋จ์ ์ ๋ณด์ํ ์ ์์ด์!
Serverless Functions๋ฅผ ์ฌ์ฉํด ์์ฝ๊ฒ ๋ฐฑ์๋ API๋ฅผ ๊ตฌ์ฑํ ์ ์์ด์!
์ค๋ฒจํธ ํ์ฉ, ์ง์ ๋ง๋๋ SPA ์์ ๋ก!
๋ค๋ฅธ Svelte ๊ฐ์๋ ์ฐธ๊ณ ํ์ธ์!
"Svelte.js Core API ์๋ฒฝ ๊ฐ์ด๋"
"Svelte.js ์
๋ฌธ ๊ฐ์ด๋"
Svelte.js๋ฅผ ์ด์ฉํด SPA(์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์
) ์์ ๋ฅผ ๋ง๋ค์ด๋ณด์ธ์!
๋ผ์ฐํฐ๋ฅผ ์ฌ์ฉํด ํ์ด์ง๋ฅผ ๊ตฌ๋ถํ๊ณ ์ ํ ํจ๊ณผ์ ์คํฌ๋กค ๋ณต๊ตฌ ๋ฑ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ์ฉํ ์ ์์ต๋๋ค.
๋ถ๋ด์ค๋ฌ์ด ๋ณ๋์ ์๋ฒ ๊ตฌ์ถ ์์ด SF(์๋ฒ๋ฆฌ์ค ํจ์)๋ฅผ ์ฌ์ฉํด,
๋น ๋ฅด๊ฒ ๋ฐฑ์๋ API๋ฅผ ๋ง๋ค๊ณ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
SPA์ ๋จ์ ์ธ ๋ณด์ ์ด์๋ฅผ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ํด๊ฒฐํ์ธ์!
Snowpack์ ๊ฐ์ฅ ์ต์ ์ ๋น๋ ๋๊ตฌ๋ก,
๊ฐ๋ฐ ๋น๋ ์๊ฐ์ ํ๊ธฐ์ ์ผ๋ก ๋จ์ถํ ์ ์์ต๋๋ค.
๋ ์พ์ ํ ํ๊ฒฝ์์ ๊ฐ๋ฐํ ์ ์์ด์!
Netlify์ CD(์ง์์ ๋ฐฐํฌ)๋ฅผ ์ฌ์ฉํด์.
GitHub ์ ์ฅ์์ ์
๋ก๋ํ๋ฉด ๋ฐ๋ก ์ฌ์ดํธ๊ฐ ์๋ ๋ฐฐํฌ๋๋,
์ฌ์ดํธ ๋ฐฐํฌ์ ์๊ฐ์ ๋ค์ด์ง ์์๋ ๋ฉ๋๋ค!
์ด๋ฒ ๊ฐ์๋ ์ ์์ง์์ด ํ์ํ ๊ฐ์์ด์ง๋ง, ์ต๋ํ ์ฝ๊ฒ ํ์ด ์ค๋ช
ํ๊ณ ์์ต๋๋ค.
์์ ์ถ์ํ 'Svelte.js Core API ์๋ฒฝ ๊ฐ์ด๋'๋ก Svelte ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ค์ง ํ
๋ณธ ๊ฐ์๋ฅผ ๋ค์ผ์๋ฉด ๋์ฑ ์ข์ต๋๋ค.
OMDb API๋ฅผ ํ์ฉํด ์ค์ ์ํ๋ฅผ ๊ฒ์ํ ์ ์๋ SPA ์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ด
๋๋ค!
Netlify Serverless Functions๋ก ๋ฐฑ์๋ API๋ฅผ ๊ตฌ์ฑํด,
API Key ๋
ธ์ถ ์์ด ์ฌ์ฉ์์๊ฒ ๊ฒ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
GitHub Repo: https://github.com/HeropCode/Svelte-Movie-app
Demo: https://competent-cori-258206.netlify.app
Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting with GitHub(CD)
Netlify Serverless Functions
snowpack
@snowpack/plugin-svelte
@snowpack/plugin-dotenv
@snowpack/plugin-sass
@snowpack/plugin-optimize
@snowpack/plugin-babel
babel-plugin-transform-remove-console
svelte
svelte-spa-router
autoprefixer
postcss
lodash
axios
qs
netlify-cli
์๊ฐ ์ค ์ง๋ฌธ์ด ์๊ธฐ๋ฉด ์ง๋ฌธ & ๋ต๋ณ ํ์ด์ง๋ฅผ ์ฌ์ฉํด ์ฃผ์ธ์.
์ต๋ํ ๋น ๋ฅด๊ฒ ๋ต๋ณ์ ๋๋ฆฌ๊ฒ ์ต๋๋ค.
์๊ฐ์ด ๊ณ ๋ฏผ๋๊ฑฐ๋ ๊ธฐํ ์๊ฐ ์ ๊ถ๊ธํ ๋ถ๋ถ์ด ์๋ค๋ฉด,
์๊ฐ ์ ๋ฌธ์ ํ์ด์ง๋ฅผ ์ฌ์ฉํด ์ฃผ์ธ์.
Svelte API์ ๋ํ ํ๊ธ ๋ฌธ์๊ฐ ํ์ํ์๋ฉด,
'Svelte.js ์๋ฒฝ ๊ฐ์ด๋(Renew)' ํฌ์คํธ๋ฅผ ํ์ธํ์ธ์.
https://heropy.blog/2019/09/29/svelte
2020.12.24
๋ค์ ํํธ๋ฅผ ์ถ๊ฐํ์ต๋๋ค!
์ ์ฒด ๊ฐ์ ์์ ๋ฅผ ์์ํ๊ธฐ ์ ์ ๊ผญ ๋ณด์ธ์!
- 2-1. แแ
กแผแแ
ด แแ
จแแ
ฆ แแ
ฉแแ
ฒแฏ แแ
ฅแแ
ฅแซ แแ
ตแฏแแ
ตแแ
ตแแ
ตแแ
ต
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
Svelte.js ํ์ฉ ์์ ๊ฐ ํ์ํ์ ๋ถ!
SPA ์ฌ์ดํธ ์ ์์ ์ค๋นํ์๋ ๋ถ!
Netlify Serverless Functions๋ฅผ ๊ฒฝํํ๊ณ ์ถ์ผ์ ๋ถ!
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS(SCSS)
JS
Svelte
4,228
๋ช
์๊ฐ์
224
๊ฐ
์๊ฐํ
162
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
3
๊ฐ
๊ฐ์
์๋
ํ์ธ์~ ๋ฐ๊ฐ์ต๋๋ค!
์ ๋ ํ์ฌ ์์ ์คํํธ์
์์ ๊ธฐ์
๊ด๋ฆฌ ์๋ฃจ์
์ ๊ฐ๋ฐํ๊ณ ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋ฐ์์
์
๋๋ค.
HEROPY ๊ธฐ์ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ๊ณ ์๊ณ ,
๊ทธ ์ธ ๊ธฐ์
์ถ๊ฐ์ด๋ ์จ/์คํ๋ผ์ธ ๊ฐ์ ํ๋๋ ํ๊ณ ์์ต๋๋ค.
Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w
Email: thesecon@gmail.com
์ ์ฒด
49๊ฐ โ (7์๊ฐ 46๋ถ)
์ ์ฒด
30๊ฐ
5.0
30๊ฐ์ ์๊ฐํ
์๊ฐํ 7
โ
ํ๊ท ํ์ 5.0
5
์ค๋ฒจํธ๋ก ๋ง๋๋ ์ํ๊ฒ์ ํ๋ก์ ํธ ์๊ฐํ์ต๋๋ค :) ์ฌ์ค ์ด ๊ฐ์๋ฅผ ๊ตฌ์ ํด๋๊ณ ์๋ถ๋ถ๋ง ์กฐ๊ธ ๋ณด๊ณ ๋์ ์๊ฐ์ด ๊ฝค ๋๋๋ฐ, ํด์ฌ ํ ๋ณธ๊ฒฉ์ ์ผ๋ก ํ๋ก ํธ ๊ฐ๋ฐ ๊ณต๋ถ ์ค๋น๋ฅผ ํ๋ฉด์ ๋ค์ ์ฐพ์๋ณด๊ฒ ๋์ด์. ๊ฐ์ฌ๋์ ์ฒ์ ์๊ฒ๋๊ฑด ์ ํ๋ธ ์ค๋ฒจํธ ๊ฐ์ ์๋๋ฐ, ์ค๋ช ์ด ๊ฐ๋จ ๋ช ๋ฃํ๊ณ , ๋ญ๋๊น... ๋์์ด๋ ์ถ์ ์ด์ ์ ๊ทธ๋ฐ์ง ๊ธฐ์ด ์ง์์ด ๊ฑฐ์ ์์ด๋ ์ค๋ช ๋ง ์ ๋ฐ๋ผ ์ค๋ฉด ๋๊ตฌ๋ ์ดํดํ ์ ์๋๋ก ์งํํ๋ ๊ฒ์ด ์ ๋ง ํ์ํ์ด์. ํจ์คํธ์บ ํผ์ค์ ์ด๊ฒฉ์ฐจ ํจํค์ง์์ vue.js๋ก ๋ง๋ ์ํ๊ฒ์ ์ฌ์ดํธ ์์ ๋ฅผ ์งํํ๊ณ ๋์ ์ด ๊ฐ์๋ฅผ ๋น๊ตํด๊ฐ๋ฉด์ ์งํํด๋ดค๋๋ฐ ์ญ์ ์ฝ๋๋์ด ๋ง์ด ์ค์ด๋ ๊ฒ์ ๋ณผ ์ ์๊ณ , vue์ ๋ณต์กํ store ๊ฐ๋ ์ด ์์ ๋น ์ ธ๋ฒ๋ฆฌ๋๊น ํ๋ก์ ํธ ์ค๊ณ์ ํฐ ๊ทธ๋ฆผ์ ์ข ๋ ๋ช ๋ฃํ๊ฒ ์ก์ ์ ์๋๊ฑฐ ๊ฐ์์. ๊ทธ๋ฆฌ๊ณ ์ค๋ฒจํธ๋ ์ ๋ง ๋๋ ์ด ๋น ๋ฅด๊ฒ ๋ฐ์ ํด๋๊ฐ๋ ํ๋ ์์ํฌ์ธ๊ฑฐ ๊ฐ์์, daum ์ฒซ ํ๋ฉด๋ ์ด๋ฏธ ์ค๋ฒจํธ๋ฅผ ์ฐ๊ณ ์์ด์ ์ค๋ฌด์ ์จ๋ ๋ ๋งํผ ๋ถ์กฑํจ์ด ์๋ค๋ ๊ฒ์ด ์์ผ๋ก ๋์ฑ ๊ธฐ๋๊ฐ ๋๋๊ฑฐ ๊ฐ์์. ์ฌ์ ํ react๋ vue๊ฐ ๋ง๊ธด ํ์ง๋ง ์ฑ์ฉ ์์ฅ์์ ์กฐ๊ธ์ฉ ์ค๋ฒจํธ๋ผ๋ ๋จ์ด๊ฐ ๋์ค๋ ๊ฒ๋ ๋ณด์ด๊ตฌ์ ใ ใ ์์ผ๋ก ํ๋ก ํธ ๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ ๋ถ๋ค์ด๋ผ๋ฉด ์ด ๊ฐ์ ๋ฟ๋ง ์๋๋ผ ๋ฐ์์ ๊ฐ์ฌ๋์ ์ค๋ฒจํธ ์ ๋ฌธ, ์๋ฒฝ ๊ฐ์ด๋ ๊ฐ์๋ ์ ๊ทน ์ถ์ฒ ๋๋ฆฝ๋๋ค :D ๊ฐ์ฌํฉ๋๋ค.
์๊ฐํ 10
โ
ํ๊ท ํ์ 4.9
5
์ข์ ๊ฐ์ ๊ฐ์ฌํฉ๋๋ค. svelte๋ฟ๋ง ์๋๋ผ ์ค์ต ๋ฐฐํฌ์ ํ์ํ netlify์ ๋ํ ์ ๋ณด๋ ๋ง์ด ์ป์ ์ ์์์ต๋๋ค.
์ ๊ฐ์๊ฐ HAN_MG ๋๊ป ๋์์ด ๋์๋ค๋ ๋คํ์ ๋๋ค. ๋ ์ข์ ๊ฐ์๋ก ์ฐพ์๋ต ์ ์์ผ๋ฉด ์ข๊ฒ ๋ค์~๐ ๊ฐ์ฌํฉ๋๋ค.
์๊ฐํ 5
โ
ํ๊ท ํ์ 5.0
5
์ค์ ๋ก ๋์์ด ๋๋ ์ ๋ณด๊ฐ ํ๋ถํด์ ๋ง์ด ๋ฐฐ์ ์ต๋๋ค.
์ ๊ฐ์๊ฐ ๋์์ด ๋ผ์ ๊ธฐ๋ถ์ด ์ข๋ค์! ์ข๊ฒ ๋ด์ฃผ์ ์ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค. ์ฆ๊ฑฐ์ด ํ ์ฃผ ๋์ธ์~๐
์๊ฐํ 4
โ
ํ๊ท ํ์ 5.0
5
ํ๋ก ํธ์ชฝ์ ๊ด์ฌ์ด ๋ง์์๋๋ฐ, ์งํ์ด ๊น๋ํด์ ๋จธ๋ฆฟ์์ ์์ ๋ฐํ๋ ๋๋์ด์๊ณ ๋ฌด์๋ณด๋ค ์ฌ๋ฐ๊ฒ ๋ดค์ต๋๋ค!
์ ๊ฐ์๋ฅผ ์ข๊ฒ ๋ด์ฃผ์ ์ ๊ฐ์ฌ๋๋ ค์~ ์ฌ๋ฏธ์๊ฒ ๋ณด์ จ๋ค๋ ๋คํ์ด๋ค์. ๊ฐ์๊ฐ ๋์์ด ๋์๊ธธ ๋ฐ๋ผ์~ ๊ฐ์ฌํฉ๋๋ค.๐
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๋ฌด๋ฃ