์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

Svelte.js SPA ์˜ํ™” ๊ฒ€์ƒ‰ ํ”„๋กœ์ ํŠธ

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

 


Specs

Svelte
Snowpack
SPA Router
OMDb API
Netlify Hosting with GitHub(CD)
Netlify Serverless Functions


Packages

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 ๋ฌธ์„œ.

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

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

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๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • shk72301233๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    shk72301233

    ์ˆ˜๊ฐ•ํ‰ 7

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    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.

    • hanmg๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      hanmg

      ์ˆ˜๊ฐ•ํ‰ 10

      โˆ™

      ํ‰๊ท  ํ‰์  4.9

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      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.

      • heropy
        ์ง€์‹๊ณต์œ ์ž

        I'm glad that my lecture was helpful to HAN_MG. I hope I can come back with a better lecture~๐Ÿ˜† Thank you.

    • mysend๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      mysend

      ์ˆ˜๊ฐ•ํ‰ 4

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      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!

      • heropy
        ์ง€์‹๊ณต์œ ์ž

        Thank you for liking my lecture~ I'm glad you enjoyed it. I hope the lecture was helpful~ Thank you.๐Ÿ˜‰

    • mdhyunjin๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      mdhyunjin

      ์ˆ˜๊ฐ•ํ‰ 4

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      I learned a lot from the wealth of information that was actually helpful.

      • heropy
        ์ง€์‹๊ณต์œ ์ž

        I'm glad my lecture was helpful! Thank you so much for your kind words. Have a nice week~๐Ÿ˜Š

    • the27920609๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      the27920609

      ์ˆ˜๊ฐ•ํ‰ 13

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      It's the best. It's a very clean lecture structure.

      • heropy
        ์ง€์‹๊ณต์œ ์ž

        Hi Jon~ Thank you for the wonderful and encouraging class review~๐Ÿ‘ Have a nice day!๐Ÿ€

    HEROPY๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

    ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ๋น„์Šทํ•œ ๊ฐ•์˜

    ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    โ‚ฉ42,900