Svelte REST-APIプロジェクト

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

（5.0）受講レビュー 12件

受講生 983名

holocoding

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

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. 本「スベルトで始まるウェブフロント」でのプロジェクト内容とまったく同じですか？

プロジェクト自体は同じですが、本の内容のうちかなりの部分を補完して映像を作成しました。ちょうど聞くことをお勧めします。

💾授業参考資料

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

こんな方に
おすすめです！

学習対象は
誰でしょう？

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

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

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

こんにちは
です。

2,383

受講生

受講レビュー

回答

4.9

講座評価

講座

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

講座掲載日:

最終更新日:

受講レビュー

全体

12件

5.0

12件の受講レビュー

김경태
受講レビュー 2
∙
平均評価 5.0
5
30% 受講後に作成
스벨트를 처음 접하기에 좋은 강의인거 같아요~^^
ataraxia808
受講レビュー 3
∙
平均評価 5.0
5
30% 受講後に作成
최고입니다..... 백엔드에 대해 약간만 알고 있다면 아! 이게 이렇게 통신이 되는구나 하고 알 수 있있습니다. 정말감사드립니다..
슈퍼아스라다
受講レビュー 4
∙
平均評価 4.0
5
100% 受講後に作成
좋은강의 이네요
CO7S
受講レビュー 2
∙
平均評価 5.0
5
70% 受講後に作成
디로니
受講レビュー 1
∙
平均評価 5.0
5
30% 受講後に作成

holocodingの他の講座

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

차세대 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

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

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

초급

•

Node.js

TypeScript

Prisma

REST API

fastify

5시간 19분

이런 걸 배울 수 있어요

Node.js 백엔드 서버

REST API

Fastify

Prisma

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

Indie Coder

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

초급

Svelte

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

Indie Coder

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

초급

•

Svelte

1시간 6분

이런 걸 배울 수 있어요

Svelte (스벨트)

웹 프런트엔드 기초

보러가기

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

Indie Coder

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

초급

GraphQL, Svelte, MongoDB

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

Indie Coder

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

초급

•

GraphQL

Svelte

MongoDB

Apollo

10시간 28분

이런 걸 배울 수 있어요

Graphql

Apollo

MongoDB

Svelte

만들면서 배우는 Svelte

Indie Coder

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

초급

Svelte

만들면서 배우는 Svelte

Indie Coder

만들면서 배우는 Svelte

초급

•

Svelte

5시간 7분

이런 걸 배울 수 있어요

Svelte 기본 사용법

Svelte를 이용해 Todo 앱을 만들면서 실제 사용법 학습

개발한 Todo 앱을 Store를 통해 실프로젝트에 가깝게 리팩토링

Routify를 이용한 Router 기능

似ている講座

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

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

HEROPY

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

초급

Svelte, Rollup, Sortable

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

HEROPY

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

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

초급

•

Svelte

Rollup

Sortable

21시간 18분

이런 걸 배울 수 있어요

최신 Svelte.js의 Core API를 기초부터 탄탄하게 학습해요!

자바스크립트 데이터의 불변성(Immutable)과 가변성(Mutable)에 대해서 이해할 수 있어요!

자바스크립트의 비동기에 대해서 이해하고 여러 비동기 패턴을 학습해요!

Rollup.js의 기본 구성을 이해하고 추가 구성으로 실제 프로젝트를 만들어요!

만들면서 배우는 Svelte

Indie Coder

초급

Svelte

만들면서 배우는 Svelte

Indie Coder

만들면서 배우는 Svelte

초급

•

Svelte

5시간 7분

이런 걸 배울 수 있어요

Svelte 기본 사용법

Svelte를 이용해 Todo 앱을 만들면서 실제 사용법 학습

개발한 Todo 앱을 Store를 통해 실프로젝트에 가깝게 리팩토링

Routify를 이용한 Router 기능

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

Michael Kwon

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

초급

Svelte, sveltekit, supabase

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

Michael Kwon

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

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

초급

•

Svelte

sveltekit

supabase

8시간 23분

이런 걸 배울 수 있어요

홈페이지에서 캐주얼 게임, 풀스택 애플리케이션 까지 다양한 주제의 프로젝트를 통해 프론트엔드의 핵심 기능들을 습득하고 문제해결 능력을 키웁니다.

Svelte의 간결하고 직관적인 문법을 사용하여 컴포넌트 기반 아키텍처를 구축하고 상태 관리, 이벤트 처리, 라우팅 등의 주요 주제를 다룹니다.

Vite를 통해 프로젝트 생성 및 빌드를 하고 깃허브와 Vercel을 통해 쉽게 웹에 배포합니다.

빌트인 스토어를 통해 전역 상태관리를 쉽게 다루는 방법을 습득할 수 있습니다.

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

개발자Park

외국기업,대기업에서 주로 사용하는 ASP.NET Core를 다룹니다.

초급

ASP.NET Core, C#, MVC

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

개발자Park

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

외국기업,대기업에서 주로 사용하는 ASP.NET Core를 다룹니다.

초급

•

ASP.NET Core

MVC

REST API

EF Core

MSSQL

아키텍처

7시간 44분

•

Update 2025.06.28

이런 걸 배울 수 있어요

ASP.NET Core MVC

ASP.NET Core

REST API

ADO.NET

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

BJ SUB

Java SpringCloud와 여러 오픈소스를 연동하여 마이크로서비스를 구축하는 세미 프로젝트를 경험해보실 수 있습니다. 마이크로서비스 구축 경험을 해보고 싶으시다면 이 강의를 추천할게요!

중급이상

Java, MSA, Spring Boot

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

BJ SUB

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

중급이상

•

Java

MSA

Spring Boot

Spring

REST API

6시간 38분

•

Update 2025.07.10

이런 걸 배울 수 있어요

Prometheus

Grafana

GitLab

마이크로서비스

Django REST Framework 핵심사항

김석훈

"DRF, 이것만은 알고 사용하자." 클래스형뷰의 1호 강사로서, DRF의 클래스를 제대로 활용하고, 상속과 오버라이딩을 정확하게 배울 수 있는 강의입니다. 핵심 기본 사항을 제대로 학습해봐요!

초급

Django, REST API

Django REST Framework 핵심사항

김석훈

Django REST Framework 핵심사항

초급

•

Django

REST API

3시간 24분

이런 걸 배울 수 있어요

DRF generic view / router / viewset 활용 및 오버라이딩 방법

DRF serializer 활용 및 사용하는 이유

Django와 DRF 차이점

DRF serializer에 대한 새로운 방법

Open API 사용 with 파이썬

쌤즈(SSAMZ)

Open API와 파이썬을 활용하여 업무 효율성을 향상시키는 데 필요한 기술과 노하우를 학습할 수 있습니다.

입문

Python, REST API, OAuth

Open API 사용 with 파이썬

쌤즈(SSAMZ)

Open API 사용 with 파이썬

Open API와 파이썬을 활용하여 업무 효율성을 향상시키는 데 필요한 기술과 노하우를 학습할 수 있습니다.

입문

•

Python

REST API

OAuth

urllib

requests

5시간 27분

이런 걸 배울 수 있어요

Open API 이해

공공데이터와 네이버 활용하는 실전 프로젝트 수행

업무 효율성 향상과 자동화

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

영넨

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

입문

Spring Boot, react.js, JPA

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

영넨

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

입문

•

Spring Boot

react.js

JPA

MySQL

REST API

2시간 59분

•

Update 2025.07.09

이런 걸 배울 수 있어요

게시판 만들기 (CRUD)

Spring Boot를 사용한 API 서버 제작

간단한 RestApi 시스템

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

Jiwoon Jeong

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

초급

HTML/CSS, JavaScript, REST API

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

Jiwoon Jeong

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

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

초급

•

HTML/CSS

JavaScript

REST API

MySQL

AWS

Git

GitHub

9시간 7분

이런 걸 배울 수 있어요

웹 프론트엔드: HTML, CSS, JS

Open API: 카카오맵 API

서버&벡엔드: Nginx + Express.js: Rest API

데이터베이스: MySQL, DB설계와 SQL

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

Indie Coder

초급

GraphQL, Svelte, MongoDB

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

Indie Coder

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

초급

•

GraphQL

Svelte

MongoDB

Apollo

10시간 28분

이런 걸 배울 수 있어요

Graphql

Apollo

MongoDB

Svelte

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

이효범(Beomy)

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

중급이상

Svelte, Express, MongoDB

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

이효범(Beomy)

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

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

중급이상

•

Svelte

Express

MongoDB

Mongoose

7시간 51분

이런 걸 배울 수 있어요

Svelte를 사용해서 스도쿠 게임을 만들어요

Express로 Node.JS를 학습해요

MongoDB, JWT, Lodash, Axios, Crypto 등의 라이브러리 사용법을 배워요

Heroku 서버에 실제 웹 서비스를 배포할 수 있어요

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

초급

REST API, GraphQL, React

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

초급

•

REST API

GraphQL

React

3시간 37분

이런 걸 배울 수 있어요

React

로컬 데이터베이스 및 서버 만들기

REST API

GraphQL

Svelte REST-APIプロジェクト

こんなことが学べます

Svelteで構築する必須要素

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

スベルト本作者直講！

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

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

Q&A 💬

こんな方に おすすめです！

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

강좌 목록

출간도서

カリキュラム

受講レビュー

holocodingの他の講座

似ている講座

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

こんな方に
おすすめです！

こんにちは
です。