BEST

コードで学ぶReact 19 with Spring Boot APIサーバー

Name: コードで学ぶReact 19 with Spring Boot APIサーバー
Price: 77000 KRW
Rating: 4.7 (128 reviews)

Spring Boot (ver3.4.x)で制作されるAPIサーバーと React 19 (with TypeScript) 連動プロジェクトを完成させる！バックエンドのポートフォリオにフロントエンドを適用！実務者を対象に作成された講義（初心者向けの講義ではありません。）

（4.7）受講レビュー 128件

受講生 1,537名

難易度 中級以上

受講期間 無制限

zk202308a5410

React

TypeScript

Spring Boot

JPA

JWT

React

TypeScript

Spring Boot

JPA

JWT

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

4.7

5.0

minho.ha

31% 受講後に作成

実際のプロジェクトを順番にコーディングしながら説明してくれるのがたくさん役立ちます。ただ、私の実力がこれに追いつかないだけです。ハハハハハ

5.0

원데이

30% 受講後に作成

このような講義が本当に実務に役立つ講義だと思われます。講師の経験から出てくるヒントや情報も良かったです。講義に出てくる各技術の深さは、講義の特性上、少し浅い感があるようですが、検索や本を参考にして簡単に理解できます。ただし、その年次の開発者は少し大変かもしれませんね。

5.0

b0i4s

18% 受講後に作成

最近のようにフロント、百一つだけということではない時期にいつも曖昧にフロントだけ別に作ってみて、百万別にして普通の統合プロジェクトを一度作ってみたいと思ったが、片方だけ知っている方ではなくメインを一つ置いて両側の統合的な側面から気になる方には本当にいい講義だと思います。私は本は購入しなかったが講義でも不足がないようですね。でも本のように見ればまた探してみる時間を減らすことができそうだと思いますね。ちなみにリアクト、スプリングどちらも選手知識が少し必要ですが、一週間だけ勉強しても分かる内容なので、フルスタックに関心が少しでもあった方に良い講義になると思います。良い講義ありがとうございます。

受講後に得られること

React（リアクト）開発プロセス
APIサーバー開発
JWT認証処理
リダックスツールキット(Redux Toolkit)
リアクトクエリ(React Query)
Zustand

'玉も磨かなければ光なし' - 知っていることと作れることは別物だ！

企業で従業員を教育する際の内容や、新入社員の集合研修の講義内容をInflearn（インフラン）で！

Reactも分かり、Bootも知っているのに、実際の業務を任せてみると成果物が出てこない新人を多く目にします。苦労して勉強したのに活用できない原因は、おそらくプロセスに対する理解が不足しているためです。

ChatGPTを利用して望み通りの詳細なコードを作成することはできますが、問題は自分が求めているコードが何なのかを説明できないということです。

プロジェクトの進行には、多くの人が合意できる過程や手順が必要です。そして、そのための練習もたくさん必要です。

受講前の注意事項
- この講義は単純な文法や概念ではなく、手順や過程に関する講義であるため、Reactの基礎的な文法は扱いません。また、JavaScriptとTypeScriptの経験が必ず必要です。
- Java部分はSpring Boot 3.4.xを利用して進められ、基礎的な知識については扱いません。

学習中に必要な追加資料や質問は、「クモンガゲ・コーディング団https://cafe.naver.com/gugucoding」カフェを通じて配布しています。

2026/01/02

カカオログインの設定部分に画面の変更などがあります。

https://docs.google.com/presentation/d/1ndFy0UfqcIHMbSF2Kyjtw3o8Gimx7I9GVeEaE-7lfs8/edit?usp=sharing

資料をご参照ください。

2025/12/05

スプリングブートで最も重要なセクション3「Todo APIサーバーの作成」部分は、Spring Boot 4.0.0にアップデートした講義に修正されました。

2025/11/26

Spring Boot 4.0.0をVSCodeを利用して開発する場合、JUnit5のテストコードが正常に動作しない問題が発生することがあります（IntelliJでは問題ありません）。

VSCodeを利用して問題が発生した場合は、https://blog.naver.com/cookie_00/224088514199 を参考にしてください。

2025/06/24

viteのバージョンが7.0.0に上がったことで、まだtailwindcssが正常にサポートできていない状況が発生しています。

npm create vite@latest を通じてプロジェクトを作成された場合は

package.jsonファイルを開いて、最後にあるviteのバージョンを6に修正します。

"devDependencies": {
    ...
    "vite": "^6.0.0"
  }

修正した後に npm install を実行し、

npm install tailwindcss @tailwindcss/vite

を実行すれば、正常に追加されるはずです。

2025/05/03

ViteとTypeScriptで制作された動画講義にアップデートされます。

既存の講義の構成と最大限似るように制作されましたが、若干の進度の差が発生する場合があります。

ソースコードもReact 19バージョンに合わせてすべて修正され、配布されます。

2025/02/24 追加

viteとTypeScriptで作成された全コードが、授業資料として講義の最後に追加されました。

主な変更バージョン

React-Router 7バージョン

React Query 5バージョン

スプリングブート 3.4.2バージョン

などが変更されたコードです。

vite生成時に注意すべき内容は

https://drive.google.com/drive/folders/1t0NdcBPCN57boutJcjdKODk5DccJUixV?usp=drive_link

に追加しておきました。

2024/03/28 追加

最後の講義の添付ファイルとして、AWS Elastic Beanstalk、RDS、S3を利用する資料を追加しておきました。

To-Doの例

Reactプロジェクトの場合、React-Routerを利用してアドレスバーに応じて異なる画面への移動を処理します。
共通のレイアウトを設定し、<Outlet>などを利用して各モジュールに合わせた画面を構成することができます。
ルーティングの設定は、保守が容易になるよう別ファイルとして構成することができます。
重複するコードを減らすために、カスタムフックを設計して使用する方法を学習します。

ログイン/ソーシャルログイン処理、ショッピングカートの実装

ログイン処理とソーシャルログインを通じて認証処理を実装してみます。
RTK（Redux Toolkit）を利用してログイン状態を管理し、ブラウザでクッキーを活用してログイン情報を保持するようにします。
JWTを利用してAccess TokenとRefresh Tokenを作成し、これをプロジェクトに適用する方法について見ていきます。
最後の章では、React QueryとZustandを利用して作成された例を変換してみます。

こんな方に
おすすめです

学習対象は
誰でしょう？

APIサーバーを作りたい方へ
Reactの文法をどのように適用すべきか悩んでいる方々

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

JavaScript（ジャバスクリプト）
スプリング(Spring)
ウェブプログラミング

こんにちは
zk202308a5410です。

2,392

受講生

185

受講レビュー

294

回答

4.8

講座評価

講座

「구멍가게코딩단（クモンガゲコーディング団）」は、2015年から開発関連職種の人々の集いのために作られたコミュニティです。

講義の進行は、現在「クモンガゲコーディング団（小さな店のコーディング団）」を運営しているクッキーマネージャーが担当しています。

2000年から開発を始め、ベンチャー企業、中小企業、大企業、フリーランスなどでの開発経験があります。

2010年代からは、主に企業向けの講義やコンサルティングを主な業務としています。

ネイバーカフェ

主な著書

コードで学ぶSpring Webプロジェクト

コードで学ぶSpring Boot

コードで学ぶReact

RESTful API サーバーの実装

Spring 6 レガシープロジェクト

Java Web開発ワークブック

React Native イン・アクション（翻訳）

開発/講義

サムスンSDS開発チーム勤務

SK顧客幸福株式会社勤務

KT / SK / ポスデータ / 教保生命 / 新世界 / アシアナ / 国民健康保険公団など、企業向け講義

カリキュラム

全体

98件 ∙ (21時間 54分)

講座資料（こうぎしりょう）:

授業資料

セクション 1．개발환경 설정

3件 ∙ (34分)

セクション 2．React-Router

7件 ∙ (1時間 5分)

4. React-Router 설정
18:56
5. 공통레이아웃설정
07:59
6. Todo 레이아웃
16:48
7. 경로값 추출을 위한 useParams
11:22
8. 동적처리
05:49
9. React Router 프레임워크모드소개
04:30
10. 실습코드

セクション 3．스프링부트와 API서버

13件 ∙ (3時間 8分)

11. 부트 프로젝트 생성 및 확인
14:23
12. 엔티티 클래스 만들기
15:02
13. 엔티티의 테스트
15:28
14. 목록(페이징)처리 구현
12:50
15. Querydsl설정하기
11:56
16. DTO 설정과 서비스계층 만들기
17:50
17. 서비스계층 만들기
11:44
18. 페이지처리를 위한 DTO설계
25:37
19. Querydsl 검색처리
18:43
20. REST 방식 컨트롤러 만들기(1)
13:10
21. @RestControllerAdvice
12:10
22. REST 방식 컨트롤러 만들기(2)
14:14
23. REST컨트롤러 - 수정/삭제, CORS설정
05:16

セクション 4．리액트와 API서버 통신

8件 ∙ (1時間 51分)

セクション 5．상품 API 서버 구성하기

11件 ∙ (3時間 4分)

セクション 6．리액트와 상품 API 서버 연동

8件 ∙ (1時間 36分)

セクション 7．시큐리티와 API서버

9件 ∙ (2時間 22分)

セクション 8．리덕스 툴킷

10件 ∙ (1時間 59分)

セクション 9．리액트 소셜 로그인

9件 ∙ (1時間 17分)

セクション 10．장바구니 API 만들기

7件 ∙ (2時間 24分)

セクション 11．리액트 장바구니 구성

4件 ∙ (47分)

セクション 12．React Query와 Zustand

9件 ∙ (1時間 42分)

セクション 13．vite 코드

0件

講座掲載日: 2023/12/04

最終更新日: 2026/01/02

受講レビュー

全体

128件

4.7

128件の受講レビュー

windguy19995381
受講レビュー 1
∙
平均評価 5.0
2024/04/09
5
30% 受講後に作成
このような講義が本当に実務に役立つ講義だと思われます。講師の経験から出てくるヒントや情報も良かったです。講義に出てくる各技術の深さは、講義の特性上、少し浅い感があるようですが、検索や本を参考にして簡単に理解できます。ただし、その年次の開発者は少し大変かもしれませんね。
- zk202308a5410
  知識共有者
  2024/04/10
  制作の意図をご理解いただきありがとうございます。質問を上げればわかるほどお手伝いさせていただきます。
gryunlim5021
受講レビュー 11
∙
平均評価 5.0
2024/10/21
5
31% 受講後に作成
カフェに割引クーポンがあるとは思わずㅠㅠただ購入しましたが.. springboot+reactのような貴重な講義です。良い講義ありがとうございます。
insoobaek
受講レビュー 4
∙
平均評価 5.0
2023/12/28
5
18% 受講後に作成
最近のようにフロント、百一つだけということではない時期にいつも曖昧にフロントだけ別に作ってみて、百万別にして普通の統合プロジェクトを一度作ってみたいと思ったが、片方だけ知っている方ではなくメインを一つ置いて両側の統合的な側面から気になる方には本当にいい講義だと思います。私は本は購入しなかったが講義でも不足がないようですね。でも本のように見ればまた探してみる時間を減らすことができそうだと思いますね。ちなみにリアクト、スプリングどちらも選手知識が少し必要ですが、一週間だけ勉強しても分かる内容なので、フルスタックに関心が少しでもあった方に良い講義になると思います。良い講義ありがとうございます。
- zk202308a5410
  知識共有者
  2023/12/28
  制作意図を完全に理解していただきありがとうございます。残りの講義も参考になれば幸いです。ありがとうございます。
greatha
受講レビュー 2
∙
平均評価 5.0
2024/10/16
5
31% 受講後に作成
実際のプロジェクトを順番にコーディングしながら説明してくれるのがたくさん役立ちます。ただ、私の実力がこれに追いつかないだけです。ハハハハハ
withoutthem
受講レビュー 19
∙
平均評価 4.9
2024/04/14
4
16% 受講後に作成
ある程度知識があればリスニング快適。ただし、ユニットテストコードでログを撮ることで目で確認する方式とか、 modifyメソッドでrepo.saveを呼び出すなど、個人スタイルが反映されたコード（？）が多い適切に自分にスタイルに合わせて溶かすために初心者たちは難しく見える。こんなやり方で織る人もいるんだが、ああ、それは良く見えるようなものをろ過して吸収するほどの知識になれば復習でかなり良い講義
- zk202308a5410
  知識共有者
  2024/04/14
  正常に作る状況なら modify 時に save( ) をする必要はありません (ダーティーチェック) ダーティチェックになるには、そのエンティティオブジェクトが永続状態であることを保証できる必要があります。ところで、たまに他の開発者と作業してみると、以下のようなコードを見る時もあります。 @Transactional // そのトランザクション境界に関連付けられている永続性コンテキストとは無関係の user エンティティ public void saveRefreshToken(User user, String newRefreshToken) { ... user.setRefreshToken（newRefreshToken）; ... } この場合、Userオブジェクトはダーティチェックの対象になりません。このような状況に備えるために save( ) をするのがアンチパターンではないと思いました。 -------------------------- ChatGPT Spring Data JPAでは、エンティティの状態を変更する方法として、2つの主なアプローチを使用できます。変更の検出（dirty checking）とsave（）メソッドの使用。各方法は、特定の状況に応じて適切に使用することができる。以下に各方法の長所と短所と使用事例を説明します。 --------------------。結論使用する方法は状況によって異なります。変更検出は単純で小さなトランザクションに適しており、明示的な保存方法（save（））は明確で複雑なビジネスロジックを含む大規模トランザクションに適しています。通常、実務では、2つの方法を組み合わせて使用します。単純なCRUD操作では変更検出を使用し、複雑なビジネスロジックが必要な場合はsave（）メソッドを使用して明示的に管理します。
- withoutthem
  2024/04/14
  ああ、そのような状況もあります。また学びますありがとう

zk202308a5410の他の講座

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

KubernetesベースのMSA（Spring Boot使用）入門 - パート1

zk202308a5410

Kubernetesを利用してプロジェクトを進めるために知っておくべきテーマを扱います。

初級

Spring Boot, Kubernetes, CI/CD

KubernetesベースのMSA（Spring Boot使用）入門 - パート1

zk202308a5410

Next.jsでReactを始める

zk202308a5410

Reactが初めてですか？ Reactの基本概念をしっかり固めながらも、素早く学べる方法を考える必要があります。 Next.jsとJavaScriptで最小限の知識から始めてみましょう。実務で開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todoの例題は非常に重要なので、2回開発する必要があります。1回目はコンポーネント中心に、次はブラウザのパスに合わせて処理されるルーティング中心に！ログインはZustandを利用しましょう！本当に少ないコード量でグローバルステートを処理できます。

入門

JavaScript, React, Web Application

Next.jsでReactを始める

zk202308a5410

Next.jsとSpring Boot

zk202308a5410

従来のReact開発方式とNext.jsを利用して開発する方式は全く異なります。この講義は最新のNext.js 16の核心を貫き、「本物の」Next.jsらしい開発方式をお教えします。就職ポートフォリオから実務プロジェクトまで、パフォーマンスと効率の両方を掴む方法を体験してください。 Next.jsらしく開発しましょう!Next.jsの機能をどのように適用すべきか、実際の例題を作りながら体で学べるように構成されています。サーバーコンポーネントを中心に見て、サーバーアクションとキャッシング戦略などを理論よりも実際にコードを通してより速く学習します。講義の目標はできるだけ早くNext.jsの雰囲気についていくことであるため、講義自体はJavaScriptを利用して進行します。しかし、各講義の例題はTypescriptで制作されたものを追加で授業資料として提供します。 2025年12月18日 - Next.js 16バージョンにアップデート

中級以上

JavaScript, React, Spring Boot

Next.jsとSpring Boot

zk202308a5410

コードで学ぶSpring Webプロジェクト - Intermediate

zk202308a5410

Spring Legacyプロジェクトを勉強する必要がある場合は？ XML設定一つ一つ自分で作ってみたいなら？ SpringプロジェクトにSpring Securityを適用する必要がある場合は？

初級

Spring, JSP, mybatis

コードで学ぶSpring Webプロジェクト - Intermediate

zk202308a5410

コードで学ぶSpring Webプロジェクト - Basic

zk202308a5410

Spring Legacyプロジェクトを勉強する必要がある場合は？ XML設定一つ一つ自分で作ってみたいなら？

初級

Spring, mybatis, JSP

コードで学ぶSpring Webプロジェクト - Basic

zk202308a5410

似ている講座

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

誰よりも早くやってみるChatGPTクローンコーディング

Neo

ChatGPTをクローンコーディングしながら、最初から最後まで直接実装してみるフルスタック実習講座です。 Spring BootサーバーからReactフロントエンドまで | Neo + Essential 単にコードを書き写すだけの講義ではなく、実際のサービスデプロイを通じて完成度の高いAIチャットボットサービスを構築できるよう案内します。

初級

JavaScript, React, Java

誰よりも早くやってみるChatGPTクローンコーディング

Neo

Spring BootとReactで学ぶ超簡単REST API掲示板作り

neneee

Spring BootとReact.jsで超簡単掲示板を手軽に構築する実践講義！この講義は、理論は少なめに、実習に集中して素早く完成させるウェブアプリケーション開発過程を盛り込んでいます。

入門

Spring Boot, react.js, JPA

Spring BootとReactで学ぶ超簡単REST API掲示板作り

neneee

誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

Neo

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

初級

React, Java, Kotlin

誰よりも早く学ぶSpringboot + React RestAPI掲示板作り

Neo

Next.js 15で完成する実戦YouTube クローン開発

antonio

この24時間のチュートリアルでは、自分だけのYouTubeクローンを作る方法を学びます。Next 15とReact 19（tRPCを含む）、サーバーコンポーネントでのプリフェッチ、クライアントコンポーネントでのサスペンス活用、ビデオ処理、バックグラウンドジョブ、AI機能など、高度なトピックを扱います。

初級

Next.js, React, PostgreSQL

Next.js 15で完成する実戦YouTube クローン開発

antonio

簡単に学ぶReactデザインパターン

mjang69888231

Reactの核心的なデザインパターンを概念と例題で素早く身につけましょう！

初級

React, TypeScript, Design Pattern

簡単に学ぶReactデザインパターン

mjang69888231

Spring BootとReactで実装するソーシャルログイン

oncoding

スプリングブートとReactを活用し、通常ログインとソーシャルログインを統合実装する方法を学びます。 MPAとSPA環境の両方でログインシステムを構築し、JWTとOAuth2認証を実習します。実務にすぐに適用可能なサンプルプロジェクトを通じて、全体のログインフローを理解し実装することができます。

中級以上

Java, Spring Boot, JPA

Spring BootとReactで実装するソーシャルログイン

oncoding

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

SpringAI + Reactで作る自分だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です！

初級

React, Kotlin, Spring Boot

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

トビーのクリーン・スプリング - ドメインモデルパターンとヘキサゴナルアーキテクチャ Part 1

tobyilee

仮想のスタートアップ開発チームが、クリーンコードとSpringの開発原則に従い、段階的に迅速かつ安定、柔軟でメンテナンス性の高い開発を行う過程を、実務に近い形式で体験できる講義シリーズ「クリーンSpring」の第1弾です。ドメインモデルパターンとヘキサゴナルアーキテクチャを活用し、ドメイン中心の初期開発段階で必要な技術と開発戦略を習得することができます。

初級

Java, Spring, Spring Boot

トビーのクリーン・スプリング - ドメインモデルパターンとヘキサゴナルアーキテクチャ Part 1

tobyilee

GraphQL: REST APIに代わる技術

Burger

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

初級

GraphQL, Spring Boot, Node.js

GraphQL: REST APIに代わる技術

Burger

プロジェクトで学ぶReact.js

kossiecoder

ブログプロジェクトを通じてリアクトの基礎を学ぶことができます

初級

React, Redux, ES6

プロジェクトで学ぶReact.js

kossiecoder

入門者のためのSpring Boot with Kotlin - 自分だけのポートフォリオサイト作り

infomuscle

理論から実習まで。自分で開発したウェブサイトをクラウドにデプロイしながらウェブ開発全般を学べます。

初級

Spring Boot, Kotlin, JPA

入門者のためのSpring Boot with Kotlin - 自分だけのポートフォリオサイト作り

infomuscle

Next.jsでReactを始める

zk202308a5410

入門

JavaScript, React, Web Application

Next.jsでReactを始める

zk202308a5410

Claude + IntelliJでTodoList開発 - MCP完全攻略

Neo

Claude + IntelliJでTodoListを開発する - MCP完全攻略 ClaudeとIntelliJでTodoListを作りながらMCPの動作過程を完璧にマスターしましょう！

入門

Kotlin, Spring Boot, IntelliJ IDEA

Claude + IntelliJでTodoList開発 - MCP完全攻略

Neo

グルメマップアプリ開発（React Native & NestJS）

Kyo

React Nativeを使って、自分だけのグルメ記録アプリを開発・リリースするまでの過程を学びます。デザインからフロントエンドおよびバックエンド開発、デプロイまで、全工程を用意しました。

中級以上

React Native, TypeScript, NestJS

グルメマップアプリ開発（React Native & NestJS）

Kyo

[Electron #2] React + Electron オフライン顔認証入退室・出席管理システム (With DeepFace)

dakgangjung123

現場のオフライン環境でも顔認証がどのように動作するのか疑問に思った経験をもとに、この講義では React + Electron と Python の FastAPI ベースで駆動する DeepFace を活用し、顔認証ベースの入退室・出席管理の基本構造を一緒に作っていきます。完成度よりも動作原理の理解と、個人プロジェクトへと拡張できる基礎固めに焦点を当てます。

中級以上

React, FastAPI, AI

[Electron #2] React + Electron オフライン顔認証入退室・出席管理システム (With DeepFace)

dakgangjung123

React Native with Expo: ZeroChoからしっかり学ぶ

zerocho

Web開発者が（特にReact開発者であれば）本当に手軽にアプリをリリースできる時代になりました。Expoを使えば、さらに素早くAndroidとiOS両方のアプリをリリースできます。Expoを通じて、アプリまでスピーディーにリリースできる開発者になりましょう。

初級

React, React Native, Hybrid App

React Native with Expo: ZeroChoからしっかり学ぶ

zerocho

スマートファームプラットフォーム構築入門 - ArduinoとAI Tutorで始めるIoT Smart Farm

ywjang23583

センサーデータ収集、MQTT通信、ウェブダッシュボード、AI環境分析を統合した、実際に動作するスマートファームプラットフォームを自ら構築します。IoTセンサーの連動からFastAPI/SpringベースのAPIサーバー、React/Vueダッシュボードの開発、クラウドデプロイまで、農業DXの全過程を実務プロジェクトとして経験します。

中級以上

React, IoT, SmartStore

スマートファームプラットフォーム構築入門 - ArduinoとAI Tutorで始めるIoT Smart Farm

ywjang23583