인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

풀스택

코드로 배우는 React with 스프링부트 API서버

스프링 부트(Spring Boot ver3.4로 제작되는 API 서버와 리액트의 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작

(4.7) 수강평 68개

수강생 1,148명

ReactSpring BootJWTredux-toolkitJPA
Thumbnail

초급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.

이런 걸 배울 수 있어요

  • 리액트(React) 개발 프로세스

  • API 서버 개발

  • JWT 인증 처리

  • 리덕스 툴킷(Redux Toolkit)

  • 리액트 쿼리(React Query)

  • Zustand

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


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


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


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

이 강의는 단순 문법이나 개념이 아닌 절차와 과정에 대한 강의입니다. 2023년 12월 출간된 '코드로 배우는 리액트(https://www.yes24.com/Product/Goods/123363647)' 도서의 내용을 강의로 풀어서 설명합니다.


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

2025/05/04

기존 강의로 학습하시는 분들 중에 필요하신 분들을 위해서 한시적으로 기존 강의는 유튜브에 공개합니다.


공개 기간: 2025-05-04 ~ 2025_06-04 일 한달

​

https://www.youtube.com/playlist?list=PLO_s5-oeIdB2MIhTI4cspxzKFxjRvCWoR


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를 이용해서 주소창에 따라서 다른 화면으로 이동을 처리합니다.

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

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

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

상품 예제

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

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



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

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


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

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



스크린샷 2025-05-03 000720

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • API 서버를 만들고 싶은 분들

  • 리액트 문법을 어떻게 적용해야 하는지 고민하는 분들

선수 지식,
필요할까요?

  • 자바스크립트(JavaScript)

  • 스프링(Spring)

  • 웹 프로그래밍

안녕하세요
구멍가게코딩단입니다.

1,475

명

수강생

83

개

수강평

236

개

답변

4.7

점

강의 평점

3

개

강의

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

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

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

ㄴ네이버 카페

 

더보기

커리큘럼

전체

98개 ∙ (21시간 56분)

해당 강의에서 제공:

수업자료
    강의 게시일: 
    마지막 업데이트일: 

    수강평

    아직 충분한 평가를 받지 못한 강의입니다.
    모두에게 도움이 되는 수강평의 주인공이 되어주세요!