Spring Boot (Spring Boot ver3.4.x) で制作されるAPIサーバーと React 19 (with TypeScript) 連携プロジェクトを完成させる！ ポートフォリオ作成ブートキャンプ過程全体を講義として制作
リアクト(React) 開発プロセス
API サーバー開発
JWT 認証処理
リダックス ツールキット(Redux Toolkit)
リアクト クエリ(React Query)
ツシュタント
Reactプロジェクトの場合、React-Routerを利用してアドレスバーに応じて異なる画面への移動を処理します。
共通のレイアウトを設定し、
ルーティング設定は別ファイルとして保守しやすいように構成することができます。
重複するコードを減らすために、カスタムフックを設計して使用する方法を学習します。
/builder/270c9a0a-4465-40d4-ae8c-b666ff2df3f0/0067.jpg?w=960 "0067.jpg")
ファイルアップロードとアップロード過程、処理結果に関するモーダル処理などを直接完成させることができます。
/builder/0e558177-1e32-40ce-9ce8-86c82ac122af/0060.jpg?w=960 "0060.jpg")
ログイン処理とソーシャルログインを通じて認証処理を実装してみます。
RTK（Redux Toolkit）を利用してログイン状態を管理し、ブラウザでクッキーを活用してログイン情報を記憶するようにします。
JWTを利用してAccess TokenとRefresh Tokenを作成し、これをプロジェクトに適用する方法を見ていきます。
最後の章では、React QueryとZustandを使用して作成された例題を変換してみます。
学習対象は
誰でしょう？
APIサーバーを構築したい方向け
リエクト文法をどう適用すべきか悩んでいる方々
前提知識、
必要でしょうか？
ジャバスクリプト(JavaScript)
スプリング(Spring)
ウェブプログラミング
1,837
受講生
117
受講レビュー
258
回答
4.8
講座評価
4
講座
구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.
강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 담당자가 진행하고 있습니다.
2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.
全体
98件 ∙ (21時間 56分)
講座資料（こうぎしりょう）:
4. React-Router 設定
18:56
5. 共通レイアウト設定
07:59
6. Todo レイアウト
16:48
7. パス値抽出用の useParams
11:22
8. 動的処理
05:49
11. ブートプロジェクト作成および確認
14:28
12. エンティティクラス 作成
12:56
13. エンティティのテスト
17:55
14. 一覧(ページング)処理 実装
09:15
15. Querydsl 設定
18:45
16. DTOの設定とサービス層の構築
16:11
17. サービス層の作成
12:47
18. ページ処理のためのDTO設計
23:38
19. Querydsl 検索処理
17:28
全体
94件
4.7
94件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
受講レビュー 13
∙
平均評価 4.8
4
어느정도 지식이 있으면 듣기 편안함. 단, 단위테스트코드에서 로그찍기로 눈으로 확인하는 방식이라거나, modify 메소드에서 repo.save를 호출한다거나 하는 개인스타일이 반영된 코드(?)가 많아 적절히 자신에 스타일에 맞게 녹여내기에 초보들은 어려워보임. 이런 방식으로 짜는 사람도 있구나 오 저건 좋아보이네 하는 것들을 걸러서 흡수할 정도 지식이 된다면 복습으로 상당히 좋은 강의
정상적으로 만드는 상황이라면 modify 시에 save( )를 할 필요는 없습니다(더티체크) 더티 체크가 되려면 해당 엔티티 객체는 영속 상태임을 보장할 수 있어야 합니다. 그런데 간혹 다른 개발자들과 작업하다 보면 아래와 같은 코드를 볼 때도 있습니다. @Transactional // 해당 트랜잭션 경계와 연결되는 영속성 컨텍스트와 무관한 user 엔티티 public void saveRefreshToken(User user, String newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } 이런 경우 User객체는 더티 체크 대상이 아니게 됩니다. 이런 상황들을 대비하기 위해서 save( )를 하는 것이 안티 패턴은 아니라고 생각했습니다. -------------------------- ChatGPT Spring Data JPA에서는 엔티티의 상태를 변경하는 방법으로 두 가지 주요 접근 방식을 사용할 수 있습니다: 변경 감지(dirty checking)와 save() 메서드 사용입니다. 각각의 방법은 특정 상황에 따라 적절하게 사용될 수 있습니다. 아래에 각 방법의 장단점과 사용 사례를 설명하겠습니다. --------------------. 결론 어떤 방식을 사용할지는 상황에 따라 다릅니다. 변경 감지는 간단하고 작은 트랜잭션에 적합하며, 명시적 저장 방식(save())은 명확하고 복잡한 비즈니스 로직이 포함된 대규모 트랜잭션에 적합합니다. 일반적으로 실무에서는 두 가지 방식을 혼용하여 사용합니다. 단순한 CRUD 작업에는 변경 감지를 사용하고, 복잡한 비즈니스 로직이 필요한 경우에는 save() 메서드를 사용하여 명시적으로 관리합니다.
오 그런상황도 있군요 또 배워갑니다 감사합니다
受講レビュー 1
∙
平均評価 5.0
5
이런 강의가 정말 실무에 도움이 되는 강의라고 생각됩니다. 강사님의 경험에서 우러나오는 팁이나 정보들도 좋았습니다. 강의에 나오는 각 기술들의 깊이는 강의 특성상 조금 얕은감이 있는것 같은데, 검색이나 책을 참고하니깐 쉽게 이해가 감니다. 단, 저 년차의 개발자는 조금 힘들 수 도 있을것 같네요.
제작의도를 이해해 주셔서 감사합니다. 말씀하신대로 기초적인 부분의 설명에 한계가 좀 있었습니다. 하지만 실무에서 프로젝트를 한다고 생각하고 과감하게 줄인게 이정도네요.. 앞으로 남은 학습하시는 동안 카페나 인프런을 통해서 질문 올리시면 아는만큼 도와드리도록 하겠습니다.
受講レビュー 4
∙
平均評価 5.0
5
요즘같이 프론트, 백 하나만 한다고 되는게 아닌 시기에 항상 애매하게 프론트만 따로 만들어 보고 백만 따로 만들어 보고 정상적인 통합 프로젝트를 한 번 만들어보고 싶다는 생각 들었는데, 한쪽만 알고 계신 분이 아니라 메인을 하나 두고 양쪽의 통합적인 측면에서 궁금증을 가지고 있었던 분들에게 정말 좋은 강의라고 생각합니다. 저는 책은 구입하지 않았지만 강의로도 부족함이 없는 것 같네요. 그렇지만 책과 같이 보면 다시 찾아보는 시간을 줄 일 수 있을 것 같다는 생각이 들긴 하네요. 참고로 리액트, 스프링 둘 다 선수지식이 좀 필요하긴 하지만 일주일만 공부해도 알 수 있는 내용들이니 풀스택에 관심이 조금이라도 있으신 분들에게 좋은 강의가 될 것이라고 생각합니다. 좋은 강의 감사합니다.
제작 의도를 완벽하게 이해해 주셔서 감사합니다. 남은 강의들도 도움이 되시면 좋겠습니다. 감사합니다.
受講レビュー 10
∙
平均評価 5.0
￥9,036
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![따라하며 배우는 리액트 A-Z[19버전 반영]Course Thumbnail](https://cdn.inflearn.com/public/courses/329170/cover/223c54c0-9220-4937-836d-70a36be3eb1c/329170-eng.png?f=avif&w=420)
