BEST

コードで学ぶReact 19 with スプリングブートAPIサーバー

Name: コードで学ぶReact 19 with スプリングブートAPIサーバー
Price: 53900 KRW
Rating: 4.7 (115 reviews)

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

（4.7）受講レビュー 115件

受講生 1,419名

zk202308a5410

웹개발

책

저자 직강

실습 중심

React

TypeScript

Spring Boot

JPA

JWT

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

受講後に得られること

React開発プロセス
APIサーバー開発
JWT認証処理
Redux Toolkit
React Query
Zustand

「玉も磨かなければ光らない」- 知っていることと作ることは違う!

企業で従業員を教育する際 / 新入社員の集合教育講義内容をInflearnで!

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

Chat GPTを使えば詳細なコードを作り出すことはできますが、問題は自分が望むコードが何なのかを説明できないということです。

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

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

学習中に必要な追加資料や質問は「구멍가게 코딩단https://cafe.naver.com/gugucoding」カフェを通じて配布しています。

2025/12/05

Spring Bootで最も重要なセクション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

Spring Boot 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を利用してアドレスバーに応じて異なる画面への移動を処理します。
共通のレイアウトを設定し、などを利用して、各モジュールに合った画面を構成することができます。
ルーティング設定は別のファイルで保守しやすいように構成できます。
重複するコードを減らすために、カスタムフックを設計して使用する方法を学習します。

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

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

こんな方に
おすすめです

学習対象は
誰でしょう？

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

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

JavaScript
Spring
ウェブプログラミング

こんにちは
です。

2,152

受講生

158

受講レビュー

277

回答

4.8

講座評価

講座

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

주요 저서

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

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．Reactと商品APIサーバー連携

8件 ∙ (1時間 36分)

セクション 7．セキュリティとAPIサーバー

9件 ∙ (2時間 22分)

セクション 8．リダックスツールキット

10件 ∙ (1時間 59分)

セクション 9．リアクトソーシャルログイン

9件 ∙ (1時間 17分)

セクション 10．ショッピングカートAPI作成

7件 ∙ (2時間 24分)

セクション 11．React ショッピングカート構成

4件 ∙ (47分)

セクション 12．React QueryとZustand

9件 ∙ (1時間 42分)

セクション 13．vite コード

0件

講座掲載日:

最終更新日:

受講レビュー

全体

115件

4.7

115件の受講レビュー

greatha
受講レビュー 2
∙
平均評価 5.0
5
31% 受講後に作成
実際のプロジェクトを順番にコーディングしながら説明してくれるのがたくさん役立ちます。ただ、私の実力がこれに追いつかないだけです。ハハハハハ
withoutthem
受講レビュー 13
∙
平均評価 4.8
4
16% 受講後に作成
ある程度知識があればリスニング快適。ただし、ユニットテストコードでログを撮ることで目で確認する方式とか、 modifyメソッドでrepo.saveを呼び出すなど、個人スタイルが反映されたコード（？）が多い適切に自分にスタイルに合わせて溶かすために初心者たちは難しく見える。こんなやり方で織る人もいるんだが、ああ、それは良く見えるようなものをろ過して吸収するほどの知識になれば復習でかなり良い講義
- zk202308a5410
  知識共有者
  正常に作る状況なら 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
  ああ、そのような状況もあります。また学びますありがとう
windguy19995381
受講レビュー 1
∙
平均評価 5.0
5
30% 受講後に作成
このような講義が本当に実務に役立つ講義だと思われます。講師の経験から出てくるヒントや情報も良かったです。講義に出てくる各技術の深さは、講義の特性上、少し浅い感があるようですが、検索や本を参考にして簡単に理解できます。ただし、その年次の開発者は少し大変かもしれませんね。
- zk202308a5410
  知識共有者
  制作の意図をご理解いただきありがとうございます。質問を上げればわかるほどお手伝いさせていただきます。
insoobaek
受講レビュー 4
∙
平均評価 5.0
5
18% 受講後に作成
最近のようにフロント、百一つだけということではない時期にいつも曖昧にフロントだけ別に作ってみて、百万別にして普通の統合プロジェクトを一度作ってみたいと思ったが、片方だけ知っている方ではなくメインを一つ置いて両側の統合的な側面から気になる方には本当にいい講義だと思います。私は本は購入しなかったが講義でも不足がないようですね。でも本のように見ればまた探してみる時間を減らすことができそうだと思いますね。ちなみにリアクト、スプリングどちらも選手知識が少し必要ですが、一週間だけ勉強しても分かる内容なので、フルスタックに関心が少しでもあった方に良い講義になると思います。良い講義ありがとうございます。
- zk202308a5410
  知識共有者
  制作意図を完全に理解していただきありがとうございます。残りの講義も参考になれば幸いです。ありがとうございます。
gryunlim5021
受講レビュー 10
∙
平均評価 5.0
5
31% 受講後に作成
カフェに割引クーポンがあるとは思わずㅠㅠただ購入しましたが.. springboot+reactのような貴重な講義です。良い講義ありがとうございます。

期間限定セール、あと5日日で終了

￥53,900

30%

￥9,561

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

似ている講座

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

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

Neo

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

초급

React, Java, Kotlin

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

Neo

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

neneee

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

입문

Spring Boot, react.js, JPA

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

neneee

マルチモジュールアーキテクチャで実装する銀行サーバー核心機能 [ Kotlin & Spring ]

Hong

この講義はKotlinとSpring Bootを活用し、マルチモジュールプロジェクトをゼロから構築する方法を扱います。モジュール化の基本概念からGradle設定、モジュール間の依存性管理、実際のアプリケーション開発まで実習を中心に進めます。初心者から中級開発者まで、マルチモジュールの基礎と実務への適用を学びたい時に、本講義を参考にしてください。

초급

Java, Spring, Kotlin

マルチモジュールアーキテクチャで実装する銀行サーバー核心機能 [ Kotlin & Spring ]

Hong

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

중급이상

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

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

oncoding

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

중급이상

Java, Spring Boot, JPA

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

oncoding

TypeScriptで学ぶReact.js：基礎から最新技術まで完璧に

sucoding

React 19の最新機能をTypeScriptと共に学ぶReact完成講座！基礎から状態管理(Context, Redux Toolkit, Zustand)、API通信(Fetch, Axios)、最新Hooks(use, useActionState, useOptimisticなど)、実践プロジェクトまで、じっくりと習得し、実務にすぐに適用できるReactアプリを作成できるようになります。

입문

React, react-router, redux-toolkit

TypeScriptで学ぶReact.js：基礎から最新技術まで完璧に

sucoding

Spring Boot アップデート

whiteship

このレッスンは＆quot;スプリングブートの概念と活用＆quot;講義拡張パックで過去2年間あったSpring Boot Updateを扱っています。 Spring Boot 2.1から2.4の新機能と変更履歴を確認し、Spring Bootの最新バージョンにアップデートしてください。

중급이상

Spring Boot, Spring, Java

Spring Boot アップデート

whiteship

React と Next.js で学ぶ入門用フロントエンドプロジェクト: Tailwind CSS と静的デプロイまで完成させる

ludgi

Next.jsとTailwind CSSを活用したフロントエンド入門講義です。バックエンドなしで静的展開まで完了し、初心者でも完成の達成感を感じられるように設計されています

입문

Next.js, TailwindCSS, aws-s3

React と Next.js で学ぶ入門用フロントエンドプロジェクト: Tailwind CSS と静的デプロイまで完成させる

ludgi

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

jeyong

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

입문

React, Web Application, Next.js

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

jeyong

一口サイズに切って食べる実戦プロジェクト - SNS編

winterlood

いよいよ実戦に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証&認可、無限スクロール、画像アップロード、いいね、無限ネスト型コメント、ダークモードなどの機能を作ってみます。この過程でZustandとTanstack Queryを利用したサーバー及びグローバル状態管理技法も見ていく予定です。

중급이상

supabase, zustand, react-query

一口サイズに切って食べる実戦プロジェクト - SNS編

winterlood

【初級】味わおう！コトリンとスプリングでAPIを呼び出す

kimkimgod

シンプルな機能実装により、コトリンとスプリングの組み合わせをすばやく見ることができる講義です。

초급

Kotlin, Spring, Spring Boot

【初級】味わおう！コトリンとスプリングでAPIを呼び出す

kimkimgod

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

jaenam

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

입문

React, JavaScript, react.js

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

jaenam

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

タイプスクリプトを正しく理解するには、公式文書を一度見てください。文書の重要な部分だけがコックを拾い、分かりやすく伝えます。実戦に必要な内容も一緒にお知らせする講義です！

입문

TypeScript, JavaScript, ES6

公式文書で学ぶ本番タイプスクリプト

sowhatcoding

本当のjOOQ！ Type Safe SQL with Java

sdm32851630

jOOQでType SafeしたSQLの強力さを体験してください！

중급이상

Java, jooq, SQL

本当のjOOQ！ Type Safe SQL with Java

sdm32851630

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

ReactフロントエンドとSpringBootバックエンドをAWSクラウドに直接デプロイするポートフォリオ中心の講座！素早く自分のポートフォリオにフロント、バックエンドプロジェクトをデプロイしたい方に役立つ講座です！デプロイに必要な知識を、サーバー設定からDocker、Domain接続、Nginx、HTTPS適用まで段階別に短期間で実習できるようになります！

초급

React, Java, AWS

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667