스무디 한 잔 마시며 끝내는 리액트+TDD (테스트 주도 개발로 리액트 프로젝트 완성하기)

김정헌

한국의중소기업에서MFC를사용한윈도우프로그램개발을시작으로안드로이드,iOS,웹개발자로활동을하였다.그후,웹프로그래머로서호주에서활동하였으며현재는일본기업에서풀스택엔지니어로서리액트,리액트네이티브를사용한서비스를개발중이다.업무이외에도리액트와리액트네이티브를사용한앱을개발중이며앱개발중에겪었던일을블로그로게재하고있다.
2019년에는많은사람이리액트네이티브를사용하여좀더쉽게iOS와안드로이드앱을개발할수있도록,〈스무디한잔마시며끝내는ReactNative〉를출간하였다.

ㆍ블로그
https://dev-yakuza.posstree.com/ko/
ㆍ저자앱리스트
https://dev-yakuza.posstree.com/app/list/ko/
ㆍ스무디한잔마시며끝내는ReactNative
https://github.com/bjpublic/Reactnative

1리액트란?
1.1자바스크립트의역사
1.2리액트의특징
1)가상돔
2)단방향데이터바인딩
3)JSX
4)선언형프로그래밍
1.3요약

2리액트개발환경
2.1맥개발환경설정
1)홈브루설치
2)노드설치
2.2윈도우개발환경설정
1)초코렛티설치
2)노드설치
2.3리액트를시작하는방법
2.4create-react-app
2.5요약

3리액트의테스트-Jest
3.1Jest의장접
1)제로설정
2)스냅샷
3)모의객체
4)테스트코드의분리
5)간단한API
3.2프로젝트준비
3.3Jest설치
3.4사용방법
3.5Matcher
1)toEqual
2)toBeTruthy,toBeFalsy
3)toContain
4)기타
3.6코드커버리지
3.7요약

4리액트테스트-react-testing-library
4.1react-testing-library
4.2react-testing-library의장점
4.3프로젝트준비
4.4react-testing-library설치
4.5사용방법
4.6요약

5나의첫리액트프로젝트
5.1타입스크립트
5.2styled-components
5.3절대경로로컴포넌트추가
5.4Prettier
5.5요약

6Props와State
6.1Props와State란
6.2프로젝트준비
6.3개발
1)App컴포넌트
2)Button컴포넌트
3)Input컴포넌트
4)ToDoItem컴포넌트
5)State
6.4테스트
1)Button컴포넌트
2)Input컴포넌트
3)ToDoItem컴포넌트
4)App컴포넌트
6.5요약

7클래스컴포넌트
7.1클래스컴포넌트
7.2프로젝트준비
7.3개발
1)Button컴포넌트
2)Input컴포넌트
3)ToDoItem컴포넌트
4)App컴포넌트
7.4라이프사이클함수
1)constructor함수
2)render함수
3)getDerivedStateFromProps함수
4)componentDidMount함수
5)shouldComponentUpdate함수
6)getSnapshotBeforeUpdate함수
7)componentDidUpdate함수
8)componentWillUnmount함수
9)componentDidCatch함수
10)호출순서
7.5테스트
7.6요약

8ContextAPI와localStorage
8.1ContextAPI
8.2프로젝트준비
8.3개발
1)InputContainer컴포넌트
2)ToDoList컴포넌트
3)ToDoList컨텍스트
4)App컴포넌트에프로바이더적용
5)InputContainer컴포넌트에컨슈머적용
6)ToDoList컴포넌트에컨슈머적용
8.4localStorage
8.5useEffect훅
8.6테스트
1)ToDoList컨텍스트
2)InputContainer컴포넌트
3)ToDoList컴포넌트
4)App컴포넌트
8.6요약

9react-router
9.1react-router
9.2프로젝트준비
9.3개발
1)react-router
2)List페이지컴포넌트
3)Add페이지컴포넌트
4)InputContainer컴포넌트
5)ToDoItem컴포넌트
6)ToDoList컴포넌트
7)Detail페이지컴포넌트
8)PageHeader컴포넌트
9)NotFound페이지컴포넌트
9.4테스트
1)InputContainer컴포넌트
2)PageHeader컴포넌트
3)ToDoItem컴포넌트
4)ToDoList컴포넌트
5)Add페이지컴포넌트
6)Detail페이지컴포넌트
7)List페이지컴포넌트
8)NotFound페이지컴포넌트
9)App컴포넌트
9.5요약

10TDD맛보기
10.1테스트주도개발이란
10.2프로젝트준비
10.3개발
1)PageHeader컴포넌트
2)Button컴포넌트
3)List페이지컴포넌트
4)Add페이지컴포넌트
5)Detail페이지컴포넌트
6)NotFound페이지컴포넌트
7)App컴포넌트
10.4요약

부록
배포

이책은리액트와리액트에서테스트코드를작성하는방법을좀더쉽게이해할수있게액트의기초부터리액트에서테스트를위해사용하는Jest와react-testing-library를다루는방법,그리고예제를통해실제프로젝트에서리액트와리액트의테스트코드를활용하는방법을자세히소개하고있다.
이책은리액트에관한책으로자바스크립트에관해서는다루고있지않다.하지만리액트를처음접하는사람에게는명령어를보여주면서하나하나따라할수있게만들어진책이다.
리액트에대한이해와테스트주도개발에대한이해를한번에끝내고싶다면이책으로시작해보길바란다.