Svelte.js 입문 가이드
HEROPY
2시간이 넘는 입문자를 위한 Svelte.js 무료 강의!!
초급
Svelte
学習した受講者のレビュー
こんなことが学べます
Svelte.jsのSPA（シングルページアプリケーション）を設定できます！
SPAのメリットを活かしてデメリットを補うことができますよ！
Serverless Functionsを使って簡単にバックエンドAPIを設定できます！
スベルト活用、自分で作るSPAの例として！
.jpg?w=960)
他のSvelte講義も参考にしてください！
「Svelte.js Core API 完全ガイド」
「Svelte.js入門ガイド」
スタートしながら！
Svelte.jsを使ってシングルページアプリケーション（SPA）の例を作成しましょう！
ルーターを使用してページを区別し、トランジション効果やスクロールリカバリなど、さまざまな機能を適用できます。
負担のない別途のサーバー構築なしでSF（サーバーレス関数）を使用し、
すばやくバックエンドAPIを作成して簡単に管理できます。
SPAの欠点であるセキュリティ問題をすばやく簡単に解決しましょう！
Snowpackは最新のビルドツールで、
開発ビルド時間を大幅に短縮できます。
より快適な環境で開発できますよ！
NetlifyのCD（継続的な配布）を使用してください。
GitHubリポジトリにアップロードするとすぐにサイトが自動的に展開されます。
サイトの配布に時間がかかる必要はありません！
参考にしてください！
今回の講義は選手知識が必要な講義ですが、できるだけ簡単に解いて説明しています。
先にリリースした「 Svelte.js Core API完全ガイド」でSvelte Basicを刻んだ後
本講義を聞くとさらに良いです。
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 完全ガイド」の投稿をご覧ください。
https://heropy.blog/2019/09/29/svelte
お知らせ！
20 20.12.24
次のパーツを追加しました！
完全なレッスンの例を始める前にぜひご覧ください！
- 2-1.レッスンの例モジュールのバージョンを一致させる
こんな方に
おすすめです
学習対象は
誰でしょう？
Svelte.jsの活用例が必要な方！
SPAサイト制作をご準備される方！
Netlify Serverless Functionsを体験したい方！
前提知識、
必要でしょうか？
HTML
CSS（SCSS）
JS
Svelte
4,185
受講生
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件の受講レビュー
jude受講レビュー 7
∙
平均評価 5.0
5
100% 受講後に作成스벨트로 만드는 영화검색 프로젝트 완강했습니다 :) 사실 이 강의를 구입해놓고 앞부분만 조금 보고나서 시간이 꽤 됐는데, 퇴사 후 본격적으로 프론트 개발 공부 준비를 하면서 다시 찾아보게 됐어요. 강사님을 처음 알게된건 유튜브 스벨트 강의 였는데, 설명이 간단 명료하고, 뭐랄까... 디자이너 출신이셔서 그런지 기초 지식이 거의 없어도 설명만 잘 따라 오면 누구나 이해할 수 있도록 진행하는 것이 정말 탁월했어요. 패스트캠퍼스의 초격차 패키지에서 vue.js로 만든 영화검색 사이트 예제를 진행하고나서 이 강의를 비교해가면서 진행해봤는데 역시 코드량이 많이 줄어든 것을 볼 수 있고, vue의 복잡한 store 개념이 아예 빠져버리니까 프로젝트 설계의 큰 그림을 좀 더 명료하게 잡을 수 있는거 같아요. 그리고 스벨트는 정말 나날이 빠르게 발전해나가는 프레임워크인거 같아요, daum 첫 화면도 이미 스벨트를 쓰고 있어서 실무에 써도 될만큼 부족함이 없다는 것이 앞으로 더욱 기대가 되는거 같아요. 여전히 react나 vue가 많긴 하지만 채용 시장에서 조금씩 스벨트라는 단어가 나오는 것도 보이구요 ㅎㅎ 앞으로 프론트 개발자가 되고 싶은 분들이라면 이 강의 뿐만 아니라 박영웅 강사님의 스벨트 입문, 완벽 가이드 강의도 적극 추천 드립니다 :D 감사합니다.
￥5,026
HEROPYの他の講座
知識共有者の他の講座を見てみましょう！
![Svelte.js [Core API] 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/course-325523-cover/f70444f1-ed0a-4b46-b5ec-39c250885e9a?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
