코드로 배우는 리액트 - 회사에서 개발할 때 쓰는 리액트와 스프링 부트

리액트와 스프링 부트를 이용해서 프런트 엔드와 백 엔드를 분리한다면?

이 책은 리액트의 문법이나 기능을 다루는 책이 아닙니다. 이 책에서 다루는 주제는 '리액트를 어떻게 활용하는가'입니다. 리액트는 많은 기능을 제공하지만, 그 자체로 프레임워크는 아니기 때문에 설계의 자유도가 높고 활용하는 라이브러리에 따라서 구현 방식도 천차만별입니다. 따라서, 기존 웹 개발에서는 예상하지 못했던 문제들이 발생합니다(예를 들어 URI에 따라서 원하는 화면을 보여주거나 새로고침에 따른 애플리케이션의 초기화 등).
이 책은 리액트를 이용하면서 겪는 문제들의 방법론에 관한 이야기입니다. 과감하게 이론적인 설명은 줄이고 현실적으로 자주 사용하는 함수형 컴포넌트와 훅스를 이용하는 처리, Tailwind CSS를 사용하는 빠른 CSS 처리 등 최소한의 시간으로 확장 가능한 리액트 애플리케이션의 구조를 만드는 방식을 설명한 실습서입니다.

[이 책의 대상 독자]
ㆍJava 개발에 어느 정도 익숙하고 JavaScript나 React를 경험해본 개발자
ㆍJava의 경우 스프링이나 스프링 부트를 활용해서 개발 경험이 있는 개발자
ㆍ리액트의 컴포넌트 상태, 속성 등에 대한 실습 경험이 있는 개발자

[예제 프로젝트에서 리액트의 활용]
ㆍTailwind CSS를 이용하는 화면 구성과 레이아웃 설계
ㆍReact Router를 사용해서 URI에 따른 화면 분기, 코드 스플리팅
ㆍ함수형 컴포넌트와 훅스(Hooks)를 활용한 상태, 통신, 커스텀 훅스 제작
ㆍRedux Toolkit과 브라우저의 쿠키를 이용한 로그인 상태 관리
ㆍJWT를 사용한 인증 처리와 Access Token/Refresh Token 처리
ㆍ애플리케이션 내에서 카카오 로그인 연동 기능의 구현

[예제 프로젝트에서 스프링 부트의 활용]
ㆍREST 방식의 API 서비스 제작과 예외 처리
ㆍ스프링 시큐리티의 적용과 JWT 인증 처리
ㆍSpring Data JPA를 이용한 데이터베이스 연동
ㆍ파일 업로드 및 썸네일 처리
ㆍAWS 빈즈톡을 이용한 배포

[소스코드 다운로드 및 Q&A]
이 책으로 공부하다가 이해하기 어려운 부분이나 궁금한 사항이 생기면 구멍가게 코딩단 카페에서 질문하여 해결하기 바랍니다. 또한, 소스코드 다운로드는 카페 자료실에서 확인할 수 있습니다.
카페 주소: http://cafe.naver.com/gugucoding

[목 차]

이 책을 내며 1
이 책을 내며 2
들어가며

Chapter 01 개발 환경설정
1.1 리액트 환경설정
1.1.1 리액트 프로젝트 생성
1.2 VSCode 설치
1.2.1 VSCode 설정
1.2.2 Tailwind CSS 설치
1.3 Maria DB 설정
1.3.1 실습용 스키마/계정 생성
1.4 스프링 부트 설정
1.4.1 JDK 설치
1.4.2 STS 플러그인 설치
1.4.3 스프링 부트 프로젝트 생성

Chapter 02 React-Router
2.1 개발 목표의 이해
2.1.1 React-Router 추가
2.2 React-Router 설정
2.2.1 페이지용 컴포넌트 추가와 설정
2.3 를 통한 이동
2.3.1 페이지 컴포넌트 레이아웃
2.4 레이아웃 컴포넌트와 children
2.5 상단 메뉴 컴포넌트 구성
2.5.1 새로운 단위 기능과 라우팅
2.6 하위 경로의 설정과
2.7 todo/list 경로 처리
2.7.1 React-Router의 중첩 라우팅
2.8 중첩 라우팅의 분리와 리다이렉션(Redirection)
2.8.1 리다이렉션 처리
2.9 URL Params 사용하기
2.9.1 페이지 추가
2.10 경로 처리를 위한 useParams( )
2.10.1 useSearchParams( )
2.10.2 useNavigate( )
2.11 동적 페이지 이동
2.11.1 조회 -> 수정/삭제 이동
2.11.2 조회 -> 목록 이동
2.11.3 수정/삭제 페이지

Chapter 03 스프링 부트와 API 서버
3.1 프로젝트 설정
3.1.1 Spring Data JPA 설정
3.1.2 엔티티 클래스 작성
3.2 TodoRepository 테스트
3.2.1 데이터 추가
3.2.2 데이터 조회
3.2.3 데이터 수정
3.2.4 데이터 삭제
3.2.5 페이징 처리
3.3 서비스 계층과 DTO 처리
3.3.1 서비스 선언
3.3.2 ModelMapper 라이브러리
3.4 서비스 계층의 구현
3.4.1 등록 기능의 구현
3.4.2 조회 기능의 구현
3.4.3 수정/삭제 기능의 구현
3.5 목록 처리와 DTO
3.5.1 목록(페이징) 처리 구현
3.5.2 RESTful 서비스를 위한 컨트롤러
3.6 @RestControllerAdvice
3.7 REST관련 툴을 이용한 POST/PUT/DELETE
3.7.1 Formatter를 이용한 LocalDate 처리
3.7.2 POST 방식의 등록 처리
3.7.3 PUT 방식의 수정 처리
3.7.4 DELETE 방식의 삭제 처리

Chapter 04 리액트와 API 서버 통신
4.1 개발 목표의 이해
4.2 Ajax 통신 처리
4.3 useEffect( )
4.3.1 조회를 위한 컴포넌트
4.4 네비게이션 관련 커스텀 훅
4.4.1 목록 페이지로 이동
4.4.2 수정/삭제 페이지로 이동
4.5 목록 데이터 처리
4.5.1 목록 데이터 가져오기
4.5.2 페이징 처리
4.5.3 동일 페이지 클릭 시 문제
4.5.4 조회 페이지 이동
4.6 등록 컴포넌트와 모달창 처리
4.6.1 서버 호출 결과 확인
4.6.2 모달 컴포넌트의 제작
4.6.3 페이지 이동
4.7 수정/삭제 처리
4.7.1 수정/삭제 호출 기능 작성
4.7.2 수정/삭제를 위한 컴포넌트
4.7.3 서버 데이터 출력
4.7.4 수정/삭제와 모달창

Chapter 05 상품 API 서버 구성하기
5.1 파일 업로드를 위한 설정
5.1.1 상품 정보 처리를 위한 DTO
5.2 컨트롤러에서의 파일 처리
5.2.1 썸네일 이미지 처리
5.2.2 업로드 파일 보여주기
5.2.3 서버 내부에서 파일 삭제
5.3 엔티티 처리
5.3.1 레퍼지토리 처리
5.3.2 상품 조회와 Lazy loading
5.3.3 상품의 삭제
5.3.4 상품의 수정
5.3.5 이미지가 포함된 목록 처리
5.4 서비스 계층과 컨트롤러 연동
5.4.1 목록 기능의 처리
5.4.2 등록 기능의 처리
5.4.3 조회 기능의 처리
5.4.4 수정 기능의 처리
5.4.5 삭제 기능의 처리

Chapter 06 리액트와 상품 API 서버 연동
6.1 상품 관련 React-Router 설정
6.1.1 상품 IndexPage
6.1.2 ListPage
6.2 등록 페이지와 컴포넌트 처리
6.2.1 라우팅 설정
6.2.2 상품의 AddComponent와 API 호출
6.3 목록 페이지와 목록 컴포넌트 처리
6.3.1 ListComponent 처리
6.3.2 페이지 이동
6.4 조회 페이지와 조회 컴포넌트
6.4.1 ReadComponent 처리
6.4.2 데이터 출력과 이동
6.5 수정/삭제 페이지와 컴포넌트 처리
6.5.1 ModifyComponent 처리
6.5.2 삭제 버튼의 동작 처리

Chapter 07 시큐리티와 API 서버
7.1 스프링 시큐리티 설정
7.1.1 API 서버를 위한 기본 설정
7.1.2 Member 엔티티 처리
7.1.3 테스트 코드를 이용한 등록/조회 확인
7.2 DTO와 인증 처리 서비스
7.2.1 UserDetailsService 구현
7.2.2 로그인 성공 후 JSON 데이터 생성
7.3 JWT 문자열 생성
7.3.1 JWT 문자열 생성과 검증
7.4 Access Token 체크 필터
7.4.1 필터를 통한 검증/예외 처리
7.4.2 @PreAuthorize를 통한 접근 권한 처리
7.5 Refresh Token
7.5.1 Refresh Token의 발행
7.5.2 애플리케이션에서의 시나리오

Chapter 08 리덕스 툴킷
8.1 리덕스 툴킷 설정
8.1.1 스토어 설정
8.1.2 슬라이스와 리듀서
8.2 useSelector( ) / useDispatch( )
8.2.1 로그인 페이지와 로그인
8.2.2 로그아웃 페이지와 로그아웃
8.3 비동기 호출과 createAsyncThunk( )
8.3.1 로그인 후처리
8.3.2 로그인 관련 기능 처리를 위한 커스텀 훅
8.3.3 로그인이 필요한 페이지
8.3.4 로그아웃 처리
8.4 쿠키를 이용한 애플리케이션 상태 저장
8.4.1 로그인 결과의 쿠키 보관
8.5 Axios 인터셉터와 Refresh Token
8.5.1 Access Token의 전달
8.5.2 Refresh Token을 이용한 자동 갱신

Chapter 09 리액트 소셜 로그인
9.1 소셜 로그인과 OAuth2.0
9.1.1 예제 구현 방식
9.2 카카오 연동 설정
9.2.1 로그인 동의 설정
9.3 리액트에서 카카오 로그인
9.3.1 인가 코드의 처리
9.3.2 Access Token 받기
9.4 API 서버에서 Access Token 처리
9.4.1 MemberService의 개발
9.4.2 SocialController의 개발
9.4.3 리액트의 호출 테스트
9.5 자동 회원 추가 및 회원정보의 반환
9.5.1 MemberService 회원 처리
9.5.2 컨트롤러의 결과 처리
9.5.3 리액트의 로그인 처리
9.5.4 화면 이동 처리
9.6 회원정보 수정
9.6.1 회원정보 수정 화면 처리
9.6.2 API 서버의 회원정보 수정
9.6.3 리액트와 API 연동

Chapter 10 장바구니 API 만들기
10.1 장바구니 엔티티의 설계
10.1.1 장바구니 관련 엔티티
10.2 장바구니 DTO의 설정
10.3 Repository의 설정
10.3.1 CartRepository
10.3.2 CartItemRepository
10.4 장바구니 서비스 계층의 설계/구현
10.5 컨트롤러 계층과 테스트
10.5.1 장바구니 아이템의 추가/수정
10.5.2 사용자의 장바구니 목록
10.5.3 장바구니 아이템의 삭제

Chapter 11 리액트 장바구니 구성
11.1 API 서버와 통신
11.1.1 cartSlice의 작성
11.2 장바구니용 컴포넌트
11.2.1 로그인 상태 체크와 장바구니
11.2.2 커스텀 훅으로 정리하기
11.3 장바구니 아이템 컴포넌트
11.3.1 장바구니 아이템 출력
11.4 상품 조회에서 장바구니 추가
11.4.1 상품 조회 기능 수정

Chapter 12 리액트 쿼리와 리코일
12.1 리액트 쿼리
12.1.1 리액트 쿼리의 설정
12.1.2 useQuery( )를 이용한 상품 조회
12.2 상품목록 페이지
12.2.1 중복적인 쿼리 키(key)
12.2.2 invalidateQueries( )
12.2.3 refresh 활용
12.3 상품등록 처리
12.3.1 useMutation( )의 반환값
12.4 상품 수정 처리
12.4.1 조회 및 상태 처리
12.4.2 삭제 처리
12.4.3 수정 처리
12.5 리코일(Recoil) 라이브러리
12.5.1 리코일 설치와 설정
12.5.2 로그인용 Atom
12.6 장바구니 처리
12.6.1 리코일의 Selector
12.6.2 장바구니 데이터 보관
12.6.3 장바구니 아이템 추가
12.6.4 로그아웃 처리

Appendix A AWS Elastic Beanstalk
A.1 빈즈톡과 IAM 서비스
A.1.1 IAM 서비스
A.2 빈즈톡 애플리케이션 생성
A.2.1 애플리케이션 생성
A.3 빈즈톡에 데이터베이스 설정
A.3.1 데이터베이스 외부 연결
A.3.2 데이터베이스 시간/문자셋 변경
A.3.3 데이터베이스 생성과 계정 생성
A.4 API 서버 수정
A.4.1 API 서버 애플리케이션 등록
A.4.2 빈즈톡의 애플리케이션 추가
A.5 리액트 연동 확인
A.5.1 파일 업로드의 사이즈 변경
A.6 S3 업로드 처리
A.6.1 IAM을 이용한 S3 사용자 생성
A.6.2 버킷 정책 설정
A.7 API 서버의 S3 설정
A.7.1 application.properties 설정
A.7.2 S3 업로드 코드 작성 및 테스트
A.7.3 프로젝트에서 S3 업로드 처리
A.7.4 빈즈톡 배포
A.8 리액트 애플리케이션의 배포
A.8.1 카카오 로그인 설정 변경

찾아보기