Thumbnail
BEST
개발 · 프로그래밍 풀스택

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

(4.9)
12개의 수강평 ∙  428명의 수강생
77,000원

월 15,400원

5개월 할부 시
지식공유자: 구멍가게코딩단
총 100개 수업 (24시간 27분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
리액트(React) 개발 프로세스
API 서버 개발
JWT 인증 처리
리덕스 툴킷(Redux Toolkit)
리코일(Recoil)
리액트 쿼리(React Query)

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
API 서버를 만들고 싶은 분들
리액트 문법을 어떻게 적용해야 하는지 고민하는 분들
📚
선수 지식,
필요할까요?
자바스크립트(JavaScript)
스프링(Spring)
웹 프로그래밍

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

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

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

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

ㄴ네이버 카페

 

커리큘럼 총 100 개 ˙ 24시간 27분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. React-Router
React-Router 설정 미리보기 13:34 공통레이아웃설정 미리보기 11:41 Outlet을 이용한 서브메뉴 미리보기 13:34
경로값 추출을 위한 useParams 13:54
useSearchParams 와 useNavigate 12:11
동적페이지 이동 13:41
실습코드
섹션 2. 스프링부트와 API서버
부트 프로젝트 생성 및 확인 미리보기 14:28 엔티티 클래스 만들기 미리보기 12:56
엔티티의 테스트 17:55
목록(페이징)처리 구현 09:15
Querydsl설정하기 18:45
DTO 설정과 서비스계층 만들기 16:11
서비스계층 만들기 12:47
페이지처리를 위한 DTO설계 23:38
Querydsl 검색처리 17:28
REST 방식 컨트롤러 만들기(1) 10:05
@RestControllerAdvice 12:37
REST 방식 컨트롤러 만들기(2) 13:29
REST컨트롤러 - 수정/삭제, CORS설정 10:19
섹션 3. 리액트와 API서버 통신
Ajax를 위한 Axios설정 17:07
조회기능 구현 11:58
네비게이션관련 커스텀 훅 11:00
목록 처리(1) 13:06
목록처리(2)-동일 페이지 클릭 처리 13:29
조회 페이지 이동 15:58
모달 컴포넌트 제작 20:37
수정/삭제 처리 20:48
섹션 4. 상품 API 서버 구성하기
파일 업로드 설정과 확인 미리보기 23:08
파일업로드 섬네일처리 17:31
업로드파일 조회/삭제 14:56
엔티티처리 18:20
엔티티 CRUD 처리 18:14
Querydsl에서 @ElementCollection 처리 21:05
서비스계층 - 상품 목록 처리 14:48
서비스계층과 컨트롤러(1) - 상품 목록/등록 12:19
서비스계층과 컨트롤러(2)-상품조회 12:56
서비스계층과 컨트롤러(3)-상품수정 25:48
서비스계층과 컨트롤러(4)-상품삭제 05:24
섹션 5. 리액트와 상품 API 서버 연동
상품관련 React-Router 설정 미리보기 08:20
상품 목록 처리 07:58
상품등록 컴포넌트처리 20:44
결과 모달창 처리 14:04
상품 목록 컴포넌트 처리 14:01
상품 조회 컴포넌트 처리 16:48
상품 수정/삭제 컴포넌트 처리(1) 21:16
상품 수정/삭제 컴포넌트 처리(2) 19:45
섹션 6. 시큐리티와 API서버
스프링 시큐리티 추가 및 기본 설정 미리보기 12:07
사용자 엔티티 처리 14:30
DTO와 인증 서비스 18:38
로그인 성공과 실패 처리 18:08
JWT문자열 생성하기 12:34
JWT 체크 필터 만들기 21:00
JWT와 @PreAuthorize 이용하기 11:30
Access토큰과 Refresh토큰 14:09
Refresh토큰을 이용한 토큰 갱신 19:30
섹션 7. 리덕스 툴킷
리덕스 툴킷 설정 17:45
로그인 페이지 설정 13:47
로그인 적용 확인 13:22
로그 아웃 처리 07:02
비동기 호출과 createAsyncThunk 11:45
로그인 관련 커스텀 훅 만들기 14:00
쿠키를 이용한 로그인 유지 16:52
로그 아웃시 쿠키 처리 05:05
Axios인터셉터와 AccessToken 10:22
Refresh 토큰을 이용한 Access 토큰 자동 갱신 18:48
섹션 8. 리액트 소셜 로그인
카카오애플리케이션 설정 16:05
인가코드 받기 15:26
카카오 Access 토큰 받기 09:56
API서버에서 사용자 정보 추출하기(1) 20:53
API서버에서 사용자 정보 추출하기(2) 09:13
API 서버에서 소셜 회원처리 22:22
API서버와 리액트 연동 확인 15:37
리액트 사용자 정보 수정 12:19
리액트 사용자 정보 수정 완료 18:49
섹션 9. 장바구니 API 만들기
장바구니 엔티티 설계 23:57
장바구니 DTO 설정 16:32
사용자의 장바구니 아이템 목록 23:28
Repository개발 및 테스트(1) 17:28
Repository개발 및 테스트(2) 22:53
장바구니 서비스 계층 20:24
장바구니 컨트롤러 처리 19:41
섹션 10. 리액트 장바구니 구성
cartSlice 작성 14:08
장바구니용 컴포넌트처리 10:27
장바구니 수량 변경 및 커스텀 훅 22:19
상품 조회에서 장바구니 추가 11:13
섹션 11. React Query와 Recoil
React Query 설정 10:53
useQuery 와 상품 조회 14:49
상품 목록 중복 호출 처리 18:47
상품 등록 처리 11:26
상품 수정/삭제 처리 20:16
Recoil 로그인 설정 16:46
Recoil 소셜 로그인 처리 05:16
Recoil 장바구니 처리 19:01
부록_AWS 빈즈톡, RDS, S3 자료
강의 게시일 : 2023년 12월 05일 (마지막 업데이트일 : 2024년 04월 16일)
수강평 총 12개
수강생분들이 직접 작성하신 수강평입니다.
4.9
12개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
원데이 thumbnail
5
이런 강의가 정말 실무에 도움이 되는 강의라고 생각됩니다. 강사님의 경험에서 우러나오는 팁이나 정보들도 좋았습니다. 강의에 나오는 각 기술들의 깊이는 강의 특성상 조금 얕은감이 있는것 같은데, 검색이나 책을 참고하니깐 쉽게 이해가 감니다. 단, 저 년차의 개발자는 조금 힘들 수 도 있을것 같네요.
2024-04-09
지식공유자 구멍가게코딩단
제작의도를 이해해 주셔서 감사합니다. 말씀하신대로 기초적인 부분의 설명에 한계가 좀 있었습니다. 하지만 실무에서 프로젝트를 한다고 생각하고 과감하게 줄인게 이정도네요.. 앞으로 남은 학습하시는 동안 카페나 인프런을 통해서 질문 올리시면 아는만큼 도와드리도록 하겠습니다.
2024-04-10
효선 thumbnail
5
저술하신 책 기반으로 강의를 제작하신 것 같은데, 강의만 들어도 전혀 진행하는데 문제가 없습니다. 강사님이 긴 코드는 붙여넣으시고, 설명을 해주시는 방식으로 시간을 절약하셔서 강의 시간 대비 내용도 굉장히 알차고, 사전 지식이 좀 부족해도 설명해주시는 내용으로 어느정도 이해는 가능합니다. 저는 스프링부트 부분만 보고 구매를 했고, 백엔드 부분까지는 전부 수강을 하고 지금은 처음부터 다시보고 있는데 스프링 부분만 봐도 강의 가격 이상의 값어치를 한다고 생각합니다. 문법 수준에서 막히는게 없고, 스프링 학습을 어느정도 하셨다면 강의 따라가는데 큰 문제는 없을거에요. 매우매우 추천드립니다. 책보다 강의를 더 좋아하는 편이라, 혹시 추후에 인프런에 다른 강의도 제작할 계획이 있는지도 궁금하네요 ㅎㅎ. 좋은 강의 만들어주셔서 감사합니다!
2023-12-26
지식공유자 구멍가게코딩단
처음이라 실수도 많고 부족한 점들도 많습니다. 좋게 봐주시고 이해해 주셔서 감사할 따름입니다 감사합니다
2023-12-26
BBBBB thumbnail
5
요즘같이 프론트, 백 하나만 한다고 되는게 아닌 시기에 항상 애매하게 프론트만 따로 만들어 보고 백만 따로 만들어 보고 정상적인 통합 프로젝트를 한 번 만들어보고 싶다는 생각 들었는데, 한쪽만 알고 계신 분이 아니라 메인을 하나 두고 양쪽의 통합적인 측면에서 궁금증을 가지고 있었던 분들에게 정말 좋은 강의라고 생각합니다. 저는 책은 구입하지 않았지만 강의로도 부족함이 없는 것 같네요. 그렇지만 책과 같이 보면 다시 찾아보는 시간을 줄 일 수 있을 것 같다는 생각이 들긴 하네요. 참고로 리액트, 스프링 둘 다 선수지식이 좀 필요하긴 하지만 일주일만 공부해도 알 수 있는 내용들이니 풀스택에 관심이 조금이라도 있으신 분들에게 좋은 강의가 될 것이라고 생각합니다. 좋은 강의 감사합니다.
2023-12-28
지식공유자 구멍가게코딩단
제작 의도를 완벽하게 이해해 주셔서 감사합니다. 남은 강의들도 도움이 되시면 좋겠습니다. 감사합니다.
2023-12-28
이건희 thumbnail
5
너무 도움이 되는 강의입니다! 그런데 파일을 다루는 미디어 서버를 따로 두면 좋다고 하셨는데 (NGINX 등을 이용) 이러한 구조를 실습할 수 있거나 참고할 만한 자료들이 혹시 있을까요?
2024-03-28
지식공유자 구멍가게코딩단
도움이 되셨다니 다행입니다^^ Nginx나 S3에 대한 자료는 많이 있긴 합니다. Nginx의 경우 파일 업로드 컨텐츠 경로로 수정하면 간단히 할 수 있습니다. https://hongddo.tistory.com/106 S3의 경우는 책의 부록에서 AWS빈즈토크와 S3를 이용하도록 처리하고 있긴 합니다. 마지막 강의 자료로 PDF파일을 올려두겠습니다. 참고해서 보시기 바랍니다. 우선 참고하실만한 링크는 여기가 좋을 듯 합니다. https://techblog.woowahan.com/11392/
2024-03-28
얼티밋 thumbnail
5
특이사항이나 질문사항에 대해서 엄청나게 빠른 피드백이 좋았습니다. 한번에 이해할 수 없는 부분들도 많지만 전반적으로 어떻게 API를만들고 어떻게 사용해야할지를 알려주셔서 응응력 기르는데는 최고인듯합니다.
2024-01-04
지식공유자 구멍가게코딩단
와.. 100% 완료시네요^^ 조금이라도 도움이 되셨다니 다행입니다.
2024-01-04