Svelte REST-APIプロジェクト

この講義は、私が執筆した「スベルトで始まるWebフロントエンド」という本の後半にSLOGプロジェクトを作成する部分についての映像講義です。本で少し足りなかった部分を補完し、もっと多くの方がSvelteというフロントエンドフレームワークに関心を持つことを望む心でこの講義を設けました。

（4.9）受講レビュー 15件

受講生 1,007名

Indie Coder

스벨트

svelte

3시간 만에 완강할 수 있는 강의 ⏰

저자 직강

restapi

Svelte

REST API

学習した受講者のレビュー

こんなことが学べます

Svelte中級の使い方
Rest APIを使用した通信方法
Axiosを用いた効率的なサーバ通信方法
infinite scroll（無限スクロール）を使用したページネーションの実装
JWTトークンを利用した認証方法
フォーム検証

浮上するFE大勢スベルト(Svelte)
中級開発者に必要なコアをすばやく！

Svelteで構築する必須要素

Svelteの基本的な使い方を学んだら、以下は当然実際のプロジェクトです。 Svelte REST-APIプロジェクト講義を通じて、実際のプロジェクトを進める基礎経験を築きましょう！

このレッスンでは、Svelteを使用してCRUD：サーバーにデータを書き（Create）、読み取り（Read）、変更（Update）、削除（Delete）する方法を学びます。ここで、JWTトークンを利用した認証方法や無限スクロールを利用したページネーションなどフロントエンドでプロジェクトを進行するために不可欠で知っておくべき要素を学習できます。

_{投稿作成ページ}

_{コメントページ}

_{ログインページ}

これらのことを学びます✒️

スベルト本作者直講！

この講義は、「スベルトで始まるWebフロントエンド」の本の最後の章を映像にした講義です。
（選手の知識：HTML / CSSとJavaScriptの基礎、Svelteの基礎）

フロントエンドの開発をしながら最も多く行うことは、おそらくREST APIと通信するサービスを作成することです。サーバーからデータを要求し、要求されたデータを画面に表示し、データの追加、修正、削除（CRUD）などを要求する過程は、フロントエンド開発をする誰でも必ず知るべき要素です。

このレッスンでは、フロントエンドの観点からこれらのREST API必須の使用法について説明します。

✅Svelte中級の使い方
✅ Rest APIを使用した通信
✅ Axiosを使用した効率的なサーバー通信
✅無限スクロール（Infinite Scroll）を使用したページネーションの実装
✅ JWTトークンを使用した認証
✅フォーム検証、Routerの使い方

REST APIデータ通信、各種解決方法...
中級FE開発者ならぜひ知っておくべき内容！

REST API必須の使用法に加えて、SvelteのStoreを活用してリストに変化があるときにすべてのデータを再ロードするのではなく、部分修正による通信効率を高める方法などの悩みから、現在広く使われている無限スクロール方式のUIを実装する際に発生する可能性のある問題やその解決方法なども用意されています。

なお、JWTを利用した認証方法とアプリの完成度を高めるためのフォーム検証、より直感的な日付ビューモード、その独立して再利用できるコンポーネントの作成などを通じて、フロントエンド開発の初級を超えて中級開発者になったときに一度苦労しなければならない部分を学習できるようになります。一緒に挑戦しましょう！ (Svelte、Axios、Yup、Datejs)

こんな方におすすめです🙆‍♀️

_{フロントエンド開発に興味がある方}

_{ウェブでもっと早く何かをしたい人}

_{HTML、JavaScriptの基本を介して何かを実装したい人}

_{中級 FE 開発者として成長したい初心者のフロントエンド開発者}

フロントエンドの授業を終えたら、そのサービスのAPIサーバーを作成する過程を聞くことをおすすめします。最新のNode.jsテクノロジであるFastify、Prisma、およびTypescriptを使用するバックエンドプロセスを準備しました。

コースリンク： https://inf.run/mpCv8

Q&A 💬

Q. Svelteの基本的な使い方を知る必要がありますか？

Svelteの基礎は、私の他の無料講義を通じて1〜2時間で学習することができます。その講義を最初に受講してから、この講義をさらに聞くことをお勧めします。

Q. 開発環境はどうなりますか？

macOS、Windows、LinuxなどNode.jsをインストールできるどのPCでも、開発環境に必要なプログラムをインストールして進めることができます。

Q. 本「スベルトで始まるウェブフロント」でのプロジェクト内容とまったく同じですか？

プロジェクト自体は同じですが、本の内容の大部分を補完して映像を作りました。 JWTトークンを利用した認証方法とスクロールに関連する部分を一つの独立したコンポーネントに分離する過程などが追加されたので、もし本を既に学習した方も一度聞いてみることをお勧めします。

💾授業参考資料

レッスンで使用されているパッケージのリストと参考になるサイトとプロジェクトコードのgitアドレスがまとめられています。
フロントエンド結果リンク
デザイン結果ソースリンク（HTML + CSS）
バックエンドサーバーソースリンク

こんな方に
おすすめです

学習対象は
誰でしょう？

フロントエンド開発に興味がある方
ウェブでもっと早く何かをしたい人
HTML、Javascriptの基本的な使い方を身につけた後、これを通じて何かを実装してみたい方

前提知識、
必要でしょうか？

HTML、CSSの基礎知識
Javascriptの基本
Svelteの基礎

こんにちは
です。

2,463

受講生

受講レビュー

回答

4.8

講座評価

講座

2000년도 중반부터 본격적으로 웹개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있습니다. 약5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 것에 대한 많은 경험과 고민을 했습니다.

현재는 개발 업무와 함께 개발자들에게 도움이 될만한 웹관련 분야의 새로운 기술을 찾고 강좌와 책을 통해 공유하고 있습니다.

현) 프리랜서

전) (주) 비즈플러그 전략솔루션 사업부 팀장

전) (주) 퍼니몽키스 위니스토리 서비스 개발 팀장

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

강좌 목록

출간도서

yes24, 교보문고, 알라딘

カリキュラム

全体

20件 ∙ (3時間 14分)

セクション 1．Svelte REST-APIプロジェクト

20件 ∙ (3時間 14分)

1. SLOGプロジェクトの説明
02:44
2. APIサーバーのインストールと使い方の学習
08:50
3. プロジェクトの作成とコンポーネントの配置
18:37
4. ルーターの設定
08:40
5. axiosを使用したサーバー通信の設定
07:00
6. ストアの配置
03:20
7. 認証の実装 - store
12:47
8. 認証の実装 - コンポーネント
17:09
9. 投稿リストの実装
21:24
10. 投稿作成の実装
06:12
11. 投稿の編集と削除の実装
16:54
12. コメント関連機能の実装
20:55
13. 'いいね'機能の実装
06:49
14. ビューモード変更の実装
07:51
15. アプリの完成度を上げる1 - フォーム検証
11:05
16. アプリの完成度を上げる2 - 日付を見る
03:42
17. アプリの完成度を上げる3 - URLによるビューモードの変更
04:50
18. アプリの完成度を上げる4 - 投稿の重複排除
03:02
19. アプリの完成度を高める5-ページネーションのコンポーネント化
11:36
20. 仕上げ
01:28

講座掲載日:

最終更新日:

受講レビュー

全体

15件

4.9

15件の受講レビュー

ozacgyo
受講レビュー 2
∙
平均評価 4.0
4
100% 受講後に作成
임상훈
受講レビュー 14
∙
平均評価 5.0
5
30% 受講後に作成
짧고 간단간단하게 의식의 흐름대로 보다보면 기본틀이 잡히는 강의라고 생각됩니다. 좋아요!
맛탱
受講レビュー 5
∙
平均評価 5.0
5
60% 受講後に作成
김경태
受講レビュー 2
∙
平均評価 5.0
5
30% 受講後に作成
스벨트를 처음 접하기에 좋은 강의인거 같아요~^^
ataraxia808
受講レビュー 3
∙
平均評価 5.0
5
30% 受講後に作成
최고입니다..... 백엔드에 대해 약간만 알고 있다면 아! 이게 이렇게 통신이 되는구나 하고 알 수 있있습니다. 정말감사드립니다..

無料

Indie Coderの他の講座

知識共有者の他の講座を見てみましょう！

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

초급

GraphQL, Svelte, MongoDB

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

초급

Node.js, TypeScript, Prisma

차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

Indie Coder

Svelte로 시작하는 웹 프런트엔드

Indie Coder

세계적으로 관심이 높아지고 있는 프런트엔드 프레임워크, Svelte(스벨트)의 핵심 사용방법을 정리한 기초 강의입니다. 한국의 좀 더 많은 분들이 Svelte를 쉽고 편리하게 이용하기를 바라는 마음에서 강의를 만들었습니다.

초급

Svelte

Svelte로 시작하는 웹 프런트엔드

Indie Coder

만들면서 배우는 Svelte

Indie Coder

최신 프론트엔드 프레임워크 Svelte(스벨트)를 배워보는 강좌입니다. Svelte 기본 사용법을 익힌 후 Todo 앱을 함께 만들면서 실제 프로젝트에서 어떻게 Svelte를 사용할 수 있는지 익혀보는 강좌입니다.

초급

Svelte

만들면서 배우는 Svelte

Indie Coder

似ている講座

同じ分野の他の講座を見てみましょう！

Svelte.js [Core API] 완벽 가이드

HEROPY

21시간이 넘는 분량의 최고의 Svelte.js 강의!

초급

Svelte, Rollup, Sortable

Svelte.js [Core API] 완벽 가이드

HEROPY

Svelte 입문 강의 - A부터 Z까지

이효범(Beomy)

React와 Vue, Angular 프론트엔드 3대장의 자리를 위협하는 Svelte 입문 강의입니다. Svelte 공식 문서를 토대로 Svelte 문법을 A부터 Z까지 모두 다룹니다.

초급

Svelte

Svelte 입문 강의 - A부터 Z까지

이효범(Beomy)

Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기

영넨

Spring Boot와 React.js로 초간단 게시판을 손쉽게 구축하는 실전 강의! 이 강의는 이론은 덜고, 실습에 집중하여 빠르게 완성하는 웹 애플리케이션 개발 과정을 담았습니다.

입문

Spring Boot, react.js, JPA

Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기

영넨

스프링부트를 이용한 웹 프로그래밍: 웹사이트 이렇게 만드는 거예요!

블스

캘린더(일정관리)를 만들면서 배우는 스프링 웹 프로그래밍! 짤 예제가 아닌 바로 써먹을 수 있는 예제로 스프링 완전 정복해요~

초급

Spring Boot, Spring Security, JPA

스프링부트를 이용한 웹 프로그래밍: 웹사이트 이렇게 만드는 거예요!

블스

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

Michael Kwon

체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!

초급

Svelte, sveltekit, supabase

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

Michael Kwon

옆집 개발자와 같이 진짜 이해하며 만들어보는 첫 Spring Boot 프로젝트

송아지할때송아김송아입니다.

[웹개발이 처음인 사람만 드루와] 차근차근 쉽게 만들어보는 Spring Boot(스프링 부트) REST API

초급

Spring Boot, Spring, Java

옆집 개발자와 같이 진짜 이해하며 만들어보는 첫 Spring Boot 프로젝트

송아지할때송아김송아입니다.

스프링부트를 활용한 RESTFUL API 만들기(AWS,EKS)

멍슨상

초급자를 위한 백엔드 프로그래밍 웹개발 강의입니다.

초급

Spring Boot, REST API, restful

스프링부트를 활용한 RESTFUL API 만들기(AWS,EKS)

멍슨상

Java 마이크로서비스(MSA) 프로젝트 실습

휴먼넷

실무에 바로 적용 가능한 Java 기반 마이크로서비스 아키텍처(MSA) 실습 강의! 이 강의는 Java 개발자를 위한 마이크로서비스 프로젝트 중심 실습 강의입니다. 단순 이론에 그치지 않고, 실제 서비스 개발 흐름을 따라가며 마이크로서비스 아키텍처의 핵심 원리와 구현 방식을 실습을 통해 익힐 수 있습니다.

중급이상

Java, Spring, REST API

Java 마이크로서비스(MSA) 프로젝트 실습

휴먼넷

Svelte 실전 강의 - 스도쿠 만들기

이효범(Beomy)

Svelte, Express, JWT, MongoDB를 사용해서 웹 게임을 만들어 볼 수 있습니다. FrontEnd와 BackEnd 모두 다루어 보고 싶으신 분들 환영합니다!

중급이상

Svelte, Express, MongoDB

Svelte 실전 강의 - 스도쿠 만들기

이효범(Beomy)

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

초급

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

초급

GraphQL, Svelte, MongoDB

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기

Neo

누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기 Springboot 로 CRUD 서버를 개발하고 React로 나만의 게시판을 만들어보세요!

초급

React, Kotlin, REST API

누구보다 빠르게 배우는 Springboot + React RestAPI 게시판 만들기

Neo

Svelte REST-APIプロジェクト

学習した受講者のレビュー

こんなことが学べます

Svelteで構築する必須要素

これらのことを学びます✒️

スベルト本作者直講！

REST APIデータ通信、各種解決方法...中級FE開発者ならぜひ知っておくべき内容！

こんな方におすすめです🙆‍♀️

Q&A 💬

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

강좌 목록

출간도서

カリキュラム

受講レビュー

Indie Coderの他の講座

似ている講座

REST APIデータ通信、各種解決方法...
中級FE開発者ならぜひ知っておくべき内容！

こんな方に
おすすめです

こんにちは
です。