1 장 리액트 시작
1.1 왜 리액트인가?
1.1.1 리액트 이해
1.2 리액트 특징
1.2.1 Virtual DOM
1.2.2 기타 특징
1.3 작업 환경설정
1.3.1 Node.js와 npm
1.3.2 yarn
1.3.3 에디터 설치
1.3.4 Git 설치
1.3.5 create-react-app으로 프로젝트 생성

2장 JSX
2.1 코드 이해
2.2 JSX란?
2.3 JSX 장점
2.3.1 보기 쉽고 익숙하다
2.3.2 오류 검사
2.3.3 더욱 높은 활용도
2.4 JSX 문법
2.4.1 감싸인 요소
2.4.2 자바스크립트 표현
2.4.3 if 문 대신 조건부 연산자
2.4.4 &&를 사용한 조건부 렌더링
2.4.5 인라인 스타일링
2.4.6 class 대신 className
2.4.7 꼭 닫아야 하는 태그
2.4.8 주석
2.5 정리

3장 컴포넌트
3.1 첫 컴포넌트 생성
3.1.1 src 디렉터리 내부에 MyComponent.js 파일 생성
3.1.2 컴포넌트 초기 코드 작성
3.1.3 모듈 내보내기 및 불러오기
3.2 props
3.2.1 JSX 내부에서 props 렌더링
3.2.2 컴포넌트 사용할 때 props 값 설정
3.2.3 props 기본 값 설정: defaultProps
3.2.4 props 검증: propTypes
3.3 state
3.3.1 컴포넌트의 생성자 메서드: constructor()
3.3.2 state 초깃값 설정
3.3.3 JSX 내부에서 state 렌더링
3.3.4 state 값 업데이트: setState()
3.3.5 state를 constructor에서 꺼내기
3.3.6 state 값을 업데이트할 때 주의 사항
3.4 정리

4장 이벤트 핸들링
4.1 리액트의 이벤트 시스템
4.1.1 이벤트를 사용할 때 주의 사항
4.1.2 이벤트 종류
4.2 예제로 이벤트 핸들링 익히기
4.2.1 컴포넌트 생성 및 불러오기
4.2.2 onChange 이벤트 핸들링
4.2.3 임의 메서드 만들기
4.2.4 input 여러 개를 핸들링
4.2.5 onKeyPress 이벤트 핸들링
4.3 정리

5장 ref: DOM에 이름 달기
5.1 ref는 어떤 상황에서 사용해야 할까?
5.1.1 예제 컴포넌트 생성
5.1.2 App 컴포넌트에서 예제 컴포넌트 렌더링
5.1.3 DOM을 꼭 사용해야 하는 상황
5.2 ref 사용
5.2.1 사용법
5.2.2 적용
5.3 컴포넌트에 ref 달기
5.3.1 사용법
5.3.2 컴포넌트 초기 설정
5.3.3 컴포넌트에 메서드 생성
5.3.4 컴포넌트에 ref 달고 내부 메서드 사용
5.4 정리

6장 컴포넌트 반복
6.1 자바스크립트 배열의 map() 함수
6.1.1 문법
6.1.2 예제
6.2 데이터 배열을 컴포넌트 배열로 map하기
6.2.1 예제 컴포넌트 생성
6.2.2 App 컴포넌트에서 예제 컴포넌트 렌더링
6.3 key
6.3.1 key 설정
6.4 응용
6.4.1 state에 초기 데이터 담기
6.4.2 데이터 추가 기능 구현
6.4.3 데이터 제거 기능 구현
6.5 정리

7장 컴포넌트의 라이프사이클 메서드
7.1 이해
7.2 살펴보기
7.2.1 render() 함수
7.2.2 constructor 메서드
7.2.3 getDerivedStateFromProps 메서드
7.2.4 componentDidMount 메서드
7.2.5 shouldComponentUpdate 메서드
7.2.6 getSnapshotBeforeUpdate 메서드
7.2.7 componentDidUpdate 메서드
7.2.8 componentWillUnmount 메서드
7.3 사용
7.3.1 예제 컴포넌트 생성
7.3.2 App 컴포넌트에서 예제 컴포넌트 사용
7.4 정리

8장 함수형 컴포넌트
8.1 함수형 컴포넌트 사용법
8.2 언제 함수형 컴포넌트를 사용해야 할까?

9장 컴포넌트 스타일링
9.1 CSS Module
9.1.1 CSS Module 활성화
9.1.2 CSS Module 사용
9.2 Sass
9.2.1 프로젝트에 Sass 적용
9.2.2 Sass 사용
9.2.3 변수와 믹스인을 전역적으로 사용
9.2.4 Sass 라이브러리
9.2.5 버튼 생성
9.3 styled-components
9.4 정리

10장 일정 관리 웹 애플리케이션 생성
10.1 프로젝트 준비
10.1.1 create-react-app을 이용한 프로젝트 생성
10.1.2 CSS Module 및 Sass 적용
10.2 UI 디자인 및 구성
10.2.1 컴포넌트 계획
10.2.2 PageTemplate 컴포넌트 생성
10.2.3 TodoInput 컴포넌트 생성
10.2.4 TodoItem 컴포넌트 생성
10.2.5 TodoList 컴포넌트 생성
10.3 상태 관리
10.3.1 텍스트 입력 관련 상태 관리
10.3.2 초기 일정 데이터 정의 및 렌더링
10.3.3 데이터 추가
10.3.4 데이터 수정
10.3.5 데이터 제거
10.4 정리

11장 컴포넌트 리렌더링 최적화
11.1 문제점 찾기
11.1.1 리액트 개발자 도구의 Highlight Updates
11.1.2 데이터 준비
11.1.3 크롬 개발자 도구 [Performance] 탭 사용
11.2 최적화 진행
11.2.1 TodoList 컴포넌트 최적화
11.2.2 TodoItem 컴포넌트 최적화
11.3 정리

12장 리덕스 개념 이해
12.1 소개
12.2 리덕스 사용
12.2.1 JSBin 준비
12.2.2 액션과 액션 생성 함수
12.2.3 변화를 일으키는 함수, 리듀서
12.2.4 리덕스 스토어 생성
12.2.5 구독
12.2.6 dispatch로 액션 전달
12.3 리덕스의 세 가지 규칙
12.3.1 스토어는 단 한 개
12.3.2 state는 읽기 전용
12.3.3 변화는 순수 함수로 구성
12.4 정리

13장 리덕스로 리액트 애플리케이션 상태 관리
13.1 카운터 생성
13.1.1 작업 환경설정
13.1.2 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트
13.1.3 기본적인 틀 생성
13.1.4 Counter 컴포넌트 생성
13.1.5 액션 생성
13.1.6 리듀서 생성
13.1.7 스토어 생성
13.1.8 Provider 컴포넌트로 리액트 앱에 store 연동
13.1.9 CounterContainer 컴포넌트 생성
13.1.10 서브 리듀서 생성
13.2 멀티 카운터 생성
13.2.1 리덕스 개발자 도구 사용
13.2.2 Actions 수정
13.2.3 Reducers 수정
13.2.4 프리젠테이셔널 컴포넌트 생성
13.2.5 컨테이너 컴포넌트
13.3 정리

14장 리덕스, 더 편하게 사용
14.1 Immutable.js 익히기
14.1.1 객체 불변성
14.1.2 Map
14.1.3 List
14.2 Ducks 파일 구조
14.2.1 예시
14.2.2 규칙
14.3 redux-actions를 이용한 더 쉬운 액션 관리
14.3.1 createAction을 이용한 액션 생성 자동화
14.3.2 switch 문 대신 handleActions 사용
14.4 일정 관리 애플리케이션에 리덕스 적용
14.4.1 준비
14.4.2 모듈 생성
14.4.3 스토어 생성 및 설정
14.4.4 컨테이너 컴포넌트 생성
14.4.5 프로젝트 마무리
14.5 정리

15장 리덕스 미들웨어와 외부 데이터 연동
15.1 미들웨어 이해
15.1.1 미들웨어란?
15.1.2 미들웨어 생성
15.2 비동기 작업을 처리하는 미들웨어 사용
15.2.1 redux-thunk
15.2.2 웹 요청 처리
15.2.3 redux-promise-middleware
15.2.4 redux-pender
15.3 정리

16장 react-router로 SPA 개발
16.1 SPA란?
16.2 프로젝트 구성
16.2.1 프로젝트 생성 및 라이브러리 설치
16.2.2 프로젝트 초기화 및 구조 설정
16.2.3 NODEPATH 설정
16.2.4 컴포넌트 준비
16.3 Route와 파라미터
16.3.1 기본 라우트 준비
16.3.2 라우트 설정
16.3.3 라우트 파라미터와 쿼리 읽기
16.4 라우트 이동
16.4.1 Link 컴포넌트
16.4.2 NavLink 컴포넌트
16.4.3 자바스크립트에서 라우팅
16.5 라우트 안의 라우트
16.6 라우트로 사용된 컴포넌트가 전달받는 props
16.6.1 location
16.6.2 match
16.6.3 history
16.7 withRouter로 기타 컴포넌트에서 라우터 접근
16.8 정리

17장 코드 스플리팅
17.1 코드 스플리팅의 기본
17.1.1 webpack 설정 밖으로 꺼내기
17.1.2 vendor 설정
17.2 비동기적 코드 불러오기: 청크 생성
17.3 라우트에 코드 스플리팅
17.3.1 asyncComponent 함수 생성
17.3.2 라우트 코드 스플리팅용 인덱스 생성
17.3.3 프로덕션용 webpack 설정
17.3.4 프로덕션 빌드 생성
17.4 정리

18장 백엔드 프로그래밍: Node.js의 Koa 프레임워크
18.1 소개
18.1.1 백엔드
18.1.2 Node.js
18.1.3 Koa
18.2 프로젝트 생성
18.2.1 작업 환경 준비
18.2.2 프로젝트 생성
18.2.3 ESLint 설정
18.3 Koa 기본 사용법
18.3.1 hello world 띄우기
18.3.2 미들웨어
18.4 Nodemon 사용
18.5 koa-router 사용
18.5.1 기본 사용법
18.5.2 라우트 파라미터와 쿼리
18.5.3 REST API
18.5.4 라우트 모듈화
18.5.5 posts 라우트 생성
18.6 정리

19장 mongoose를 이용한 MongoDB 연동 실습
19.1 소개
19.1.1 문서란?
19.1.2 MongoDB 구조
19.1.3 스키마 디자인
19.2 MongoDB 서버 준비
19.2.1 설치
19.2.2 MongoDB 작동 확인
19.3 mongoose 설치 및 적용
19.3.1 .env 환경변수 파일 생성
19.3.2 mongoose로 데이터베이스에 연결
19.4 데이터베이스의 스키마와 모델
19.4.1 스키마 생성
19.4.2 모델 생성
19.5 MongoDB 클라이언트 설치
19.5.1 Robo 3T 설치
19.5.2 사용
19.6 데이터 생성과 조회
19.6.1 NODEPATH와 jsconfig.json
19.6.2 데이터 생성
19.6.3 데이터 조회
19.6.4 특정 포스트 조회
19.7 데이터 삭제와 수정
19.7.1 데이터 삭제
19.7.2 데이터 수정
19.8 요청 검증
19.8.1 ObjectId 검증
19.8.2 Request Body 검증
19.9 페이지네이션 구현
19.9.1 가짜 데이터 생성해 내기
19.9.2 포스트를 역순으로 불러오기
19.9.3 보이는 개수 제한
19.9.4 페이지 기능 구현
19.9.5 마지막 페이지 번호 알려 주기
19.9.6 내용 길이 제한
19.10 정리

20장 블로그 프로젝트
20.1 프로젝트 구조 잡기
20.1.1 프로젝트 생성
20.1.2 주요 디렉터리 생성
20.1.3 불필요한 파일 제거
20.1.4 Sass 및 CSS 모듈 적용
20.1.5 라우터와 리덕스 적용
20.2 기본 유저 인터페이스 생성
20.2.1 PageTemplate, Header, Footer 컴포넌트 생성
20.2.2 글로벌 스타일 및 스타일 유틸 설정
20.2.3 Header 컴포넌트 생성
20.2.4 Footer 컴포넌트 생성
20.2.5 PageTemplate 중간 영역 설정
20.2.6 버튼 생성
20.3 PostList 페이지 UI 구현
20.3.1 ListWrapper 컴포넌트
20.3.2 PostList 컴포넌트 생성
20.3.3 Pagination 컴포넌트 생성
20.4 Post 페이지 UI 구현
20.4.1 PostInfo 컴포넌트
20.4.2 PostBody 컴포넌트
20.5 Editor 페이지 UI 구현
20.5.1 EditorTemplate 컴포넌트
20.5.2 EditorHeader 컴포넌트
20.5.3 EditorPane 컴포넌트 생성
20.5.4 PreviewPane 컴포넌트
20.6 마크다운 에디터 구현
20.6.1 CodeMirror 적용
20.6.2 에디터 상태 관리
20.6.3 마크다운 변환
20.6.4 Prismjs를 사용하여 코드에 색상 입히기
20.6.5 마크다운 스타일링
20.7 정리

21장 프로젝트에서 API 연동
21.1 포스트 작성
21.1.1 프록시 설정
21.1.2 axios 설치
21.1.3 글 작성 API 함수 생성
21.1.4 editor 모듈에 WRITEPOST 액션 생성
21.1.5 EditorHeaderContainer 컴포넌트 생성
21.2 포스트 보여 주기
21.2.1 포스트 읽기 API 함수 생성
21.2.2 post 모듈 생성
21.2.3 Post 컴포넌트 생성
21.2.4 PostInfo와 PostBody에서 올바른 데이터 보여 주기
21.3 포스트 목록 보여 주기
21.3.1 포스트 리스트 API 함수 생성
21.3.2 list 모듈 생성
21.3.3 ListContainer 컴포넌트 생성
21.3.4 PostList 컴포넌트 데이터 렌더링
21.3.5 페이지네이션 기능 구현
21.3.6 API에서 tag 분류
21.4 포스트 수정 및 삭제
21.4.1 헤더에 버튼 보여 주기
21.4.2 수정 기능 구현
21.4.3 삭제 기능 구현
21.5 관리자 로그인 인증 구현
21.5.1 서버에 세션 적용
21.5.2 비밀번호 인증 API 생성
21.5.3 api 라우트에 auth 적용
21.5.4 인증이 필요한 API 보호
21.5.5 로그인 모달 생성
21.5.6 Footer에서 관리자 로그인 버튼을 누르면 로그인 모달 띄우기
21.5.7 로그인 기능 구현
21.5.8 FooterContainer 완성
21.5.9 페이지 로딩할 때의 로그인 상태 확인
21.5.10 로그인할 때만 포스트 작성·수정·삭제 버튼 보여 주기
21.6 정리

22장 프로젝트 마무리 작업
22.1 코드 스플리팅
22.1.1 코드 스플리팅용 라우트 인덱스 생성
22.1.2 프로덕션용 webpack 설정 변경
22.2 서버사이드 렌더링
22.2.1 클라이언트 렌더링의 문제점
22.2.2 서버사이드 렌더링의 단점
22.2.3 서버사이드 렌더링 준비
22.2.4 정적 파일 제공
22.2.5 HTML 템플릿 생성
22.2.6 서버사이드를 렌더링할 때 데이터 불러오기
22.2.7 리덕스 상태 HTML 안에 넣기
22.2.8 서버사이드 렌더링 후 불필요한 API 호출 방지
22.2.9 서버사이드 렌더링과 코드 스플리팅 충돌 해결
22.3 404 페이지 완성
22.4 react-helmet을 이용한 페이지 head 태그 작성
22.4.1 설치와 적용
22.4.2 서버사이드 렌더링에서 적용
22.5 정리

23장 그다음은?
23.1 리액트 관련 커뮤니티
23.1.1 국내 커뮤니티
23.1.2 국외 커뮤니티
23.2 책의 연장선
23.3 사이드 프로젝트 생성

찾아보기