코드로 배우는 리액트 : 회사에서 개발할 때 쓰는 리액트와 스프링 부트
구멍가게코딩단,유영진
저자:구멍가게코딩단
프로그래밍을좋아하는10년차이상의개발자,강사들의비공개모임.강의와개발등을하면서얻은지식을정리하기위해서집필활동을하고있다.네이버카페(cafe.naver.com/gugucoding)에서독자들과소통하고있다.최근에는기업체교육활동을위주로관련지식을전파하고있다.저서로는<코드로배우는리액트>,<코드로배우는스프링웹프로젝트[개정판]>,<코드로배우는스프링부트웹프로젝트>등이있다.
저자:유영진
SI,웹및게임개발분야에서여러프로젝트를수행하고KIST에서다양한연구과제를수행하였다.이후에는대학및교육기관에서자바와웹기술에관한강의를진행하는강사로활동하고있다.현재는소규모IT개발회사를운영하며다양한프로젝트를진행하는동시에IT기술관련서적을저술하고있다.
이책을내며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를통한이동
2.3.1페이지컴포넌트레이아웃
2.4레이아웃컴포넌트와children
2.5상단메뉴컴포넌트구성
2.5.1새로운단위기능과라우팅
2.6하위경로의설정과
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카카오로그인설정변경
찾아보기
리액트와스프링부트를이용해서프런트엔드와백엔드를분리한다면?
이책은리액트의문법이나기능을다루는책이아닙니다.이책에서다루는주제는'리액트를어떻게활용하는가'입니다.리액트는많은기능을제공하지만,그자체로프레임워크는아니기때문에설계의자유도가높고활용하는라이브러리에따라서구현방식도천차만별입니다.따라서,기존웹개발에서는예상하지못했던문제들이발생합니다(예를들어URI에따라서원하는화면을보여주거나새로고침에따른애플리케이션의초기화등).
이책은리액트를이용하면서겪는문제들의방법론에관한이야기입니다.과감하게이론적인설명은줄이고현실적으로자주사용하는함수형컴포넌트와훅스를이용하는처리,TailwindCSS를사용하는빠른CSS처리등최소한의시간으로확장가능한리액트애플리케이션의구조를만드는방식을설명한실습서입니다.
[이책의대상독자]
-Java개발에어느정도익숙하고JavaScript나React를경험해본개발자
-Java의경우스프링이나스프링부트를활용해서개발경험이있는개발자
-리액트의컴포넌트상태,속성등에대한실습경험이있는개발자
[예제프로젝트에서리액트의활용]
-TailwindCSS를이용하는화면구성과레이아웃설계
-ReactRouter를사용해서URI에따른화면분기,코드스플리팅
-함수형컴포넌트와훅스(Hooks)를활용한상태,통신,커스텀훅스제작
-ReduxToolkit과브라우저의쿠키를이용한로그인상태관리
-JWT를사용한인증처리와AccessToken/RefreshToken처리
-애플리케이션내에서카카오로그인연동기능의구현
[예제프로젝트에서스프링부트의활용]
-REST방식의API서비스제작과예외처리
-스프링시큐리티의적용과JWT인증처리
-SpringDataJPA를이용한데이터베이스연동
-파일업로드및썸네일처리
-AWS빈즈톡을이용한배포
[소스코드다운로드및Q&A]
이책으로공부하다가이해하기어려운부분이나궁금한사항이생기면구멍가게코딩단카페에서질문하여해결하기바랍니다.또한,소스코드다운로드는카페자료실에서확인할수있습니다.
카페주소:cafe.naver.com/gugucoding
이책에서사용하는스프링부트는화면구성이하나도없는상태로제작됩니다.REST방식으로데이터를제공하고,세션이나쿠키를사용하지않기때문에JWT를통해서인증처리를합니다.스프링시큐리티와JPA를활용해서데이터를처리하는데각단계에서는Postman을이용해서작성된코드의결과를확인하는방식으로구현하고이를리액트애플리케이션과연동하도록구현하는절차를보여줍니다.
[이책의특징]
-기업교육과정에서진행했던리액트개발에대한핵심노하우를정리
-하나의프로젝트를완성해가면서단계별기능을추가하는실습위주의구성
-React-Router를이용한프런트엔드/REST방식의백엔드분리구성
-JWT를이용한인증처리및Access/RefreshToken의처리구현
-RTK(리덕스툴킷)/ReactQuery/Recoil라이브러리활용및적용
-AWS클라우드환경에서ElasticBeanstalk,RDS,S3를이용해서프로젝트배포
[이책의구성]
이책은다음과같이총12Chapter와부록(Appendix)으로구성되어있습니다.
1장.개발환경설정
2장.React-Router
3장.스프링부트와API서버
4장.리액트와API서버통신
5장.상품API서버구성하기
6장.리액트와상품API서버연동
7장.시큐리티와API서버
8장.리덕스툴킷
9장.리액트소셜로그인
10장.장바구니API만들기
11장.리액트장바구니구성
12장.리액트쿼리와리코일
부록(Appendix).AWSElasticBeanstalk