BEST

Learn React 19 with Code using Spring Boot API Server

Name: Learn React 19 with Code using Spring Boot API Server
Price: 53900 KRW
Rating: 4.7 (115 reviews)

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.

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

Courses

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

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

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

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

ㄴ네이버 카페

주요 저서

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

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

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

Curriculum

All

98 lectures ∙ (21hr 54min)

Course Materials:

Lecture resources

Section 1. Development Environment Setup

3 lectures ∙ (34min)

1. React Project Creation
11:58
2. Tailwind CSS Setup - Must check class notes
12:49
3. MariaDB and Boot Project Creation
10:10

Section 2. React-Router

7 lectures ∙ (1hr 5min)

4. React-Router Setup
18:56
5. Common Layout Settings
07:59
6. Todo Layout
16:48
7. useParams to get path values
11:22
8. Dynamic processing
05:49
9. Introduction to React Router Framework Mode
04:30
10. Lab code

Section 3. Spring Boot and API Server

13 lectures ∙ (3hr 8min)

11. Boot project creation and verification
14:23
12. Creating an Entity Class
15:02
13. Entity test
15:28
14. Implement list (paging) processing
12:50
15. Setting up Querydsl
11:56
16. DTO Setup and Service Layer Build
17:50
17. Creating a service layer
11:44
18. DTO design for pagination
25:37
19. Querydsl search processing
18:43
20. Making a REST controller (1)
13:10
21. @RestControllerAdvice
12:10
22. Making a RESTful Controller (2)
14:14
23. REST Controller - Update/Delete, CORS configuration
05:16

Section 4. React and API server communication

8 lectures ∙ (1hr 51min)

Section 5. Configuring a Product API Server

11 lectures ∙ (3hr 4min)

Section 6. React and Product API Server Integration

8 lectures ∙ (1hr 36min)

Section 7. Security and API Server

9 lectures ∙ (2hr 22min)

Section 8. Redux Toolkit

10 lectures ∙ (1hr 59min)

Section 9. React Social Login

9 lectures ∙ (1hr 17min)

Section 10. Building a Shopping Cart API

7 lectures ∙ (2hr 24min)

Section 11. React Shopping Cart Setup

4 lectures ∙ (47min)

Section 12. React Query and Zustand

9 lectures ∙ (1hr 42min)

Section 13. vite code

0 lectures

Published:

Last updated:

Reviews

All

115 reviews

4.7

115 reviews

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
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.
- withoutthem
  Oh, there are situations like that too. I'm learning again. Thank you.
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
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
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!

React start with Next.js

zk202308a5410

New to React? You need to think about how to learn React's fundamental concepts solidly yet quickly. Start with Next.js and JavaScript with minimal knowledge. Let's develop by selecting only the essential examples needed for real-world development. The Todo example is so important that you should develop it twice. Once focusing on components, and then focusing on routing that handles browser paths! Use Zustand for login! You can handle global state with a really small amount of code.

입문

JavaScript, React, Web Application

React start with Next.js

zk202308a5410

Next.js with Spring Boot

zk202308a5410

Traditional React development and Next.js development are completely different approaches. This course penetrates the core of the latest Next.js 16 and teaches you the 'real' Next.js way of development. Experience how to achieve both performance and efficiency, from job portfolio projects to real-world projects. Let's develop the Next.js way! The course is structured to help you learn by doing, creating actual examples to understand how to apply Next.js features. You'll learn faster through actual code rather than theory, focusing on Server Components and covering Server Actions and caching strategies. Since the goal of the course is to catch up with the Next.js vibe as quickly as possible, the lectures are conducted using JavaScript. However, each lecture's examples are additionally provided as course materials created in TypeScript. December 18, 2025 - Updated to Next.js 16

중급이상

JavaScript, React, Spring Boot

Next.js with Spring Boot

zk202308a5410

Learning Spring Web Project with Code - Intermediate

zk202308a5410

What if you need to study Spring Legacy projects? What if you want to create XML configurations one by one? What if you need to apply Spring Security to a Spring project?

초급

Spring, JSP, mybatis

Learning Spring Web Project with Code - Intermediate

zk202308a5410

Spring Web Project Learning with Code - Basic

zk202308a5410

What if you need to study Spring Legacy projects? What if you want to create XML configurations one by one?

초급

Spring, mybatis, JSP

Spring Web Project Learning with Code - Basic

zk202308a5410

Similar courses

Explore other courses in the same field!

Learn Full-Stack Board Development Faster Than Anyone

Neo

This course includes both server (Java+Springboot) and front-end (React, ReactNative, Flutter, Android, iOS) development. Experience building a full-stack bulletin board with this course.

입문

React, React Native, iOS

Learn Full-Stack Board Development Faster Than Anyone

Neo

React Native with Expo: Learning Properly from ZeroCho

zerocho

Web developers (especially React developers) can now truly easily launch apps. With Expo, you can launch both Android and iOS apps even faster. Let's become a developer who can quickly launch apps with Expo.

초급

React, React Native, Hybrid App

React Native with Expo: Learning Properly from ZeroCho

zerocho

React start with Next.js

zk202308a5410

입문

JavaScript, React, Web Application

React start with Next.js

zk202308a5410

Learn Springboot + React RestAPI Board Faster Than Anyone

Neo

Learn Springboot + React RestAPI Board Creation Faster Than Anyone Develop a CRUD server with Springboot and create your own board with React!!

초급

React, Java, Kotlin

Learn Springboot + React RestAPI Board Faster Than Anyone

Neo

Creating a Super Simple REST API Bulletin Board with Spring Boot and React

neneee

A practical course on easily building a super simple bulletin board with Spring Boot and React.js! This course focuses less on theory and more on hands-on practice, covering the web application development process for quick completion.

입문

Spring Boot, react.js, JPA

Creating a Super Simple REST API Bulletin Board with Spring Boot and React

neneee

Building a Chat Platform Using Spring Boot

Hong

You can learn about JWT and ws communication using Spring Boot, and how to handle high TPS.

초급

Spring Boot, JWT, websocket

Building a Chat Platform Using Spring Boot

Hong

Creating an Avatar Community App (React Native Expo)

Kyo

We develop an avatar-based community app with React Native. You'll learn to build a comprehensive community app, covering post creation, comments/replies, likes, voting, avatar generation, etc.

초급

React Native, TypeScript, expo

Creating an Avatar Community App (React Native Expo)

Kyo

Bite-sized Real-world Project - SNS Edition

winterlood

Now it's time to take on the real challenge 🔥 Let's develop a professional-grade SNS together using React.js + TypeScript + Supabase, creating features like authentication & authorization, infinite scroll, image upload, likes, infinite nested comments, dark mode, and more. Throughout this process, we'll also explore server and global state management techniques using Zustand and Tanstack Query.

중급이상

supabase, zustand, react-query

Bite-sized Real-world Project - SNS Edition

winterlood

[Renewal] Building a Restaurant Map App (React Native & NestJS)

Kyo

You'll learn the process of developing and launching your own restaurant recording app using React Native. We've prepared the entire process from design to front-end and back-end development, and deployment.

중급이상

React Native, TypeScript, NestJS

[Renewal] Building a Restaurant Map App (React Native & NestJS)

Kyo

Slack Clone Coding [Real-time Chat with React]

zerocho

Let's start serious React web development by creating it following the Slack service! From sign-up, login, room creation, to real-time chat!

중급이상

Clone Coding, React, TypeScript

Slack Clone Coding [Real-time Chat with React]

zerocho

Spring Boot with Kotlin for Beginners - Building Your Own Portfolio Site

infomuscle

From theory to practice. You can learn the entire web development process by deploying your self-developed website to the cloud.

초급

Spring Boot, Kotlin, JPA

Spring Boot with Kotlin for Beginners - Building Your Own Portfolio Site

infomuscle

Web game that lets you learn by following along

John Ahn

This course will teach you how to develop web games.

중급이상

React

Web game that lets you learn by following along

John Ahn

Learn React.js with Projects

kossiecoder

You can learn React basics through blog projects.

초급

React, Redux, ES6

Learn React.js with Projects

kossiecoder

Deploy a server that learns chicken combo value in 1 hour

Neo

For the price of a chicken combo, learn the deployment process in order: Spring Boot manual deployment → Docker deployment → Github Action CI/CD!

초급

AWS, Docker, Spring Boot

Deploy a server that learns chicken combo value in 1 hour

Neo

jOOQ in action! Type Safe SQL with Java

sdm32851630

Experience the power of Type Safe SQL with jOOQ!

중급이상

Java, jooq, SQL

jOOQ in action! Type Safe SQL with Java

sdm32851630

Learn NestJS by following along

John Ahn

In this course, you will learn about NestJS.

초급

NestJS, PostgreSQL, TypeORM

Learn NestJS by following along

John Ahn

Learning Web Development Concepts and Vibe Coding from Zero Base

jeyong

In the era of swift execution and validation, execute faster than anyone with VIBE Coding! Achieve complete monetization, from ads to payments, all by yourself.

입문

React, Web Application, Next.js

Learning Web Development Concepts and Vibe Coding from Zero Base

jeyong

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

codecamp

Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

codecamp

# [Electron #1] Building a Timer App with Electron + React (With Zustand)

dakgangjung123

This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

초급

React, Electron, GUI

# [Electron #1] Building a Timer App with Electron + React (With Zustand)

dakgangjung123

Infrastructure Workshop - Creating a plausible service

brainbackdoor

This course proceeds in stages, similar to the actual work, by learning and applying the necessary knowledge while configuring the infrastructure.

초급

Network, Linux, Spring Boot

Infrastructure Workshop - Creating a plausible service

brainbackdoor

Learn React 19 with Code using Spring Boot API Server

Reviews from Early Learners

What you will gain after the course

'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!

To-Do Example

Product Example

Login/Social Login Processing, Shopping Cart Implementation

Recommended for
these people

Hello
This is

Curriculum

Reviews

zk202308a5410's other courses

Similar courses

Learn React 19 with Code using Spring Boot API Server

Reviews from Early Learners

What you will gain after the course

'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!

To-Do Example

Product Example

Login/Social Login Processing, Shopping Cart Implementation

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

zk202308a5410's other courses

Similar courses

Recommended for
these people

Hello
This is