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

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

難易度 中級以上

受講期間 無制限

React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT
React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
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を利用する資料を追加しておきました。




Spring Bootを利用してAPIサーバーを制作し、これをReactプロジェクトで活用します。

この過程で、次のような例題を扱います。

  • Todo例題 - React-Router, Axios, ページング処理, Querydsl設定

  • 商品例 - Axios

  • ログイン処理 - Redux Toolkit, JWT

  • ソーシャルログイン処理

  • ショッピングカートの実装

  • React Query、Recoilの実習


To-Doの例


  • Reactプロジェクトの場合、React-Routerを利用してアドレスバーに応じて異なる画面への移動を処理します。

  • 共通のレイアウトを設定し、<Outlet>などを利用して各モジュールに合わせた画面を構成することができます。

  • ルーティングの設定は、保守が容易になるよう別ファイルとして構成することができます。

  • 重複するコードを減らすために、カスタムフックを設計して使用する方法を学習します。

商品例

  • ファイルアップロードとそのプロセス、処理結果に対するモーダル処理などを直接完成させることができます。

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



  • ログイン処理とソーシャルログインを通じて認証処理を実装してみます。

  • RTK(Redux Toolkit)を利用してログイン状態を管理し、ブラウザでクッキーを活用してログイン情報を保持するようにします。


  • JWTを利用してAccess TokenとRefresh Tokenを作成し、これをプロジェクトに適用する方法について見ていきます。

  • 最後の章では、React QueryとZustandを利用して作成された例を変換してみます。



✅ 講義で使用されたソースコードは、各セクションの最後の講義に添付されています。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • APIサーバーを作りたい方へ

  • Reactの文法をどのように適用すべきか悩んでいる方々

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

  • JavaScript(ジャバスクリプト)

  • スプリング(Spring)

  • ウェブプログラミング

こんにちは
zk202308a5410です。

2,259

受講生

168

受講レビュー

291

回答

4.8

講座評価

5

講座

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

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

 

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

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

ネイバーカフェ

 

主な著書

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

コードで学ぶSpring Boot

コードで学ぶReact

RESTful API サーバーの実装

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

Java Web開発ワークブック

React Native イン・アクション(翻訳)

開発/講義

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

SK顧客幸福株式会社 勤務

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

もっと見る

カリキュラム

全体

98件 ∙ (21時間 54分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

120件

4.7

120件の受講レビュー

  • greatha님의 프로필 이미지
    greatha

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

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

    • insoobaek님의 프로필 이미지
      insoobaek

      受講レビュー 4

      平均評価 5.0

      5

      18% 受講後に作成

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

      • zk202308a5410
        知識共有者

        制作意図を完全に理解していただきありがとうございます。残りの講義も参考になれば幸いです。 ありがとうございます。

    • withoutthem님의 프로필 이미지
      withoutthem

      受講レビュー 17

      平均評価 4.9

      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()メソッドを使用して明示的に管理します。

      • ああ、そのような状況もあります。 また学びますありがとう

    • windguy19995381님의 프로필 이미지
      windguy19995381

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

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

      • zk202308a5410
        知識共有者

        制作の意図をご理解いただきありがとうございます。質問を上げればわかるほどお手伝いさせていただきます。

    • feelsagood님의 프로필 이미지
      feelsagood

      受講レビュー 1

      平均評価 5.0

      5

      31% 受講後に作成

      zk202308a5410の他の講座

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

      似ている講座

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

      ¥9,774