강의

멘토링

로드맵

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)

  • ウェブプログラミング

こんにちは
です。

1,934

受講生

128

受講レビュー

263

回答

4.8

講座評価

4

講座

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

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

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

カリキュラム

全体

98件 ∙ (21時間 56分)

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

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

受講レビュー

全体

99件

4.8

99件の受講レビュー

  • greatha님의 프로필 이미지
    greatha

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    Sẽ rất hữu ích khi giải thích dự án thực tế trong khi viết mã theo thứ tự. Chỉ là kỹ năng của tôi không thể theo kịp nó. Hahahahaha

    • withoutthem님의 프로필 이미지
      withoutthem

      受講レビュー 13

      平均評価 4.8

      4

      16% 受講後に作成

      Thật dễ dàng để lắng nghe nếu bạn có một số kiến ​​thức. Tuy nhiên, đây là phương pháp kiểm tra trực quan bằng cách lấy nhật ký từ mã kiểm tra đơn vị, Có rất nhiều mã (?) phản ánh phong cách cá nhân, chẳng hạn như gọi repo.save trong phương thức sửa đổi. Người mới bắt đầu có thể gặp khó khăn khi pha trộn nó theo phong cách riêng của họ. Có những người dệt nó theo cách này Nếu bạn có đủ kiến ​​​​thức để sàng lọc và tiếp thu những thứ như, “Ồ, điều đó có vẻ ổn.” Một bài giảng khá hay đáng để xem xét

      • zk202308a5410
        知識共有者

        Nếu nó được tạo bình thường thì không cần phải save() khi sửa đổi (kiểm tra bẩn). Để được kiểm tra bẩn, đối tượng thực thể phải được đảm bảo liên tục. Tuy nhiên, đôi khi khi làm việc với các nhà phát triển khác, bạn có thể thấy đoạn mã như sau. @Transactional // thực thể người dùng độc lập với bối cảnh bền vững được liên kết với ranh giới giao dịch đó public void saveRefreshToken(Người dùng người dùng, Chuỗi newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } Trong trường hợp này, đối tượng Người dùng không bị kiểm tra bẩn. Tôi nghĩ rằng việc sử dụng save() để chuẩn bị cho những tình huống này không phải là một kiểu phản đối. ----------------- Trò chuyệnGPT Trong Spring Data JPA, có hai cách tiếp cận chính để thay đổi trạng thái của một thực thể: phát hiện các thay đổi (kiểm tra bẩn) và sử dụng phương thức save(). Mỗi phương pháp có thể được sử dụng phù hợp tùy theo tình huống cụ thể. Tôi sẽ giải thích những ưu, nhược điểm cũng như trường hợp sử dụng của từng phương pháp bên dưới. ----------------------. Phần kết luận Việc sử dụng phương pháp nào tùy thuộc vào tình huống. Phát hiện thay đổi phù hợp với các giao dịch nhỏ, đơn giản, trong khi lưu rõ ràng (save()) phù hợp với các giao dịch lớn với logic kinh doanh rõ ràng và phức tạp. Nói chung, trong thực tế, hai phương pháp này được sử dụng thay thế cho nhau. Sử dụng tính năng phát hiện thay đổi cho các thao tác CRUD đơn giản và sử dụng phương thức save() để quản lý mọi thứ một cách rõ ràng khi cần có logic nghiệp vụ phức tạp.

      • Ồ, cũng có trường hợp như vậy. Tôi đang học lại. Cảm ơn bạn.

    • windguy19995381님의 프로필 이미지
      windguy19995381

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

      Tôi nghĩ loại bài giảng này thực sự hữu ích trong thực tế. Tôi cũng thích những lời khuyên và thông tin đến từ trải nghiệm của người hướng dẫn. Độ sâu của từng kỹ thuật trong bài giảng có vẻ hơi nông do tính chất của bài giảng nhưng lại rất dễ hiểu khi tra cứu hoặc tham khảo sách. Tuy nhiên, nó có thể hơi khó khăn đối với các nhà phát triển ở độ tuổi đó.

      • zk202308a5410
        知識共有者

        Cảm ơn bạn đã hiểu mục đích sản xuất của chúng tôi. Như bạn đã nói, có một số hạn chế trong việc giải thích những phần cơ bản. Tuy nhiên, khi nghĩ đến việc thực hiện một dự án trong thực tế, tôi đã giảm đáng kể số lượng này. Nếu bạn đăng bất kỳ câu hỏi nào qua quán cà phê hoặc Infron trong các nghiên cứu còn lại, tôi sẽ giúp đỡ bạn nhiều nhất có thể.

    • insoobaek님의 프로필 이미지
      insoobaek

      受講レビュー 4

      平均評価 5.0

      5

      18% 受講後に作成

      Ngày nay, trong thời đại không thể chỉ làm một mặt trước và một mặt sau, tôi luôn mơ hồ nghĩ đến việc chỉ làm riêng mặt trước, kiếm tiền triệu riêng và tạo ra một dự án tích hợp thông thường. Tôi không phải là người. chỉ biết một mặt, nhưng tôi có một mặt chính và một mặt tổng hợp của cả hai mặt. Tôi nghĩ đây là một bài giảng thực sự hay cho những ai tò mò. Tôi chưa mua sách nhưng có vẻ như các bài giảng là đủ. Tuy nhiên, tôi nghĩ rằng nếu bạn đọc nó cùng với một cuốn sách, bạn có thể giảm bớt thời gian tìm kiếm lại. Đối với thông tin của bạn, cả React và Spring đều yêu cầu một số kiến ​​thức sơ bộ, nhưng tôi nghĩ đây sẽ là một bài giảng hay cho những ai thậm chí hơi quan tâm đến full stack, vì đây là những thứ có thể học được chỉ trong một tuần. Cảm ơn bạn vì bài giảng tuyệt vời.

      • zk202308a5410
        知識共有者

        Cảm ơn bạn đã hoàn toàn hiểu ý định sản xuất của chúng tôi. Tôi hy vọng những bài giảng còn lại sẽ hữu ích. Cảm ơn

    • gryunlim5021님의 프로필 이미지
      gryunlim5021

      受講レビュー 10

      平均評価 5.0

      5

      31% 受講後に作成

      Tôi không biết ở quán cà phê có phiếu giảm giá nên tôi mới mua nó... nhưng đó là một bài giảng quý giá bao gồm springboot+react. Cảm ơn bạn vì bài giảng tuyệt vời.

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

      ¥1,223,572

      24%

      ¥9,250

      zk202308a5410の他の講座

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

      似ている講座

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