강의

N
챌린지

멘토링

N
클립

로드맵

BEST
개발 · 프로그래밍

/

프론트엔드

Svelte.js SPA 영화 검색 프로젝트

Svelte 기반의 SPA 영화 검색 사이트를 만들어 배포합니다!

(5.0) 수강평 30개

수강생 371명

  • HEROPY
SvelteSPA

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • 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

안녕하세요
입니다.

4,190

명

수강생

221

개

수강평

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% 수강 후 작성

    スベルトで作る映画検索プロジェクト頑張りました:) 実はこの講義を購入しておいて前の部分だけ少し見てから時間がかなりになりましたが、退社後本格的にフロント開発の勉強準備をしながら再度探すことになりました。 講師様を初めて知ったのはYouTubeスベルト講義でしたが、説明が簡単明瞭で、なんだろうか… ファーストキャンパスの超格差パッケージでvue.jsで作った映画検索サイトの例を進めてからこの講義を比較しながら進めてみましたが、やはりコード量が大幅に減ったことがわかります。大きな絵をもっと明瞭に捉えることができると思います。 そしてスベルトは本当に日々急速に発展していくフレームワークだと思います。 それでもreactやvueが多いですが、採用市場で少しずつスベルトラという言葉が出てくるのも見えますよㅎㅎ 今後フロント開発者になりたい方は、この講義だけでなく、パク・ヨンウン講師様のスベルト入門、完璧ガイド講義も積極的におすすめします。 ありがとうございます。

    • mysend님의 프로필 이미지
      mysend

      수강평 4

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      フロント側に興味が多かったのですが、進行がすっきりして頭の中にすっぽり詰まっている感じで、何よりもおもしろく見ました！

      • heropy
        지식공유자

        私の講義をよく見ていただきありがとうございます〜 面白く見たのは幸いですね。 講義が役立つことを願っています〜 ありがとう。😉

    • mdhyunjin님의 프로필 이미지
      mdhyunjin

      수강평 4

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      実際に役立つ情報が豊富でたくさん学びました。

      • heropy
        지식공유자

        私の講義が役に立ったので気分がいいですね！ よく見てくれてありがとう。 楽しい一週間を過ごしてください〜😊

    • hanmg님의 프로필 이미지
      hanmg

      수강평 10

      ∙

      평균 평점 4.9

      5

      100% 수강 후 작성

      良い講義ありがとうございます。 svelteだけでなく、実習展開に必要なnetlifyに関する情報もたくさん得られました。

      • heropy
        지식공유자

        私の講義がHAN_MGさんにお役に立てたことを嬉しく思います。 もっと良い講義で探してみることができたらいいですね〜😆 ありがとうございます。

    • the27920609님의 프로필 이미지
      the27920609

      수강평 13

      ∙

      평균 평점 5.0

      5

      100% 수강 후 작성

      最高です。とてもきれいな講義構成です

      • heropy
        지식공유자

        Jonさんこんにちは〜 力強い素敵な受講評ありがとうございます〜👍 楽しい一日をお過ごしください！🍀

    2025 추석맞이 감사할인 중 (7일 남음)

    ₩3,891

    23%

    ₩42,900

    HEROPY님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    Svelte.js [Core API] 完全ガイド강의 썸네일

    Svelte.js [Core API] 完全ガイド

    HEROPY

    21時間を超える分量の最高のSvelte.js講義！

    초급

    초급

    Svelte, Rollup, Sortable

    Svelte.js [Core API] 完全ガイド강의 썸네일

    Svelte.js [Core API] 完全ガイド

    HEROPY

    Svelte.js入門ガイド강의 썸네일

    Svelte.js入門ガイド

    HEROPY

    2時間を超える入門者のためのSvelte.js無料講義！

    초급

    초급

    Svelte

    Svelte.js入門ガイド강의 썸네일

    Svelte.js入門ガイド

    HEROPY

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!

    React Router 完全征服강의 썸네일

    React Router 完全征服

    woongjae

    ReactでSPAを作るすべての人にとって必須のReact Routerを一緒に征服してみましょう 💪

    초급

    초급

    react-router-dom, react-router, React

    React Router 完全征服강의 썸네일

    React Router 完全征服

    woongjae

    Svelteで始まるWebフロントエンド강의 썸네일

    Svelteで始まるWebフロントエンド

    Indie Coder

    世界的に関心が高まっているフロントエンドフレームワーク、Svelte（スベルト）の核心使用方法をまとめた基礎講義です。韓国のもっと多くの方がSvelteを簡単かつ便利に利用したいという気持ちで講義を作りました。

    초급

    초급

    Svelte

    Svelteで始まるWebフロントエンド강의 썸네일

    Svelteで始まるWebフロントエンド

    Indie Coder

    純粋関数型フロントエンド言語 Elm ガイド강의 썸네일

    純粋関数型フロントエンド言語 Elm ガイド

    hatemogi

    純粋な関数型プログラミングでフロントエンドWebアプリを作成するElmプログラミング言語ガイドのドキュメントを3時間で勉強します。

    초급

    초급

    elm, Functional Programming, SPA

    純粋関数型フロントエンド言語 Elm ガイド강의 썸네일

    純粋関数型フロントエンド言語 Elm ガイド

    hatemogi

    GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]강의 썸네일

    GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]

    Indie Coder

    次世代API制御技術であるGraphQLの基本と高度な使い方、そしてGraphQLで作っていく仮想のキオスクサービスを通じて、実際のプロジェクト体験を学びます。 コースは、2024年2月現在の最新バージョンであるapollo-server v4でコースを部分的に更新しました。

    초급

    초급

    GraphQL, Svelte, MongoDB

    GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]강의 썸네일

    GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]

    Indie Coder

    プロジェクトで簡単に学ぶSvelte（SvelteKit + Supabase）강의 썸네일

    プロジェクトで簡単に学ぶSvelte（SvelteKit + Supabase）

    Michael Kwon

    体系的な段階のプロジェクト実習と展開、ビルトインストア活用、SvelteKitとSupabaseでフルスタックアプリケーションまで一発で！

    초급

    초급

    Svelte, sveltekit, supabase

    プロジェクトで簡単に学ぶSvelte（SvelteKit + Supabase）강의 썸네일

    プロジェクトで簡単に学ぶSvelte（SvelteKit + Supabase）

    Michael Kwon

    Svelte本番講義 - 数独を作る강의 썸네일

    Svelte本番講義 - 数独を作る

    beomy

    Svelte、Express、JWT、MongoDBを使用してWebゲームを作成できます。 FrontEndとBackEndの両方を扱ってみたい方へようこそ！

    중급이상

    중급이상

    Svelte, Express, MongoDB

    Svelte本番講義 - 数独を作る강의 썸네일

    Svelte本番講義 - 数独を作る

    beomy