BEST

Programming

Full-stack

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

Name: フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)
Price: 22000 KRW

ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

（4.7）受講レビュー 39件

受講生 1,008名

jaenam

REST API

GraphQL

React

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

こんなことが学べます

React
ローカルデータベースとサーバーの作成
REST API
GraphQL
CRUD

フロントエンド開発者、レベルアップ！
データ通信に対する自信を育ててください。

この講義では

REST API, GraphQL, ReactJS for Front-end

REST APIおよびGraphQLの使用方法を理解し、
単純なデータベースを構築することによって
ポートフォリオにご活用ください！

フロントエンド開発者の就職を目指してポートフォリオを準備していますか? このレッスンでは、React（リアクト）ベースの簡単なSNSサービスを作成するトイプロジェクトクローンコーディングを通じて、クライアントコードだけでなく、サーバーとDBまでの両方を直接作成します。

サーバーに対する漠然とした恐怖
解決したいですか？

最近フロントエンド就職準備中の方々を対象にメンタリングをしてみると、多くの方々がサーバーサイド学習に負担を感じていましたね。

サーバーサイド学習を取り巻く
初心者FE開発者の悩み。

「バックエンド環境の構築に大きな負担を感じます。」

「GraphQLを書いてみたいのですが、バックエンドの助けなしでどのように始めるのかわかりません。」

「就職を控えてMongoDB、MySQL、Firebaseなどを学習するのは果たして正しいのでしょうか？」

私も同じ苦情を経験してきた非専攻者として、これまで私が積み重ねたノウハウを皆さんに共有していきたいと思います。

JSONをDBに書き込む方法を適用すると、サーバーとデータベースの知識がほとんどなくても、データ通信の練習に問題はありません。
REST APIをGraphQLに変換する練習により、GraphQLを導入するのに十分な知識を身につけることができます。
就学生なら、MongoDB、MySQL、Firebaseなどは後で必要なときに学習しても遅くはありません。

データ通信について
自信を育ててみてください。

こんな方へ
おすすめです。

就職準備生

フロントエンド就職
準備している
非専攻者

フロントジュニア

ノウハウを手に入れたい
現職フロントエンド
開発者もOK！

一度に練習

REST API、GraphQL
両方を
練習したい方

このような方には特に役に立ちます。

✅ サーバーサイド学習に負担を感じる方
✅単独でポートフォリオまたはトイプロジェクトを進めたいフロントエンド開発者
✅開発段階でapiが用意される前にフロントエンド開発を急いでほしい現職フロントエンド開発者

この講義の特徴

ローカルDBを構築するため
最小限のCRUD
機能だけを扱うことによって
学習負担が少ない。

文法中心の説明の代わりに、
実際に使われる例を中心に
実戦開発能力
することができます。

実際の開発プロセス
そのままによると
自然に全体的な流れ
把握できます。

受講前にご確認ください！

プレーヤーの知識として、React、YARN、npm関連の知識が必要です。
完全なコードは羽毛で確認することができます。

学習内容

1. Client - 基本機能の実装

React と Next.js ベースのフロントエンド開発を開始します。

2. Server - REST APIの実装

Node.jsでExpress（Express）フレームワークに基づいてサーバーを駆動します。JSONでDBを構築し、ルートを作成します。

3. Client - REST API 通信

クライアントはREST API通信を介して実際のデータに基づいてCRUDを完成させます。

4. Server - GraphQLの実装

Apollo Serverに基づいてサーバーをGraphQL文法に変更します。

5. Client - GraphQL通信

クライアントにGraphQL通信を適用します。無限スクロール専用のreact-query APIも学習します。

予想される質問 Q&A

Q. 非専攻者も聞ける講義ですか？

はい、非専攻者を対象にフロントエンド開発に必要な最小限のバックエンド環境を構成できることを目指します。

Q. 講義を聞く前に準備すべきことはありますか？

Node.js（ノード）、Yarnがインストールされている必要があります。

Q. 講義を必ず聞かなければなりませんか？

そうではありませんでした。

ただ、講義全般にわたって言葉を通じて伝えてくれる私の意識の流れは、フェッヘットコードだけでは得られないでしょう。

知識共有者の
他の講義が気になったら？

コアJavaScript （クリック）

Javascript ES6+を正しく学ぶ - 初心者 (クリック)

Javascript ES6+を正しく学ぶ - 中級（クリック）

Javascript ES6+を正しく学ぶ - ボーナス（クリック）

こんな方に
おすすめです

学習対象は
誰でしょう？

フロントエンド就任生
現職のフロントエンド開発者

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

React
yarn/npm

こんにちは
です。

32,415

受講生

672

受講レビュー

393

回答

4.8

講座評価

講座

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI

カリキュラム

全体

25件 ∙ (3時間 37分)

セクション 1．Intro

1件 ∙ (3分)

1. はじめに
03:16

セクション 2．Client - 基本機能の実装

7件 ∙ (34分)

2. (お知らせ)フォント問題
01:20
3. 環境設定
04:14
4. (追加)Next.js 11対応
01:44
5. リストビューの実装
06:18
6. スタイルを書く
01:43
7. 新しい書き込み機能の実装
08:42
8. メッセージ修正、削除機能の実装
10:09

セクション 3．Server - REST API

2件 ∙ (27分)

9. expressサーバーとjsonデータベースの作成
08:15
10. ルート定義
19:22

セクション 4．Client - REST API通信

4件 ∙ (34分)

セクション 5．Server - GraphQL

4件 ∙ (27分)

セクション 6．Client - GraphQL通信

2件 ∙ (31分)

セクション 7．Client - GraphQL 無限スクロール

2件 ∙ (34分)

セクション 8．その他のライブラリについて

2件 ∙ (21分)

セクション 9．Outro

1件 ∙ (2分)

講座掲載日:

最終更新日:

受講レビュー

全体

39件

4.7

39件の受講レビュー

sshusshu
受講レビュー 7
∙
平均評価 5.0
5
48% 受講後に作成
いつも他の講義では簡単に触れませんでしたが、フロントエンド開発者に必ず必要な講義のようです！プエンの開発もサーバー側の知識が必要だからといってフルスタックを勉強しなければならないのか、まさにいましたが、比較的簡単に基本的な通信概念を理解して経験してみることができてとても良かったです。
xiuxiu
受講レビュー 2
∙
平均評価 4.0
5
48% 受講後に作成
先生こんにちは！虎の本も一生懸命読んでいました（大きな声）！フルスタックプロジェクトを探していますが、川の新しく開いたのを見て、光の速度で決済（アーリーバード🐶ゲイン！）して争っておいて、今学び始めました。まだセクション1しか見ていないが簡潔だがコアだけを説明してくれる点とても良くなってしまうし、少しだけずっと追加対応アップしてくださるのも完全サービットしてください。知らない場合は、もう一度質問でお会いしましょう。私も下の文のようにts追加バージョンも待ってみます！
yjinhyuk0917
受講レビュー 1
∙
平均評価 5.0
5
28% 受講後に作成
短期間に完了する必要があるプロジェクトの進行中に通信機能をテストする必要があるにもかかわらず、apiを渡すサーバーがないため、ローカルApiを直接作成する必要がありました。当時、あまりにも時期的に該当講義に触れることができ、幸い期間内に問題なく通信機能をテストして実演できました:) 講義自体が簡潔で必要な部分をこだわってくださるので、講義を一度頑強した後は、一人で自分で作ってみても気軽に講義でした。おかげでとても役に立ちました！ありがとうございます！
shrkdvy12341420
受講レビュー 5
∙
平均評価 4.8
4
100% 受講後に作成
トイプロジェクトを進める前に全体的な流れをつかむために講義を聞いたのに役に立ちました。内容をさらに調べましたが、特にクライアント側でリアクトクエリ部分は直接適用するにはもっと探してみるべきだと思いますが、リアクトクエリが与えるメリットは確かにありそうです。聞きました。
anifilm
受講レビュー 10
∙
平均評価 4.5
5
100% 受講後に作成
GraphQLの理解度がない状態で受講しました。その技術がどんなものか、ある程度味が見られた時間でした。学習ボリュームは大きくはありませんが、楽しく学習できました。リアクトとNext.jsの理解が少し必要で、セクション6のミューテーション処理やその他の機能セキュリティ部分は少し難しかった。

￥2,677

jaenamの他の講座

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

コアJavaScript

jaenam

ES6以前までのJavaScript全体を貫通する重要な概念について、全体的な流れを調べる講義です。

Basic

JavaScript

コアJavaScript

jaenam

[React/VanillaJS] UI要素を直接作成する Part 2

jaenam

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンにして、Web APIを活用したさまざまな視点と方法を体験し、フロントエンド開発のスキルを一層引き上げてみてください。

Basic

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 2

jaenam

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

Basic

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

リアクト公式文書を一緒に勉強する

jaenam

2023年にリニューアルされたReact公式文書を一緒に学習します。

Beginner

React, JavaScript, react.js

リアクト公式文書を一緒に勉強する

jaenam

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

開発から配布まで！一つのサービスを完成するための険しい旅をろ過なくお見せします。初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！

Basic

React, GraphQL, Firebase

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

モダンJavaScriptディープダイブスタディ

jaenam

《モダンJavaScriptディープダイブ》本の内容をそのまま追いつくスタディ映像です。

Basic

JavaScript

モダンJavaScriptディープダイブスタディ

jaenam

エフェクティブタイプスクリプトスタディ

jaenam

《エフェクティブタイプスクリプト》本の内容をそのまま追従するスタディ映像です。一緒に勉強すればはるかに簡単になります！

Basic

TypeScript

エフェクティブタイプスクリプトスタディ

jaenam

Javascript ES6+を正しく学ぶ - ボーナス

jaenam

ES6+を正しく学ぶコースは、JavascirptのES6以降の標準ECMAScript仕様について、理論に基づいてES5と異なる点と概念と動作原理を深く教えてくれます。

Basic

ES6, JavaScript

Javascript ES6+を正しく学ぶ - ボーナス

jaenam

Javascript ES6+を正しく学ぶ - 中級

jaenam

ES6+を正しく学ぶコースは、JavascriptのES6以降の標準ECMAScript仕様について、理論に基づいてES5とは異なる点と概念と動作原理を深く見ていきます。

Intermediate

JavaScript, ES6

Javascript ES6+を正しく学ぶ - 中級

jaenam

Javascript ES6+を正しく学ぶ - 初心者

jaenam

ES6+を正しく学ぶコースは、JavascirptのES6以降の標準ECMAScript仕様について、理論に基づいてES5と異なる点と概念と動作原理を深く教えてくれます。

Basic

JavaScript, ES6

Javascript ES6+を正しく学ぶ - 初心者

jaenam

似ている講座

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

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

FirebaseのSQL版！Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます！

Basic

Next.js, supabase, React

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

dodocoding

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

Basic

Clone Coding, Node.js, React

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

Basic

React, GraphQL, Firebase

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

ディップして食べる Next.js フルコース (韓国語吹き替え)

ludgi

Next.jsフルコースをつまみ食い！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験します。

Intermediate

Next.js, React, GraphQL

ディップして食べる Next.js フルコース (韓国語吹き替え)

ludgi

@시코 - TypeScript をしっかり学ぶ（初中級）

seniorcoding

質の高い授業で最高のWeb開発者になるためのTypeScript講座です。全講義受講後、TypeScriptの本質を深く理解でき、次に学ぶReactやNext、Nestなどのエキスパートになれます。

Basic

TypeScript, React, JavaScript

@시코 - TypeScript をしっかり学ぶ（初中級）

seniorcoding

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

Indie Coder

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

Basic

GraphQL, Svelte, MongoDB

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

Indie Coder

Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

neneee

Spring Boot + React.js ログイン（+ソーシャル）サービスを理解するとは、 JWTベース認証およびソーシャルログイン(Kakao/Google)を含む実践型ログインシステムを直接実装しながら、フロントエンドとバックエンドの認証フローを深く理解できるように設計された講座です。フロントエンドはReact.js、バックエンドはSpring Bootをベースに構成されており、実際のサービス環境で使われる Access Token + Refresh Token方式、HttpOnly Cookie、Reduxを活用したユーザー状態管理、 Roleベース権限処理、ソーシャルログイン連携まで一つずつ実践しながら習得できます。

Basic

React, Node.js, REST API

Spring Boot + React.js ログイン (+ソーシャル) サービスを理解する

neneee

リアクトフック（React Hook）で作成するWebアプリ

kwangsung

モダンなフロントエンドフレームワークの中で最も人気のあるReact（リアクト）が、学ぶのは難しいです。これを解決するためにフックが出ました。このレッスンでは、フックを使ってReactを簡単に学ぶのに役立ちます。

Basic

React, Web Application

リアクトフック（React Hook）で作成するWebアプリ

kwangsung

SpringベースのREST APIの開発

whiteship

さまざまなスプリング技術を使用して、Self-Descriptive MessageとHATEOAS（Hypermedia as the engine of application state）を満たすREST APIを開発する講義です。

Intermediate

Spring, REST API, Java

SpringベースのREST APIの開発

whiteship

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

Basic

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Kotlinで開発するSpring Boot Web MVC

Steve

現業開発者が知らせるKotlinを活用したSpring Boot開発方法！簡潔な文法とSpring Bootを活用した信頼性の高いWebアプリケーション開発方法を学びましょう。

Basic

Spring Boot, REST API, JUnit

Kotlinで開発するSpring Boot Web MVC

Steve

開発者の間で通じるバイブコーディング – 実務型 (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

Intermediate

React, Next.js, cursor

開発者の間で通じるバイブコーディング – 実務型 (Cursor AI, Figma)

codecamp

リアクト公式文書を一緒に勉強する

jaenam

2023年にリニューアルされたReact公式文書を一緒に学習します。

Beginner

React, JavaScript, react.js

リアクト公式文書を一緒に勉強する

jaenam

安定した収益を出すコイン自動売買ボット作り - グリッド戦略編

codinggangsa

グリッド取引戦略を仮想通貨自動売買システムを直接開発し、実取引に適用してみる実戦中心の講義です。 Upbit APIを活用した実戦売買実習とクラウド配布を通じた24時間自動売買ボットを作り、ボックス圏実戦戦略を説明しています。

Beginner

Python, AWS, Pandas

安定した収益を出すコイン自動売買ボット作り - グリッド戦略編

codinggangsa

GraphQL: REST APIに代わる技術

Burger

GraphQLのフロントエンドとバックエンドを一度に学べるチャンス

Basic

GraphQL, Spring Boot, Node.js

GraphQL: REST APIに代わる技術

Burger

[C#とUnityで作るMMORPGゲーム開発シリーズ] Part6: Webサーバー

Rookiss

ゲーム開発に必要なWebサーバーの全体的な内容最新のASP.NET Core（Blazor、WebAPI）を利用して学習する講義です。

Basic

REST API, ASP.NET Core, Web API

[C#とUnityで作るMMORPGゲーム開発シリーズ] Part6: Webサーバー

Rookiss

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

迅速な実行と検証の時代、Vibeコーディングで誰よりも速く実行しましょう！広告、決済など収益化まで漏らさずに自分の手で実現してみましょう。

Beginner

React, Web Application, Next.js

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成

Neo

誰よりも早く学ぶ Springboot + iOS RestAPI 掲示板作成 Springboot で CRUD サーバーを開発し、iOS で自分だけの掲示板を作ってみましょう！

Beginner

iOS, Kotlin, Spring Boot

誰よりも早く学習する Springboot + iOS RestAPI 掲示板作成

Neo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

Basic

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

Basic

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

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

こんなことが学べます

この講義では

サーバーに対する漠然とした恐怖解決したいですか？

サーバーサイド学習を取り巻く初心者FE開発者の悩み。

データ通信について自信を育ててみてください。

こんな方へおすすめです。

このような方には特に役に立ちます。

この講義の特徴

学習内容

1. Client - 基本機能の実装

2. Server - REST APIの実装

3. Client - REST API 通信

4. Server - GraphQLの実装

5. Client - GraphQL通信

予想される質問 Q&A

知識共有者の他の講義が気になったら？

こんな方に おすすめです

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

カリキュラム

受講レビュー

jaenamの他の講座

似ている講座

サーバーに対する漠然とした恐怖
解決したいですか？

サーバーサイド学習を取り巻く
初心者FE開発者の悩み。

データ通信について
自信を育ててみてください。

こんな方へ
おすすめです。

知識共有者の
他の講義が気になったら？

こんな方に
おすすめです

こんにちは
です。