강의

멘토링

로드맵

BEST
Programming

/

Full-stack

Learning React 19 with Code and Spring Boot API Server

API server built with Spring Boot (Spring Boot ver3.4.x) and React 19 (with TypeScript) Completing the integration project! Producing the entire portfolio writing bootcamp as lectures.

(4.8) 99 reviews

1,346 learners

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

Reviews from Early Learners

What you will learn!

  • React Development Process

  • API Server Development

  • JWT Authentication Process

  • Redux Toolkit (Redux Toolkit)

  • React Query(React Query)

  • Zustand

'구슬이 서 말이어도 꿰어야 보배' - 아는 것과 만드는 건 다르다!


리액트도 알고 부트도 아는데 실제 업무를 시켜보면 결과물이 없는 신입들을 많이 봅니다. 힘들게 공부했는데 써먹지 못하는 원인은 아마도 프로세스에 대한 이해가 부족하기 때문입니다.


Chat GPT를 이용해서 원하는 상세한 코드는 만들어 낼 수 있는데 문제는 자신이 원하는 코드가 무엇인지 설명할 수 없다는 것입니다.


프로젝트의 진행은 많은 사람들이 동의할 수 있는 과정이나 절차가 필요합니다. 그리고 이를 위한 연습도 많이 필요합니다.


  • 수강 전 주의 사항

    • 이 강의는 단순 문법이나 개념이 아닌 절차와 과정에 대한 강의이므로 React의 기초적인 문법은 다루지 않습니다. 또한 JavaScript 와 TypeScript 에 대한 경험이 반드시 있어야만 합니다.

    • Java 부분은 Spring Boot 3.4.x를 이용해서 진행되고 기초적인 지식에 대해서는 다루지 않습니다.


학습 중 필요한 추가적인 자료나 질문들은 '구멍가게 코딩단https://cafe.naver.com/gugucoding' 카페를 통해서 배포하고 있습니다.


2025/06/24

vite 버전이 7.0.0으로 올라가면서 아직 tailwindcss가 정상적으로 지원하지 못하는 상황이 발생합니다.

npm create vite@latest 를 통해서 프로젝트를 생성하셨다면

package.json 파일을 열어서 마지막에 있는 vite 버전을 6으로 수정합니다.

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

수정한 후에 npm install을 수행하고

npm install tailwindcss @tailwindcss/vite

을 실행하면 정상적으로 추가되실 겁니다.





2025/05/03

Vite와 TypeScript로 제작된 동영상 강의로 업데이트 됩니다.

기존 강의의 구성과 최대한 유사하게 제작되었지만 약간의 진도의 차이가 발생할 수 있습니다.

소스 코드 역시 React 19버전에 맞게 모두 수정되어서 배포됩니다.






2025/02/24 추가

vite와 타입스크립트로 된 전체 코드가 수업자료로 강의 맨 마지막에 추가되었습니다.


주요 변경 버전

React-Router 7버전

React Query 5버전

스프링 부트 3.4.2버전

등이 변경된 코드입니다.


vite 생성시 주의해야 하는 내용은

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

에 추가해 두었습니다.



2024/03/28 추가

마지막 강의의 첨부 파일로 AWS 빈즈톡, RDS, S3 를 이용하는 자료를 추가해 두었습니다.




스프링 부트를 이용해서 API 서버를 제작하고, 이를 리액트 프로젝트에서 활용합니다.

이 과정에서 다음과 같은 예제들을 다루게 됩니다.

  • Todo 예제 - React-Router, Axios, 페이징 처리 , Querydsl 설정

  • 상품 예제 - Axios

  • 로그인 처리 - Redux Toolkit, JWT

  • 소셜 로그인 처리

  • 장바구니 구현

  • React Query, Recoil 실습


To-Do 예제


  • 리액트 프로젝트의 경우 React-Router를 이용해서 주소창에 따라서 다른 화면으로 이동을 처리합니다.

  • 공통의 레이아웃을 설정하고, 등을 이용해서 각 모듈에 맞는 화면을 구성할 수 있습니다.

  • 라우팅 설정은 별도의 파일로 유지 보수가 용이하도록 구성할 수 있습니다.

  • 중복적인 코드를 줄이기 위해서 커스텀 훅을 설계해서 사용하는 방법을 학습합니다.

상품 예제

  • 파일 업로드와 업로드 과정, 처리 결과에 대한 모달 처리 등을 직접 완성해 볼 수 있습니다.

로그인/소셜 로그인 처리, 장바구니 구현



  • 로그인 처리와 소셜 로그인을 통해서 인증 처리를 구현해 봅니다.

  • RTK(리덕스 툴킷)을 이용해서 로그인 상태를 관리하고 브라우저에서 쿠키를 활용해서 로그인 정보를 기억하도록 합니다.


  • JWT를 이용해서 Access Token과 Refresh Token을 작성하고 이를 프로젝트에 적용하는 방법을 살펴봅니다.

  • 마지막 장에서는 React Query와 Zustand을 이용해서 작성된 예제를 변환해 봅니다.



강의에 사용된 소스코드는 각 섹션의 마지막 강의에 첨부되어 있습니다.

Recommended for
these people

Who is this course right for?

  • Those who want to build an API server

  • People pondering how to apply React syntax

Need to know before starting?

  • JavaScript(JavaScript)

  • Spring (Spring)

  • Web Programming

Hello
This is

1,913

Learners

125

Reviews

260

Answers

4.8

Rating

4

Courses

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

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

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

ㄴ네이버 카페

 

Curriculum

All

98 lectures ∙ (21hr 56min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

99 reviews

4.8

99 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

      $45.10

      24%

      $59.40

      zk202308a5410's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!