강의

멘토링

로드맵

BEST
Programming

/

Full-stack

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

Spring Boot (Spring Boot ver3.4.x) で制作されるAPIサーバーと React 19 (with TypeScript) 連携プロジェクトを完成させる! ポートフォリオ作成ブートキャンプ過程全体を講義として制作

  • zk202308a5410
웹개발
저자 직강
실습 중심
React
TypeScript
Spring Boot
JPA
JWT

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

こんなことが学べます

  • リアクト(React) 開発プロセス

  • API サーバー開発

  • JWT 認証処理

  • リダックス ツールキット(Redux Toolkit)

  • リアクト クエリ(React Query)

  • ツシュタント

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


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


Chat GPTを利用して欲しい詳細なコードは作り出すことができますが、問題は自分が欲しいコードが何なのかを説明できないということです。


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


  • 受講前の注意事項

    • この講義は単純な文法や概念ではなく、手順とプロセスに関する講義なので、Reactの基礎的な文法は扱いません。また、JavaScriptとTypeScriptに対する経験が必ずなければなりません。

    • Java部分はSpring Boot 3.4.xを利用して進行され、基礎的な知識については扱いません。


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


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 Beanstalk、RDS、S3を利用する資料を追加しておきました。




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

このプロセスで次のような例題を扱うことになります。

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

  • 商品例題 - Axios

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

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

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

  • React Query、Recoil実習


To-Do例題


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

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

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

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

商品例

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

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



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

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


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

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



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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • APIサーバーを構築したい方向け

  • リエクト文法をどう適用すべきか悩んでいる方々

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

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

  • スプリング(Spring)

  • ウェブプログラミング

こんにちは
です。

2,061

受講生

135

受講レビュー

266

回答

4.8

講座評価

5

講座

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

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

 

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

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

ㄴ네이버 카페

 

주요 저서 

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

カリキュラム

全体

98件 ∙ (21時間 56分)

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

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

受講レビュー

全体

100件

4.8

100件の受講レビュー

  • greatha님의 프로필 이미지
    greatha

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    It would be really helpful if you explained the actual project in order while coding it. My skills just can't keep up with it. Hahahahahaha

    • withoutthem님의 프로필 이미지
      withoutthem

      受講レビュー 13

      平均評価 4.8

      4

      16% 受講後に作成

      If you have some knowledge, it's comfortable to listen to. However, there are many codes(?) that reflect personal styles, such as visually checking by printing logs in the unit test code, or calling repo.save in the modify method, so it seems difficult for beginners to properly integrate it to their own style. If you have enough knowledge to filter out and absorb things like "There are people who write this way, Oh, that looks good," it's a pretty good lecture for review.

      • zk202308a5410
        知識共有者

        If it is a normal creation situation, there is no need to save( ) when modifying (dirty checking) For dirty checking, the entity object must be guaranteed to be persistent. However, sometimes when working with other developers, I see code like the following. @Transactional // User entity unrelated to the persistence context connected to the transaction boundary public void saveRefreshToken(User user, String newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } In this case, the User object is not subject to dirty checking. I thought that using save( ) to prepare for these situations is not an anti-pattern. -------------------------- ChatGPT Spring Data JPA provides two main approaches to changing the state of an entity: change detection (dirty checking) and using the save() method. Each method can be used appropriately depending on the specific situation. Below, I will explain the pros and cons of each method and their use cases. --------------------. Conclusion Which method to use depends on the situation. Change detection is suitable for simple and small transactions, and explicit save method (save()) is suitable for large transactions with clear and complex business logic. In practice, the two methods are usually used interchangeably. Change detection is used for simple CRUD operations, and when complex business logic is required, the save() method is used to explicitly manage it.

      • Oh, there are situations like that too. I'm learning again. Thank you.

    • windguy19995381님의 프로필 이미지
      windguy19995381

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

      I think this kind of lecture is really helpful for practical work. The tips and information from the instructor's experience were also good. The depth of each technology in the lecture seems a bit shallow due to the nature of the lecture, but it is easy to understand if you search or refer to a book. However, I think it might be a bit difficult for developers in those years.

      • zk202308a5410
        知識共有者

        Thank you for understanding the intention of the production. As you said, there were some limitations in explaining the basic parts. However, I boldly reduced it to this extent, thinking of it as a project in practice.. If you post questions through Cafe or Infraon during the remaining period of study, I will help you as much as I know.

    • insoobaek님의 프로필 이미지
      insoobaek

      受講レビュー 4

      平均評価 5.0

      5

      18% 受講後に作成

      In these times when it's not enough to just do front and back, I've always wanted to vaguely create front and back separately and create a normal integrated project once. I think this is a really good lecture for those who are curious about the integration of both sides with one main, not those who only know one side. I didn't buy the book, but I think the lecture is sufficient. However, I think it would be possible to reduce the time spent looking it up again if you study it with the book. For your reference, both React and Spring require some prior knowledge, but since these are contents that can be learned in just a week, I think this will be a good lecture for those who are even a little interested in full stack. Thank you for the great lecture.

      • zk202308a5410
        知識共有者

        Thank you for fully understanding the intention of the production. I hope the remaining lectures will be helpful to you. Thank you.

    • gryunlim5021님의 프로필 이미지
      gryunlim5021

      受講レビュー 10

      平均評価 5.0

      5

      31% 受講後に作成

      I didn't know there was a discount coupon at the cafe ㅠㅠ I just bought it, but... It's a valuable lecture that includes springboot+react. Thank you for the great lecture.

      ¥9,338

      zk202308a5410の他の講座

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

      似ている講座

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