스프링 부트(Spring Boot ver3.4.x)로 제작되는 API 서버와 React 19 (with TypeScript) 연동 프로젝트 완성하기! 백엔드 포트폴리오에 프론트 엔드 적용! 실무자들을 대상으로 작성된 강의(초급자용 강의는 아닙니다.)
잡코리아
임직원들도 이 강의를 듣고 있어요!
잡코리아
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
5.0
minho.ha
실제 프로젝트를 순서대로 코딩하면서 설명해 주는 것이 많은 도움이 돼요. 다만 제 실력이 이를 따라가지 못할 뿐이죠. 하하하하하
5.0
원데이
이런 강의가 정말 실무에 도움이 되는 강의라고 생각됩니다. 강사님의 경험에서 우러나오는 팁이나 정보들도 좋았습니다. 강의에 나오는 각 기술들의 깊이는 강의 특성상 조금 얕은감이 있는것 같은데, 검색이나 책을 참고하니깐 쉽게 이해가 감니다. 단, 저 년차의 개발자는 조금 힘들 수 도 있을것 같네요.
5.0
b0i4s
요즘같이 프론트, 백 하나만 한다고 되는게 아닌 시기에 항상 애매하게 프론트만 따로 만들어 보고 백만 따로 만들어 보고 정상적인 통합 프로젝트를 한 번 만들어보고 싶다는 생각 들었는데, 한쪽만 알고 계신 분이 아니라 메인을 하나 두고 양쪽의 통합적인 측면에서 궁금증을 가지고 있었던 분들에게 정말 좋은 강의라고 생각합니다. 저는 책은 구입하지 않았지만 강의로도 부족함이 없는 것 같네요. 그렇지만 책과 같이 보면 다시 찾아보는 시간을 줄 일 수 있을 것 같다는 생각이 들긴 하네요. 참고로 리액트, 스프링 둘 다 선수지식이 좀 필요하긴 하지만 일주일만 공부해도 알 수 있는 내용들이니 풀스택에 관심이 조금이라도 있으신 분들에게 좋은 강의가 될 것이라고 생각합니다. 좋은 강의 감사합니다.
리액트(React) 개발 프로세스
API 서버 개발
JWT 인증 처리
리덕스 툴킷(Redux Toolkit)
리액트 쿼리(React Query)
Zustand
리액트도 알고 부트도 아는데 실제 업무를 시켜보면 결과물이 없는 신입들을 많이 봅니다. 힘들게 공부했는데 써먹지 못하는 원인은 아마도 프로세스에 대한 이해가 부족하기 때문입니다.
Chat GPT를 이용해서 원하는 상세한 코드는 만들어 낼 수 있는데 문제는 자신이 원하는 코드가 무엇인지 설명할 수 없다는 것입니다.
프로젝트의 진행은 많은 사람들이 동의할 수 있는 과정이나 절차가 필요합니다. 그리고 이를 위한 연습도 많이 필요합니다.
수강 전 주의 사항
이 강의는 단순 문법이나 개념이 아닌 절차와 과정에 대한 강의이므로 React의 기초적인 문법은 다루지 않습니다. 또한 JavaScript 와 TypeScript 에 대한 경험이 반드시 있어야만 합니다.
Java 부분은 Spring Boot 3.4.x를 이용해서 진행되고 기초적인 지식에 대해서는 다루지 않습니다.
학습 중 필요한 추가적인 자료나 질문들은 '구멍가게 코딩단https://cafe.naver.com/gugucoding' 카페를 통해서 배포하고 있습니다.
2026/01/02
카카오 로그인 설정 부분에 화면 변경 등이 있습니다.
https://docs.google.com/presentation/d/1ndFy0UfqcIHMbSF2Kyjtw3o8Gimx7I9GVeEaE-7lfs8/edit?usp=sharing
문서를 참고하시기 바랍니다.
2025/12/05
스프링 부트에서 가장 중요한 섹션 3- Todo API 서버 만들기 부분은 Spring Boot 4.0.0으로 업데이트한 강의로 수정되었습니다.
2025/11/26
Spring Boot 4.0.0을 VSCode를 이용해서 개발하는 경우 Junit5의 테스트 코드가 정상적으로 동작하지 않는 문제가 발생할 수 있습니다(Intellij에서는 문제가 없습니다.).
VSCode를 이용해서 문제가 발생하시면 https://blog.naver.com/cookie_00/224088514199 를 참고하시기 바랍니다.
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 실습
리액트 프로젝트의 경우 React-Router를 이용해서 주소창에 따라서 다른 화면으로 이동을 처리합니다.
공통의 레이아웃을 설정하고, <Outlet>등을 이용해서 각 모듈에 맞는 화면을 구성할 수 있습니다.
라우팅 설정은 별도의 파일로 유지 보수가 용이하도록 구성할 수 있습니다.
중복적인 코드를 줄이기 위해서 커스텀 훅을 설계해서 사용하는 방법을 학습합니다.
/builder/270c9a0a-4465-40d4-ae8c-b666ff2df3f0/0067.jpg "0067.jpg")
파일 업로드와 업로드 과정, 처리 결과에 대한 모달 처리 등을 직접 완성해 볼 수 있습니다.
/builder/0e558177-1e32-40ce-9ce8-86c82ac122af/0060.jpg "0060.jpg")
로그인 처리와 소셜 로그인을 통해서 인증 처리를 구현해 봅니다.
RTK(리덕스 툴킷)을 이용해서 로그인 상태를 관리하고 브라우저에서 쿠키를 활용해서 로그인 정보를 기억하도록 합니다.
JWT를 이용해서 Access Token과 Refresh Token을 작성하고 이를 프로젝트에 적용하는 방법을 살펴봅니다.
마지막 장에서는 React Query와 Zustand을 이용해서 작성된 예제를 변환해 봅니다.
✅ 강의에 사용된 소스코드는 각 섹션의 마지막 강의에 첨부되어 있습니다.
학습 대상은
누구일까요?
API 서버를 만들고 싶은 분들
리액트 문법을 어떻게 적용해야 하는지 고민하는 분들
선수 지식,
필요할까요?
자바스크립트(JavaScript)
스프링(Spring)
웹 프로그래밍
커리어인증
2,540
명
수강생
192
개
수강평
299
개
답변
4.8
점
강의 평점
7
개
강의
구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.
강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.
2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.
2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.
주요 저서
코드로 배우는 스프링 웹 프로젝트
코드로 배우는 스프링 부트
코드로 배우는 React
RESTful API 서버 구현
스프링 6 레거시 프로젝트
자바 웹 개발 워크북
React Native 인 액션(번역)
개발/강의
삼성 SDS 개발팀 근무
SK 고객행복 주식회사 근무
KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의
전체
98개 ∙ (21시간 54분)
해당 강의에서 제공:
4. React-Router 설정
18:56
5. 공통레이아웃설정
07:59
6. Todo 레이아웃
16:48
8. 동적처리
05:49
11. 부트 프로젝트 생성 및 확인
14:23
12. 엔티티 클래스 만들기
15:02
13. 엔티티의 테스트
15:28
14. 목록(페이징)처리 구현
12:50
15. Querydsl설정하기
11:56
17. 서비스계층 만들기
11:44
18. 페이지처리를 위한 DTO설계
25:37
19. Querydsl 검색처리
18:43
전체
131개
4.7
131개의 수강평
수강평 2
∙
평균 평점 5.0
수강평 1
∙
평균 평점 5.0
5
이런 강의가 정말 실무에 도움이 되는 강의라고 생각됩니다. 강사님의 경험에서 우러나오는 팁이나 정보들도 좋았습니다. 강의에 나오는 각 기술들의 깊이는 강의 특성상 조금 얕은감이 있는것 같은데, 검색이나 책을 참고하니깐 쉽게 이해가 감니다. 단, 저 년차의 개발자는 조금 힘들 수 도 있을것 같네요.
제작의도를 이해해 주셔서 감사합니다. 말씀하신대로 기초적인 부분의 설명에 한계가 좀 있었습니다. 하지만 실무에서 프로젝트를 한다고 생각하고 과감하게 줄인게 이정도네요.. 앞으로 남은 학습하시는 동안 카페나 인프런을 통해서 질문 올리시면 아는만큼 도와드리도록 하겠습니다.
수강평 4
∙
평균 평점 5.0
5
요즘같이 프론트, 백 하나만 한다고 되는게 아닌 시기에 항상 애매하게 프론트만 따로 만들어 보고 백만 따로 만들어 보고 정상적인 통합 프로젝트를 한 번 만들어보고 싶다는 생각 들었는데, 한쪽만 알고 계신 분이 아니라 메인을 하나 두고 양쪽의 통합적인 측면에서 궁금증을 가지고 있었던 분들에게 정말 좋은 강의라고 생각합니다. 저는 책은 구입하지 않았지만 강의로도 부족함이 없는 것 같네요. 그렇지만 책과 같이 보면 다시 찾아보는 시간을 줄 일 수 있을 것 같다는 생각이 들긴 하네요. 참고로 리액트, 스프링 둘 다 선수지식이 좀 필요하긴 하지만 일주일만 공부해도 알 수 있는 내용들이니 풀스택에 관심이 조금이라도 있으신 분들에게 좋은 강의가 될 것이라고 생각합니다. 좋은 강의 감사합니다.
제작 의도를 완벽하게 이해해 주셔서 감사합니다. 남은 강의들도 도움이 되시면 좋겠습니다. 감사합니다.
수강평 11
∙
평균 평점 5.0
수강평 19
∙
평균 평점 4.9
4
어느정도 지식이 있으면 듣기 편안함. 단, 단위테스트코드에서 로그찍기로 눈으로 확인하는 방식이라거나, modify 메소드에서 repo.save를 호출한다거나 하는 개인스타일이 반영된 코드(?)가 많아 적절히 자신에 스타일에 맞게 녹여내기에 초보들은 어려워보임. 이런 방식으로 짜는 사람도 있구나 오 저건 좋아보이네 하는 것들을 걸러서 흡수할 정도 지식이 된다면 복습으로 상당히 좋은 강의
정상적으로 만드는 상황이라면 modify 시에 save( )를 할 필요는 없습니다(더티체크) 더티 체크가 되려면 해당 엔티티 객체는 영속 상태임을 보장할 수 있어야 합니다. 그런데 간혹 다른 개발자들과 작업하다 보면 아래와 같은 코드를 볼 때도 있습니다. @Transactional // 해당 트랜잭션 경계와 연결되는 영속성 컨텍스트와 무관한 user 엔티티 public void saveRefreshToken(User user, String newRefreshToken) { ... user.setRefreshToken(newRefreshToken); ... } 이런 경우 User객체는 더티 체크 대상이 아니게 됩니다. 이런 상황들을 대비하기 위해서 save( )를 하는 것이 안티 패턴은 아니라고 생각했습니다. -------------------------- ChatGPT Spring Data JPA에서는 엔티티의 상태를 변경하는 방법으로 두 가지 주요 접근 방식을 사용할 수 있습니다: 변경 감지(dirty checking)와 save() 메서드 사용입니다. 각각의 방법은 특정 상황에 따라 적절하게 사용될 수 있습니다. 아래에 각 방법의 장단점과 사용 사례를 설명하겠습니다. --------------------. 결론 어떤 방식을 사용할지는 상황에 따라 다릅니다. 변경 감지는 간단하고 작은 트랜잭션에 적합하며, 명시적 저장 방식(save())은 명확하고 복잡한 비즈니스 로직이 포함된 대규모 트랜잭션에 적합합니다. 일반적으로 실무에서는 두 가지 방식을 혼용하여 사용합니다. 단순한 CRUD 작업에는 변경 감지를 사용하고, 복잡한 비즈니스 로직이 필요한 경우에는 save() 메서드를 사용하여 명시적으로 관리합니다.
오 그런상황도 있군요 또 배워갑니다 감사합니다
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
