Learn React 19 with Code using Spring Boot API Server

'Even if you have three bushels of jewels, they're only valuable when strung together' - Knowing and making are different things!

When training employees in companies / Use Inflearn for group training content for new employees!

I see React and Spring Boot knowledge, but when I assign actual work to new hires, many produce no results. The reason they struggle to apply what they've studied so hard is likely due to a lack of understanding of the process.

The problem is that while you can create detailed code using ChatGPT, you can't explain what code you actually want.

Project progress requires processes or procedures that many people can agree on. And it also requires a lot of practice to achieve this.

• Precautions Before Enrollment

  • This course focuses on procedures and processes rather than simple grammar or concepts, so it does not cover basic React syntax. Additionally, you must have experience with JavaScript and TypeScript.

  • The Java section will be conducted using Spring Boot 3.4.x and will not cover basic knowledge.

Additional materials and questions needed during your learning are distributed through the '구멍가게 코딩단https://cafe.naver.com/gugucoding' cafe.

2025/11/26

When developing Spring Boot 4.0.0 using VSCode, you may encounter issues where JUnit5 test code does not work properly (there are no problems in IntelliJ).

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

2025/06/24

A situation has occurred where tailwindcss is not yet properly supported as the vite version has been upgraded to 7.0.0.

If you created your project using npm create vite@latest

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

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

After making the modifications, run npm install

npm install tailwindcss @tailwindcss/vite

When you run it, it should be added normally.

2025/05/03

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

The course has been created to be as similar as possible to the structure of the existing course, but there may be slight differences in the pace of progress.

The source code will also be updated to match React 19 and deployed accordingly.

2025/02/24 Added

The complete code with Vite and TypeScript has been added to the course materials at the very end of the lecture.

Major Version Changes

React Router version 7

React Query Version 5

Spring Boot version 3.4.2

and other changes to the code.

The things to be careful about when creating with vite are

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

I've added it.

2024/03/28 Added

I've added materials on using AWS Elastic Beanstalk, RDS, and S3 as attachments to the final lecture.

You will create an API server using Spring Boot and utilize it in a React project.

In this process, we will cover the following examples.

• # Todo Example - React-Router, Axios, Pagination, Querydsl Configuration

• Product Example - Axios

• Login Processing - Redux Toolkit, JWT

• Social Login Processing

• Shopping Cart Implementation

• # React Query, Recoil Practice

  
  

To-Do Example

• For React projects, React-Router is used to handle navigation to different screens based on the URL in the address bar.

• Set up a common layout, andand other tools to configure screens appropriate for each module.

• Routing configuration can be maintained in a separate file for easier maintenance.

• To reduce redundant code, you'll learn how to design and use custom hooks.

Product Example

• You can directly complete the file upload process, upload progress tracking, and modal handling for processing results.

Login/Social Login Processing, Shopping Cart Implementation

• Implement authentication processing through login handling and social login.

• Using RTK (Redux Toolkit), we manage the login state and utilize cookies in the browser to remember login information.

  
  

• We'll explore how to create Access Tokens and Refresh Tokens using JWT and apply them to your project.

• In the final chapter, we'll convert examples written using React Query and Zustand.