강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

Learn React 19 with Code using Spring Boot API Server

Complete a project integrating an API server built with Spring Boot (Spring Boot ver3.4.x) and React 19 (with TypeScript)! Apply frontend to your backend portfolio! This course is written for working professionals (not a beginner-level course).

(4.7) 115 reviews

1,419 learners

  • zk202308a5410
웹개발
저자 직강
실습 중심
React
TypeScript
Spring Boot
JPA
JWT

Reviews from Early Learners

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 jewels, they're only valuable when strung together' - Knowing and making are different things!


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


I see many new developers who know React and Boot, but when given actual work tasks, they produce no results. The reason why they struggle to apply what they've studied so hard is probably 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 learning are distributed through the '구멍가게 코딩단https://cafe.naver.com/gugucoding' cafe.



2025/12/05

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


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 any issues 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 changes, run npm install

npm install tailwindcss @tailwindcss/vite

When you run it, it should be added normally.





2025/05/03

The online course will be updated with video lectures created using Vite and TypeScript.

The course has been created to be as similar as possible to the existing course structure, 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 written in 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 3.4.2 version

The code has been modified, etc.


When creating with Vite, here are the important things to note:

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, you 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, andYou can configure screens suitable for each module using the back, etc.

  • The routing configuration can be organized into separate files for easier maintenance.

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

Product Example

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

Login/Social Login Processing, Shopping Cart Implementation



  • Implement authentication handling through login processing and social login.

  • RTK (Redux Toolkit) is used to manage login state, and cookies are utilized 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.



✅ 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?

  • People who want to create API servers

  • People who are wondering how to apply React syntax

Need to know before starting?

  • JavaScript

  • Spring

  • Web Programming

Hello
This is

2,151

Learners

158

Reviews

276

Answers

4.8

Rating

5

Courses

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

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

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

Curriculum

All

98 lectures ∙ (21hr 54min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

115 reviews

4.7

115 reviews

  • 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

    • withoutthem님의 프로필 이미지
      withoutthem

      Reviews 13

      Average Rating 4.8

      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.

    • 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.

    • 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.

    • gryunlim5021님의 프로필 이미지
      gryunlim5021

      Reviews 10

      Average Rating 5.0

      5

      31% enrolled

      I didn't know there was a discount coupon at the cafe ㅠㅠ I just bought it, but... It's a valuable lecture that includes springboot+react. Thank you for the great lecture.

      Limited time deal ends in 7 days

      $53,900.00

      30%

      $59.40

      zk202308a5410's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!