Svelte.js Beginner's Guide
heropy
Free Svelte.js course for beginners over 2 hours long!!
์ด๊ธ
Svelte
Svelte ๊ธฐ๋ฐ์ SPA ์ํ ๊ฒ์ ์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ฐฐํฌํฉ๋๋ค!
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,146
๋ช
์๊ฐ์
217
๊ฐ
์๊ฐํ
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
I completed the movie search project using Svelte :) Actually, I bought this course and watched only the beginning part, but it's been quite a while since I've been preparing to study front-end development in earnest after quitting my job, so I looked it up again. I first got to know the instructor through the YouTube Svelte course, and the explanations were simple and clear, and I guess... since he was a designer, he was really excellent at making it so that anyone could understand even if they had little basic knowledge, as long as they followed the explanations. I compared this course with the movie search site example made with Vue.js in the Fast Campus Super Gap package, and I could see that the amount of code was greatly reduced, and since the complex store concept of Vue was completely eliminated, I think I could grasp the big picture of the project design more clearly. And Svelte seems to be a framework that is developing rapidly day by day. Daum's home screen is already using Svelte, so I think it's more promising in the future because it has no shortcomings that can be used in practice. There are still a lot of react and vue, but I see the word svelte coming out little by little in the job market. ใ ใ If you want to become a front-end developer in the future, I highly recommend not only this lecture, but also instructor Park Young-woong's svelte introduction and complete guide lectures :D Thank you.
์๊ฐํ 10
โ
ํ๊ท ํ์ 4.9
5
Thank you for the great lecture. I was able to get a lot of information about not only svelte but also netlify, which is necessary for practical deployment.
I'm glad that my lecture was helpful to HAN_MG. I hope I can come back with a better lecture~๐ Thank you.
์๊ฐํ 4
โ
ํ๊ท ํ์ 5.0
5
I was very interested in the front end, and the progression was so clean that it stuck in my head, and above all, I enjoyed it!
Thank you for liking my lecture~ I'm glad you enjoyed it. I hope the lecture was helpful~ Thank you.๐
์๊ฐํ 13
โ
ํ๊ท ํ์ 5.0
5
It's the best. It's a very clean lecture structure.
Hi Jon~ Thank you for the wonderful and encouraging class review~๐ Have a nice day!๐
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
โฉ42,900