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

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

$35.00
Ask a Question
Vendor: 남가람북스 - 구멍가게 코딩단
Type: 웹프로그래밍일반
SKU: 9791189184117
Categories: ALL BOOKS 컴퓨터/인터넷 컴퓨터/인터넷_홈페이지/웹
Tags: 컴퓨터/IT_웹프로그래밍 코드로배우는리액트회사에서개발할때쓰는리액트와스프링부트
Description
리액트와 스프링 부트를 이용해서 프런트 엔드와 백 엔드를 분리한다면?
이 책은 리액트의 문법이나 기능을 다루는 책이 아닙니다. 이 책에서 다루는 주제는 '리액트를 어떻게 활용하는가'입니다. 리액트는 많은 기능을 제공하지만, 그 자체로 프레임워크는 아니기 때문에 설계의 자유도가 높고 활용하는 라이브러리에 따라서 구현 방식도 천차만별입니다. 따라서, 기존 웹 개발에서는 예상하지 못했던 문제들이 발생합니다(예를 들어 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
저자

구멍가게코딩단

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

목차

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

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

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

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

Chapter04리액트와API서버통신
4.1개발목표의이해
4.2Ajax통신처리
4.3useEffect()
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수정/삭제와모달창

Chapter05상품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상품조회와Lazyloading
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삭제기능의처리

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

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

Chapter08리덕스툴킷
8.1리덕스툴킷설정
8.1.1스토어설정
8.1.2슬라이스와리듀서
8.2useSelector()/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.5Axios인터셉터와RefreshToken
8.5.1AccessToken의전달
8.5.2RefreshToken을이용한자동갱신

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

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

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

Chapter12리액트쿼리와리코일
12.1리액트쿼리
12.1.1리액트쿼리의설정
12.1.2useQuery()를이용한상품조회
12.2상품목록페이지
12.2.1중복적인쿼리키(key)
12.2.2invalidateQueries()
12.2.3refresh활용
12.3상품등록처리
12.3.1useMutation()의반환값
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로그아웃처리

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

찾아보기

출판사 서평

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

[이책의특징]
 기업교육과정에서진행했던리액트개발에대한핵심노하우를정리
 하나의프로젝트를완성해가면서단계별기능을추가하는실습위주의구성
 React-Router를이용한프런트엔드/REST방식의백엔드분리구성
 JWT를이용한인증처리및Access/RefreshToken의처리구현
 RTK(리덕스툴킷)/ReactQuery/Recoil라이브러리활용및적용
 AWS클라우드환경에서ElasticBeanstalk,RDS,S3를이용해서프로젝트배포