강의

멘토링

로드맵

BEST
Programming

/

Front-end

Svelte.js SPA movie search project

We're building and deploying a Svelte-based SPA movie search site!

(5.0) 30 reviews

371 learners

  • HEROPY
Svelte
SPA

Reviews from Early Learners

What you will learn!

  • You can build a SPA (Single Page Application) with Svelte.js!

  • You can utilize the advantages of SPA and compensate for its disadvantages!

  • You can easily configure a backend API using Serverless Functions!

Using Svelte , here's an example of creating your own SPA !

Check out other Svelte courses too!
"The Complete Guide to Svelte.js Core API"
"Svelte.js Beginner's Guide"


Let's get started!

Let's create a SPA (Single Page Application) example using Svelte.js!
You can use routers to separate pages and apply various features such as transition effects and scroll recovery.

Using SF (serverless function) without the burden of building a separate server,
Quickly create backend APIs and easily manage them.
Solve security issues, a drawback of SPA, quickly and easily!

Snowpack is the most up-to-date build tool,
It can drastically reduce development build times.
You can develop in a more comfortable environment!

Use Netlify's continuous delivery (CD).
As soon as you upload to the GitHub repository, the site will be automatically deployed.
No need to waste time deploying your site!


please refer to this!

This lecture requires prior knowledge, but I will explain it as simply as possible.
After building a solid foundation in Svelte with the previously released ' Svelte.js Core API Complete Guide ',
It would be even better if you listen to this lecture.


Let's create a SPA site that can search for real movies using the OMDb API!
Configure your backend API with Netlify Serverless Functions,
You can provide search functionality to your users without exposing your 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


Any questions?

If you have any questions during the course, please use the Questions & Answers page.
We will respond as quickly as possible.

If you are concerned about taking the course or have any other questions before taking the course,
Please use the inquiry page before registering for the course .


Svelte documentation.

If you need Korean documentation for Svelte API,
Check out the post 'Svelte.js Complete Guide (Renew)'.
https://heropy.blog/2019/09/29/svelte


announcement!

20 20.12.24
Added the next part!
Be sure to watch the full lecture examples before you start!
- 2-1. Matching the lecture example module version

Recommended for
these people

Who is this course right for?

  • Anyone who needs examples of using Svelte.js!

  • For those preparing to create a SPA site!

  • Anyone who wants to experience Netlify Serverless Functions!

Need to know before starting?

  • HTML

  • CSS(SCSS)

  • JS

  • Svelte

Hello
This is

4,188

Learners

221

Reviews

162

Answers

4.9

Rating

3

Courses

   

안녕하세요~ 반갑습니다!
저는 현재 작은 스타트업에서 기업 관리 솔루션을 개발하고 있는 프론트엔드 개발자 박영웅입니다.

HEROPY 기술 블로그를 운영하고 있고,
그 외 기업 출강이나 온/오프라인 강의 활동도 하고 있습니다.

Blog: https://heropy.blog
Youtube: https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

Email: thesecon@gmail.com

    

Curriculum

All

49 lectures ∙ (7hr 46min)

Published: 
Last updated: 

Reviews

All

30 reviews

5.0

30 reviews

  • jude님의 프로필 이미지
    jude

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    스벨트로 만드는 영화검색 프로젝트 완강했습니다 :) 사실 이 강의를 구입해놓고 앞부분만 조금 보고나서 시간이 꽤 됐는데, 퇴사 후 본격적으로 프론트 개발 공부 준비를 하면서 다시 찾아보게 됐어요. 강사님을 처음 알게된건 유튜브 스벨트 강의 였는데, 설명이 간단 명료하고, 뭐랄까... 디자이너 출신이셔서 그런지 기초 지식이 거의 없어도 설명만 잘 따라 오면 누구나 이해할 수 있도록 진행하는 것이 정말 탁월했어요. 패스트캠퍼스의 초격차 패키지에서 vue.js로 만든 영화검색 사이트 예제를 진행하고나서 이 강의를 비교해가면서 진행해봤는데 역시 코드량이 많이 줄어든 것을 볼 수 있고, vue의 복잡한 store 개념이 아예 빠져버리니까 프로젝트 설계의 큰 그림을 좀 더 명료하게 잡을 수 있는거 같아요. 그리고 스벨트는 정말 나날이 빠르게 발전해나가는 프레임워크인거 같아요, daum 첫 화면도 이미 스벨트를 쓰고 있어서 실무에 써도 될만큼 부족함이 없다는 것이 앞으로 더욱 기대가 되는거 같아요. 여전히 react나 vue가 많긴 하지만 채용 시장에서 조금씩 스벨트라는 단어가 나오는 것도 보이구요 ㅎㅎ 앞으로 프론트 개발자가 되고 싶은 분들이라면 이 강의 뿐만 아니라 박영웅 강사님의 스벨트 입문, 완벽 가이드 강의도 적극 추천 드립니다 :D 감사합니다.

    • mysend12님의 프로필 이미지
      mysend12

      Reviews 4

      Average Rating 5.0

      5

      100% enrolled

      프론트쪽에 관심이 많았었는데, 진행이 깔끔해서 머릿속에 쏙쏙 박히는 느낌이었고 무엇보다 재밌게 봤습니다!

      • HEROPY
        Instructor

        제 강의를 좋게 봐주셔서 감사드려요~ 재미있게 보셨다니 다행이네요. 강의가 도움이 되었길 바라요~ 감사합니다.😉

    • 정현진 Jeong님의 프로필 이미지
      정현진 Jeong

      Reviews 4

      Average Rating 5.0

      5

      100% enrolled

      실제로 도움이 되는 정보가 풍부해서 많이 배웠습니다.

      • HEROPY
        Instructor

        제 강의가 도움이 돼서 기분이 좋네요! 좋게 봐주셔서 정말 감사합니다. 즐거운 한 주 되세요~😊

    • HAN_MG님의 프로필 이미지
      HAN_MG

      Reviews 10

      Average Rating 4.9

      5

      100% enrolled

      좋은 강의 감사합니다. svelte뿐만 아니라 실습 배포에 필요한 netlify에 대한 정보도 많이 얻을 수 있었습니다.

      • HEROPY
        Instructor

        제 강의가 HAN_MG 님께 도움이 되었다니 다행입니다. 더 좋은 강의로 찾아뵐 수 있으면 좋겠네요~😆 감사합니다.

    • Jon님의 프로필 이미지
      Jon

      Reviews 13

      Average Rating 5.0

      5

      100% enrolled

      최고입니다. 매우 깔끔한 강의구성입니다

      • HEROPY
        Instructor

        Jon 님 안녕하세요~ 힘이 나는 멋진 수강평 감사합니다~👍 즐거운 하루 보내세요!🍀

    $33.00

    HEROPY's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!