inflearn logo

Learning React 19 with Spring Boot API Server through Coding

Completing an integration project between an API server built with Spring Boot (ver 3.4.x) and React 19 (with TypeScript)! Applying front-end to a back-end portfolio! A course written for working professionals (not a beginner-level course).

(4.7) 120 reviews

1,480 learners

Level Intermediate

Course period Unlimited

React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT
React
React
TypeScript
TypeScript
Spring Boot
Spring Boot
JPA
JPA
JWT
JWT

Reviews from Early Learners

Reviews from Early Learners

4.7

5.0

minho.ha

31% enrolled

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

5.0

원데이

30% enrolled

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.

5.0

b0i4s

18% enrolled

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.

What you will gain after the course

  • React Development Process

  • API Server Development

  • JWT Authentication Processing

  • Redux Toolkit

  • React Query

  • Zustand

'Even if you have three bushels of beads, they are only a treasure if they are strung together' - Knowing is different from creating!


The content used for corporate employee training and introductory training for new hires is now on Inflearn!


I see many new employees who know React and Spring Boot, but when given actual tasks, they fail to produce results. The reason they can't apply what they've studied so hard is likely due to a lack of understanding of the process.


You can generate the detailed code you want using ChatGPT, but the problem is that you cannot explain exactly what kind of code it is that you want.


Project progression requires processes or procedures that many people can agree on. And a lot of practice is needed for this.


  • Precautions before taking the course

    • Since this course focuses on procedures and processes rather than simple grammar or concepts, basic React syntax is not covered. Additionally, you must have experience with JavaScript and TypeScript.

    • The Java portion is conducted using Spring Boot 3.4.x and does not cover basic knowledge.


Additional materials or questions needed during learning are being distributed through the 'Gugongage Coding Grouphttps://cafe.naver.com/gugucoding' cafe.


2026/01/02

There have been changes to the screen and other elements in the Kakao Login settings section.


https://docs.google.com/presentation/d/1ndFy0UfqcIHMbSF2Kyjtw3o8Gimx7I9GVeEaE-7lfs8/edit?usp=sharing


Please refer to the document.


2025/12/05

The most important section in Spring Boot, "Section 3 - Building a Todo API Server," has been updated with lectures using Spring Boot 4.0.0.


2025/11/26

When developing with Spring Boot 4.0.0 using VSCode, you may encounter an issue where JUnit 5 test codes do not function properly (this issue does not occur in IntelliJ).


If you encounter issues while using VSCode, please refer to https://blog.naver.com/cookie_00/224088514199.



2025/06/24

As the Vite version has been updated to 7.0.0, a situation has arisen where tailwindcss is not yet properly supported.

If you created your project using npm create vite@latest

Open the package.json file and change the vite version at the end to 6.

"devDependencies": { ... "vite": "^6.0.0" }

After making the changes, run npm install and

npm install tailwindcss @tailwindcss/vite

If you run that, it should be added successfully.





2025/05/03

The video lectures will be updated with content produced using Vite and TypeScript.

Although it was produced to be as similar as possible to the structure of the existing lecture, there may be slight differences in progress.

The source code will also be fully updated and released to be compatible with React version 19.






Added on 2025/02/24

The complete code written in Vite and TypeScript has been added to the end of the course as part of the lesson materials.


Major Version Changes

React-Router version 7

React Query Version 5

Spring Boot version 3.4.2

These are the parts of the code that have been changed.


Things to watch out for when creating with Vite are

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

has been added to.



Added on 2024/03/28

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




We will build an API server using Spring Boot and utilize it within a React project.

In this process, we will cover the following examples.

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

  • Product Example - Axios

  • Login processing - Redux Toolkit, JWT

  • Social Login Processing

  • Shopping Cart Implementation

  • React Query, Recoil Practice


To-Do Example


  • In the case of React projects, React-Router is used to handle navigation to different screens based on the address bar.

  • You can set up a common layout and use <Outlet> to configure screens appropriate for each module.

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

  • You will learn how to design and use custom hooks to reduce redundant code.

Product Example

  • You can personally complete the file upload process and implement modal handling for the processing results.

Login/Social Login Processing, Shopping Cart Implementation



  • We will implement authentication processing through login handling and social login.

  • Manage login status using RTK (Redux Toolkit) and ensure login information is remembered by utilizing cookies in the browser.


  • We will look into how to create Access Tokens and Refresh Tokens using JWT and apply them to the project.

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



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

Recommended for
these people

Who is this course right for?

  • Those who want to build an API server

  • Those who are concerned about how to apply React syntax

Need to know before starting?

  • JavaScript

  • Spring

  • Web Programming

Hello
This is zk202308a5410

2,259

Learners

168

Reviews

291

Answers

4.8

Rating

5

Courses

Gumonggage Coding Team is a community established in 2015 for people working in development-related fields to gather.

The lectures are currently being conducted by Manager Cookie, who is the operator of the Guman-gage Coding Group.

I began my career in development in 2000 and have experience working across venture companies, SMEs, large corporations, and as a freelancer.

Since the 2010s, I have been primarily focusing on corporate training and consulting.

Naver Cafe

I have development experience with corporations, large enterprises, and as a freelancer. Since the 2010s, my primary focus has been on corporate training and consulting. Naver Cafe

Major Publications

Spring Web Project Learned Through Code

Learning Spring Boot Through Code

Learning React through Code

Implementation of RESTful API Server

Spring 6 Legacy Project

Java Web Development Workbook

React Native in Action (Translation)

Development/Lecturing

Worked at Samsung SDS Development Team

Worked at SK Customer Happiness Co., Ltd.

Corporate lectures for companies including KT, SK, POSDATA, Kyobo Life, Shinsegae, Asiana, National Health Insurance Service, and more.

More

Curriculum

All

98 lectures ∙ (21hr 54min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

120 reviews

4.7

120 reviews

  • windguy19995381님의 프로필 이미지
    windguy19995381

    Reviews 1

    Average Rating 5.0

    5

    30% enrolled

    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
      Instructor

      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.

  • feelsagood님의 프로필 이미지
    feelsagood

    Reviews 1

    Average Rating 5.0

    5

    31% enrolled

    • withoutthem님의 프로필 이미지
      withoutthem

      Reviews 17

      Average Rating 4.9

      4

      16% enrolled

      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
        Instructor

        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.

    • insoobaek님의 프로필 이미지
      insoobaek

      Reviews 4

      Average Rating 5.0

      5

      18% enrolled

      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
        Instructor

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

    • greatha님의 프로필 이미지
      greatha

      Reviews 2

      Average Rating 5.0

      5

      31% enrolled

      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

      zk202308a5410's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!

      $59.40