
コードで学ぶSpring Webプロジェクト - Intermediate
zk202308a5410
Spring Legacyプロジェクトを勉強する必要がある場合は? XML設定一つ一つ自分で作ってみたいなら? SpringプロジェクトにSpring Securityを適用する必要がある場合は?
初級
Spring, JSP, mybatis
Spring Boot (ver3.4.x)で制作されるAPIサーバーと React 19 (with TypeScript) 連動プロジェクトを完成させる! バックエンドのポートフォリオにフロントエンドを適用! 実務者を対象に作成された講義(初心者向けの講義ではありません。)
受講生 1,516名
難易度 中級以上
受講期間 無制限


学習した受講者のレビュー
5.0
minho.ha
実際のプロジェクトを順番にコーディングしながら説明してくれるのがたくさん役立ちます。ただ、私の実力がこれに追いつかないだけです。ハハハハハ
5.0
원데이
このような講義が本当に実務に役立つ講義だと思われます。 講師の経験から出てくるヒントや情報も良かったです。 講義に出てくる各技術の深さは、講義の特性上、少し浅い感があるようですが、検索や本を参考にして簡単に理解できます。 ただし、その年次の開発者は少し大変かもしれませんね。
5.0
b0i4s
最近のようにフロント、百一つだけということではない時期にいつも曖昧にフロントだけ別に作ってみて、百万別にして普通の統合プロジェクトを一度作ってみたいと思ったが、片方だけ知っている方ではなくメインを一つ置いて両側の統合的な側面から気になる方には本当にいい講義だと思います。 私は本は購入しなかったが講義でも不足がないようですね。でも本のように見ればまた探してみる時間を減らすことができそうだと思いますね。 ちなみにリアクト、スプリングどちらも選手知識が少し必要ですが、一週間だけ勉強しても分かる内容なので、フルスタックに関心が少しでもあった方に良い講義になると思います。 良い講義ありがとうございます。
React(リアクト)開発プロセス
APIサーバー開発
JWT認証処理
リダックスツールキット(Redux Toolkit)
リアクトクエリ(React Query)
Zustand
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の実習


Reactプロジェクトの場合、React-Routerを利用してアドレスバーに応じて異なる画面への移動を処理します。
共通のレイアウトを設定し、<Outlet>などを利用して各モジュールに合わせた画面を構成することができます。
ルーティングの設定は、保守が容易になるよう別ファイルとして構成することができます。
重複するコードを減らすために、カスタムフックを設計して使用する方法を学習します。
/builder/270c9a0a-4465-40d4-ae8c-b666ff2df3f0/0067.jpg)
ファイルアップロードとそのプロセス、処理結果に対するモーダル処理などを直接完成させることができます。
/builder/0e558177-1e32-40ce-9ce8-86c82ac122af/0060.jpg)

ログイン処理とソーシャルログインを通じて認証処理を実装してみます。
RTK(Redux Toolkit)を利用してログイン状態を管理し、ブラウザでクッキーを活用してログイン情報を保持するようにします。
JWTを利用してAccess TokenとRefresh Tokenを作成し、これをプロジェクトに適用する方法について見ていきます。
最後の章では、React QueryとZustandを利用して作成された例を変換してみます。
✅ 講義で使用されたソースコードは、各セクションの最後の講義に添付されています。
学習対象は
誰でしょう?
APIサーバーを作りたい方へ
Reactの文法をどのように適用すべきか悩んでいる方々
前提知識、
必要でしょうか?
JavaScript(ジャバスクリプト)
スプリング(Spring)
ウェブプログラミング
2,321
受講生
181
受講レビュー
292
回答
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分)
講座資料(こうぎしりょう):
4. React-Router 설정
18:56
5. 공통레이아웃설정
07:59
6. Todo 레이아웃
16:48
8. 동적처리
05:49
11. 부트 프로젝트 생성 및 확인
14:23
12. 엔티티 클래스 만들기
15:02
13. 엔티티의 테스트
15:28
14. 목록(페이징)처리 구현
12:50
15. Querydsl설정하기
11:56
17. 서비스계층 만들기
11:44
18. 페이지처리를 위한 DTO설계
25:37
19. Querydsl 검색처리
18:43
全体
126件
4.7
126件の受講レビュー
受講レビュー 11
∙
平均評価 5.0
受講レビュー 2
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
5
このような講義が本当に実務に役立つ講義だと思われます。 講師の経験から出てくるヒントや情報も良かったです。 講義に出てくる各技術の深さは、講義の特性上、少し浅い感があるようですが、検索や本を参考にして簡単に理解できます。 ただし、その年次の開発者は少し大変かもしれませんね。
制作の意図をご理解いただきありがとうございます。質問を上げればわかるほどお手伝いさせていただきます。
受講レビュー 4
∙
平均評価 5.0
5
最近のようにフロント、百一つだけということではない時期にいつも曖昧にフロントだけ別に作ってみて、百万別にして普通の統合プロジェクトを一度作ってみたいと思ったが、片方だけ知っている方ではなくメインを一つ置いて両側の統合的な側面から気になる方には本当にいい講義だと思います。 私は本は購入しなかったが講義でも不足がないようですね。でも本のように見ればまた探してみる時間を減らすことができそうだと思いますね。 ちなみにリアクト、スプリングどちらも選手知識が少し必要ですが、一週間だけ勉強しても分かる内容なので、フルスタックに関心が少しでもあった方に良い講義になると思います。 良い講義ありがとうございます。
制作意図を完全に理解していただきありがとうございます。残りの講義も参考になれば幸いです。 ありがとうございます。
受講レビュー 19
∙
平均評価 4.9
4
ある程度知識があればリスニング快適。 ただし、ユニットテストコードでログを撮ることで目で確認する方式とか、 modifyメソッドでrepo.saveを呼び出すなど、個人スタイルが反映されたコード(?)が多い 適切に自分にスタイルに合わせて溶かすために初心者たちは難しく見える。 こんなやり方で織る人もいるんだが、ああ、それは良く見えるようなものをろ過して吸収するほどの知識になれば 復習でかなり良い講義
正常に作る状況なら 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()メソッドを使用して明示的に管理します。
ああ、そのような状況もあります。 また学びますありがとう
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール、あと2日日で終了
¥53,900
30%
¥9,937