리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하는지, 왜 이렇게 사용하는 것이 효과적인지를 배우자. 공식 문서에는 나오지 않는 실전 노하우와 팁을 풍부하게 담았다. 또한, 프로젝트 생성부터 코드를 작성 및 개선하고, 배포하기까지 실무에 바로 응용할 수 있도록 예제를 준비했다. 일정 관리 애플리케이션을 만들면서 리액트의 기본기를 다지고, 프로젝트를 진행하면서 컴포넌트 스타일링, 상태 관리, API 연동, 라우팅, 코드 스플리팅, 서버사이드 렌더링 등 리액트를 활용한 다양한 기술을 사용해보자. 마지막으로 마크다운 기반의 블로그 시스템을 만들며 배운 지식을 종합적으로 활용해보자.

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 NODE_PATH 설정
____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 NODE_PATH와 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 모듈에 WRITE_POST 액션 생성
____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 사이드 프로젝트 생성

 찾아보기