Inflearn English brand logo
Inflearn English brand logo
BEST

Code-Based React with Spring Boot API Server

Completing the integration project between Spring Boot (API server made with Spring Boot ver3.4) and React! Creating lectures for the entire portfolio creation bootcamp course

(4.7) 71 reviews

1,172 students

React
Spring Boot
JWT
redux-toolkit
JPA

This course is prepared for Basic Learners.

What you will learn!

  • React Development Process

  • API server development

  • JWT Authentication Processing

  • Redux Toolkit

  • React Query

  • Zustand

'Even beads are precious if they are strung together' - Knowing something and making it are different!


I see a lot of new employees who know React and Boot, but when it comes to actual work, they don't get results. The reason they studied hard but can't use it is probably because they lack understanding of the process.


You can use Chat GPT to create the detailed code you want, but the problem is that you can't explain what code you want.


The progress of a project requires a process or procedure that many people can agree on. And this also requires a lot of practice.

This lecture is about procedures and processes, not simple grammar or concepts. It explains the contents of the book 'Learn React with Code ( https://www.yes24.com/Product/Goods/123363647)' published in December 2023.


Additional materials or questions needed during learning are distributed through the 'Gugu Coding Group https://cafe.naver.com/gugucoding ' cafe.


2025/05/04

For those who are learning from existing lectures and need them, existing lectures will be temporarily released on YouTube.


Publication period: 2025-05-04 ~ 2025_06-04 One month

https://www.youtube.com/playlist?list=PLO_s5-oeIdB2MIhTI4cspxzKFxjRvCWoR



2025/05/03

Updated with video lectures created with Vite and TypeScript.

It has been created to be as similar as possible to the existing lecture structure, but there may be slight differences in progress.

The source code has also been completely modified and distributed to match React version 19.






Added 2025/02/24

The full code in vite and TypeScript has been added at the very end of the lecture as teaching material.


Major Change Version

React-Router version 7

React Query Version 5

Spring Boot version 3.4.2

Here is the code that has changed.


Things to keep in mind when creating vite:

https://drive.google.com/drive/folders/1t0NdcBPCN57boutJcjdKODk5DccJUixV?usp=drive_link

I added it to .



Added 2024/03/28

I have added materials using AWS Beanstalk, RDS, and S3 as attachments to the last lecture.




Create an API server using Spring Boot and use it in a React project.

In this course, we will cover examples such as:

  • Todo Example - React-Router, Axios, Paging, Querydsl Settings

  • Product Example - Axios

  • Login Processing - Redux Toolkit, JWT

  • Social login processing

  • Implementing a shopping cart

  • React Query, Recoil Practice


To-Do Example


  • For React projects, React-Router is used to move to different screens depending on the address bar.

  • Set up a common layout, You can use the back to configure the screen for each module.

  • Routing settings can be configured in a separate file for easy maintenance.

  • Learn how to design and use custom hooks to reduce redundant code.

Product Examples

  • You can directly complete file upload, upload process, modal processing for processing results, etc.

Login/social login processing, shopping cart implementation



  • Let's implement authentication processing through login processing and social login.

  • We use RTK (Redux Toolkit) to manage login state and use cookies in the browser to remember login information.


  • We will look at how to create Access Tokens and Refresh Tokens using JWT and apply them to our projects.

  • In the final chapter, we will convert the example written using React Query and Zustand.



The source code used in the lecture is attached to the last lecture of each section.

Recommended for
these people!

Who is this course right for?

  • For those who want to build an API server

  • People wondering how to apply React syntax

Need to know before starting?

  • JavaScript

  • Spring

  • Web programming

Hello
This is zk202308a5410

1,509

Students

88

Reviews

242

Answers

4.7

Rating

3

Courses

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

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

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

ㄴ네이버 카페

 

More

Curriculum

All

98 lectures ∙ (21hr 56min)

Course Materials:

Lecture resources
    Published: 
    Last updated: 

    Reviews

    All

    71 reviews

    4.7

    71 reviews

    • Victor님의 프로필 이미지
      Victor

      Reviews 13

      Average Rating 4.8

      4

      16% enrolled

      어느정도 지식이 있으면 듣기 편안함. 단, 단위테스트코드에서 로그찍기로 눈으로 확인하는 방식이라거나, 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() 메서드를 사용하여 명시적으로 관리합니다.

      • 오 그런상황도 있군요 또 배워갑니다 감사합니다

    • 원데이님의 프로필 이미지
      원데이

      Reviews 1

      Average Rating 5.0

      5

      30% enrolled

      이런 강의가 정말 실무에 도움이 되는 강의라고 생각됩니다. 강사님의 경험에서 우러나오는 팁이나 정보들도 좋았습니다. 강의에 나오는 각 기술들의 깊이는 강의 특성상 조금 얕은감이 있는것 같은데, 검색이나 책을 참고하니깐 쉽게 이해가 감니다. 단, 저 년차의 개발자는 조금 힘들 수 도 있을것 같네요.

      • 제작의도를 이해해 주셔서 감사합니다. 말씀하신대로 기초적인 부분의 설명에 한계가 좀 있었습니다. 하지만 실무에서 프로젝트를 한다고 생각하고 과감하게 줄인게 이정도네요.. 앞으로 남은 학습하시는 동안 카페나 인프런을 통해서 질문 올리시면 아는만큼 도와드리도록 하겠습니다.

    • minho.ha님의 프로필 이미지
      minho.ha

      Reviews 1

      Average Rating 5.0

      5

      31% enrolled

      실제 프로젝트를 순서대로 코딩하면서 설명해 주는 것이 많은 도움이 돼요. 다만 제 실력이 이를 따라가지 못할 뿐이죠. 하하하하하

      • gryunlim님의 프로필 이미지
        gryunlim

        Reviews 10

        Average Rating 5.0

        5

        31% enrolled

        카페에 할인쿠폰있는줄 모르고 ㅠㅠ 그냥 구매했지만.. springboot+react 같이 있는 귀한 강의 입니다. 좋은 강의 감사합니다.

        • b0i4s님의 프로필 이미지
          b0i4s

          Reviews 4

          Average Rating 5.0

          5

          18% enrolled

          요즘같이 프론트, 백 하나만 한다고 되는게 아닌 시기에 항상 애매하게 프론트만 따로 만들어 보고 백만 따로 만들어 보고 정상적인 통합 프로젝트를 한 번 만들어보고 싶다는 생각 들었는데, 한쪽만 알고 계신 분이 아니라 메인을 하나 두고 양쪽의 통합적인 측면에서 궁금증을 가지고 있었던 분들에게 정말 좋은 강의라고 생각합니다. 저는 책은 구입하지 않았지만 강의로도 부족함이 없는 것 같네요. 그렇지만 책과 같이 보면 다시 찾아보는 시간을 줄 일 수 있을 것 같다는 생각이 들긴 하네요. 참고로 리액트, 스프링 둘 다 선수지식이 좀 필요하긴 하지만 일주일만 공부해도 알 수 있는 내용들이니 풀스택에 관심이 조금이라도 있으신 분들에게 좋은 강의가 될 것이라고 생각합니다. 좋은 강의 감사합니다.

          • 제작 의도를 완벽하게 이해해 주셔서 감사합니다. 남은 강의들도 도움이 되시면 좋겠습니다. 감사합니다.

        Similar courses

        Explore other courses in the same field!

        $59.40