21. 코드로 배우는 리액트

 

저자: 구멍가게 코딩단, 유영진
출판사: 남가람북스
발행일: 2023-12-01
ISBN: 979-11-89184-11-7
가격: 35000
페이지: 592
판형: 182*232*25

 

[저자 소개]

- 구멍가게 코딩단 -

프로그래밍을 좋아하는 10년 차 이상의 개발자, 강사들의 비공개 모임. 강의와 개발 등을 하면서 얻은 지식을 정리하기 위해서 집필 활동을 하고 있다. 네이버 카페(https://cafe.naver.com/gugucoding)에서 독자들과 소통하고 있다. 최근에는 기업체 교육활동을 위주로 관련 지식을 전파하고 있다. 저서로는 <코드로 배우는 스프링 웹 프로젝트[개정판]>, <코드로 배우는 스프링 부트 웹 프로젝트>, <스타트 스프링 부트> 등이 있다.

 

- 구멍가게 코딩단 유영진 -

SI, 웹 및 게임 개발 분야에서 여러 프로젝트를 수행하고 KIST에서 다양한 연구 과제를 수행하였다. 이후에는 대학 및 교육기관에서 자바와 웹 기술에 관한 강의를 진행하는 강사로 활동하고 있다. 현재는 소규모 IT 개발 회사를 운영하며 다양한 프로젝트를 진행하는 동시에 IT 기술 관련 서적을 저술하고 있다.

 

[책 소개]

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

이 책은 리액트의 문법이나 기능을 다루는 책이 아닙니다. 이 책에서 다루는 주제는 '리액트를 어떻게 활용하는가'입니다. 리액트는 많은 기능을 제공하지만, 그 자체로 프레임워크는 아니기 때문에 설계의 자유도가 높고 활용하는 라이브러리에 따라서 구현 방식도 천차만별입니다. 따라서, 기존 웹 개발에서는 예상하지 못했던 문제들이 발생합니다(예를 들어 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

 

[출판사 리뷰]

이 책에서 사용하는 스프링 부트는 화면 구성이 하나도 없는 상태로 제작됩니다. REST 방식으로 데이터를 제공하고, 세션이나 쿠키를 사용하지 않기 때문에 JWT를 통해서 인증 처리를 합니다. 스프링 시큐리티와 JPA를 활용해서 데이터를 처리하는데 각 단계에서는 Postman을 이용해서 작성된 코드의 결과를 확인하는 방식으로 구현하고 이를 리액트 애플리케이션과 연동하도록 구현하는 절차를 보여줍니다.

 

[이 책의 특징]

*  기업 교육과정에서 진행했던 리액트 개발에 대한 핵심 노하우를 정리

*  하나의 프로젝트를 완성해 가면서 단계별 기능을 추가하는 실습 위주의 구성

*  React-Router를 이용한 프런트 엔드 / REST 방식의 백 엔드 분리 구성

*  JWT를 이용한 인증 처리 및 Access/Refresh Token의 처리 구현

*  RTK(리덕스툴킷) / React Query/Recoil 라이브러리 활용 및 적용

*  AWS 클라우드 환경에서 Elastic Beanstalk, RDS, S3를 이용해서 프로젝트 배포

 

[이 책의 구성]

이 책은 다음과 같이 총 12 Chapter와 부록(Appendix)으로 구성되어 있습니다.

1장. 개발 환경설정

2장. React-Router

3장. 스프링 부트와 API 서버

4장. 리액트와 API 서버 통신

5장. 상품 API 서버 구성하기

6장. 리액트와 상품 API 서버 연동

7장. 시큐리티와 API 서버

8장. 리덕스 툴킷

9장. 리액트 소셜 로그인

10장. 장바구니 API 만들기

11장. 리액트 장바구니 구성

12장. 리액트 쿼리와 리코일

부록(Appendix). AWS Elastic Beanstalk

 

[목차]

이 책을 내며 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 <Link>를 통한 이동

2.3.1 페이지 컴포넌트 레이아웃

2.4 레이아웃 컴포넌트와 children

2.5 상단 메뉴 컴포넌트 구성

2.5.1 새로운 단위 기능과 라우팅

2.6 하위 경로의 설정과 <Outlet>

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 카카오 로그인 설정 변경

 

찾아보기