코드로 배우는 스프링 웹 프로젝트 - Basic
구멍가게코딩단
Spring Legacy 프로젝트를 공부해야 한다면? XML설정 하나하나 직접 만들어 보고 싶다면?
초급
Spring, mybatis, JSP
BEST
코드로 배우는 React with 스프링부트 API서버
스프링 부트(Spring Boot ver3.4로 제작되는 API 서버와 리액트의 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작
초급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.
이런 걸 배울 수 있어요
리액트(React) 개발 프로세스
API 서버 개발
JWT 인증 처리
리덕스 툴킷(Redux Toolkit)
리액트 쿼리(React Query)
Zustand
To-Do 예제
리액트 프로젝트의 경우 React-Router를 이용해서 주소창에 따라서 다른 화면으로 이동을 처리합니다.
공통의 레이아웃을 설정하고, <Outlet>등을 이용해서 각 모듈에 맞는 화면을 구성할 수 있습니다.
라우팅 설정은 별도의 파일로 유지 보수가 용이하도록 구성할 수 있습니다.
중복적인 코드를 줄이기 위해서 커스텀 훅을 설계해서 사용하는 방법을 학습합니다.
상품 예제
/builder/270c9a0a-4465-40d4-ae8c-b666ff2df3f0/0067.jpg?w=960 "0067.jpg")
파일 업로드와 업로드 과정, 처리 결과에 대한 모달 처리 등을 직접 완성해 볼 수 있습니다.
로그인/소셜 로그인 처리, 장바구니 구현
/builder/0e558177-1e32-40ce-9ce8-86c82ac122af/0060.jpg?w=960 "0060.jpg")
로그인 처리와 소셜 로그인을 통해서 인증 처리를 구현해 봅니다.
RTK(리덕스 툴킷)을 이용해서 로그인 상태를 관리하고 브라우저에서 쿠키를 활용해서 로그인 정보를 기억하도록 합니다.
JWT를 이용해서 Access Token과 Refresh Token을 작성하고 이를 프로젝트에 적용하는 방법을 살펴봅니다.
마지막 장에서는 React Query와 Zustand을 이용해서 작성된 예제를 변환해 봅니다.
이런 분들께
추천드려요!
학습 대상은
누구일까요?
API 서버를 만들고 싶은 분들
리액트 문법을 어떻게 적용해야 하는지 고민하는 분들
선수 지식,
필요할까요?
자바스크립트(JavaScript)
스프링(Spring)
웹 프로그래밍
안녕하세요
구멍가게코딩단입니다.
1,502
명
수강생
87
개
수강평
241
개
답변
4.7
점
강의 평점
3
개
강의
구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.
강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 담당자가 진행하고 있습니다.
2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.
커리큘럼
전체
98개 ∙ (21시간 56분)
해당 강의에서 제공:
수업자료
1. 리액트 프로젝트 생성
11:58
2. Tailwind CSS 설정
12:49
4. React-Router 설정
18:56
5. 공통레이아웃설정
07:59
6. Todo 레이아웃
16:48
8. 동적처리
05:49
11. 부트 프로젝트 생성 및 확인
14:28
12. 엔티티 클래스 만들기
12:56
13. 엔티티의 테스트
17:55
14. 목록(페이징)처리 구현
09:15
15. Querydsl설정하기
18:45
17. 서비스계층 만들기
12:47
18. 페이지처리를 위한 DTO설계
23:38
19. Querydsl 검색처리
17:28
강의 게시일:
마지막 업데이트일:
수강평
전체
71개
4.7
71개의 수강평
gryunlim수강평 10
∙
평균 평점 5.0
- 원데이
수강평 1
∙
평균 평점 5.0
5
30% 수강 후 작성이런 강의가 정말 실무에 도움이 되는 강의라고 생각됩니다. 강사님의 경험에서 우러나오는 팁이나 정보들도 좋았습니다. 강의에 나오는 각 기술들의 깊이는 강의 특성상 조금 얕은감이 있는것 같은데, 검색이나 책을 참고하니깐 쉽게 이해가 감니다. 단, 저 년차의 개발자는 조금 힘들 수 도 있을것 같네요.
- 구멍가게코딩단지식공유자
제작의도를 이해해 주셔서 감사합니다. 말씀하신대로 기초적인 부분의 설명에 한계가 좀 있었습니다. 하지만 실무에서 프로젝트를 한다고 생각하고 과감하게 줄인게 이정도네요.. 앞으로 남은 학습하시는 동안 카페나 인프런을 통해서 질문 올리시면 아는만큼 도와드리도록 하겠습니다.
- b0i4s
수강평 4
∙
평균 평점 5.0
5
18% 수강 후 작성요즘같이 프론트, 백 하나만 한다고 되는게 아닌 시기에 항상 애매하게 프론트만 따로 만들어 보고 백만 따로 만들어 보고 정상적인 통합 프로젝트를 한 번 만들어보고 싶다는 생각 들었는데, 한쪽만 알고 계신 분이 아니라 메인을 하나 두고 양쪽의 통합적인 측면에서 궁금증을 가지고 있었던 분들에게 정말 좋은 강의라고 생각합니다. 저는 책은 구입하지 않았지만 강의로도 부족함이 없는 것 같네요. 그렇지만 책과 같이 보면 다시 찾아보는 시간을 줄 일 수 있을 것 같다는 생각이 들긴 하네요. 참고로 리액트, 스프링 둘 다 선수지식이 좀 필요하긴 하지만 일주일만 공부해도 알 수 있는 내용들이니 풀스택에 관심이 조금이라도 있으신 분들에게 좋은 강의가 될 것이라고 생각합니다. 좋은 강의 감사합니다.
- 구멍가게코딩단지식공유자
제작 의도를 완벽하게 이해해 주셔서 감사합니다. 남은 강의들도 도움이 되시면 좋겠습니다. 감사합니다.
- Victor
수강평 13
∙
평균 평점 4.8
4
16% 수강 후 작성어느정도 지식이 있으면 듣기 편안함. 단, 단위테스트코드에서 로그찍기로 눈으로 확인하는 방식이라거나, 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() 메서드를 사용하여 명시적으로 관리합니다.
오 그런상황도 있군요 또 배워갑니다 감사합니다
- minho.ha
수강평 1
∙
평균 평점 5.0
구멍가게코딩단님의 다른 강의
지식공유자님의 다른 강의를 만나보세요!
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의 썸네일](https://cdn.inflearn.com/public/courses/329963/cover/26550c58-624a-41c8-86dc-fea75b6c3b22/thumbnail-frontnew.png?w=420)
![[리뉴얼] React로 NodeBird SNS 만들기강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?w=420)
