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.4 JSX 문법

____2.4.1 감싸인 요소

____2.4.2 자바스크립트 표현

____2.4.3 If 문 대신 조건부 연산자

____2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링

____2.4.5 undefined를 렌더링하지 않기

____2.4.6 인라인 스타일링

____2.4.7 class 대신 className

____2.4.8 꼭 닫아야 하는 태그

____2.4.9 주석

__2.5 ESLint와 Prettier 적용하기

____2.5.1 ESLint

____2.5.2 Prettier

__2.6 정리



3장 컴포넌트

__3.1 클래스형 컴포넌트

__3.2 첫 컴포넌트 생성

____3.2.1 src 디렉터리에 MyComponent.js 파일 생성

____3.2.2 코드 작성하기

____3.2.3 모듈 내보내기 및 불러오기

__3.3 props

____3.3.1 JSX 내부에서 props 렌더링

____3.3.2 컴포넌트를 사용할 때 props 값 지정하기

____3.3.3 props 기본값 설정: defaultProps

____3.3.4 태그 사이의 내용을 보여 주는 children

____3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기

____3.3.6 propTypes를 통한 props 검증

____3.3.7 클래스형 컴포넌트에서 props 사용하기

__3.4 state

____3.4.1 클래스형 컴포넌트의 state

____3.4.2 함수형 컴포넌트에서 useState 사용하기

__3.5 state를 사용할 때 주의 사항

__3.6 정리



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 함수형 컴포넌트로 구현해 보기

__4.4 정리



5장 ref: DOM에 이름 달기

__5.1 ref는 어떤 상황에서 사용해야 할까?

____5.1.1 예제 컴포넌트 생성

____5.1.2 App 컴포넌트에서 예제 컴포넌트 렌더링

____5.1.3 DOM을 꼭 사용해야 하는 상황

__5.2 ref 사용

____5.2.1 콜백 함수를 통한 ref 설정

____5.2.2 createRef를 통한 ref 설정

____5.2.3 적용

__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 데이터 배열을 컴포넌트 배열로 변환하기

____6.2.1 컴포넌트 수정하기

____6.2.2 App 컴포넌트에서 예제 컴포넌트 렌더링

__6.3 key

____6.3.1 key 설정

__6.4 응용

____6.4.1 초기 상태 설정하기

____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.2.9 componentDidCatch 메서드

__7.3 라이프사이클 메서드 사용하기

____7.3.1 예제 컴포넌트 생성

____7.3.2 App 컴포넌트에서 예제 컴포넌트 사용

____7.3.3 에러 잡아내기

__7.4 정리



8장 Hooks

__8.1 useState

____8.1.1 useState를 여러 번 사용하기

__8.2 useEffect

____8.2.1 마운트될 때만 실행하고 싶을 때

____8.2.2 특정 값이 업데이트될 때만 실행하고 싶을 때

____8.2.3 뒷정리하기

__8.3 useReducer

____8.3.1 카운터 구현하기

____8.3.2 인풋 상태 관리하기

__8.4 useMemo

__8.5 useCallback

__8.6 useRef

____8.6.1 로컬 변수 사용하기

__8.7 커스텀 Hooks 만들기

__8.8 다른 Hooks

__8.9 정리



9장 컴포넌트 스타일링

__9.1 가장 흔한 방식, 일반 CSS

____9.1.1 이름 짓는 규칙

____9.1.2 CSS Selector

__9.2 Sass 사용하기

____9.2.1 utils 함수 분리하기

____9.2.2 sass-loader 설정 커스터마이징하기

____9.2.3 node_modules에서 라이브러리 불러오기

__9.3 CSS Module

____9.3.1 classnames

____9.3.2 Sass와 함께 사용하기

____9.3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기

__9.4 styled-components

____9.4.1 Tagged 템플릿 리터럴

____9.4.2 스타일링된 엘리먼트 만들기

____9.4.3 스타일에서 props 조회하기

____9.4.4 props에 따른 조건부 스타일링

____9.4.5 반응형 디자인

__9.5 정리



10장 일정 관리 웹 애플리케이션 만들기

__10.1 프로젝트 준비하기

____10.1.1 프로젝트 생성 및 필요한 라이브러리 설치

____10.1.2 Prettier 설정

____10.1.3 index.css 수정

____10.1.4 App 컴포넌트 초기화

__10.2 UI 구성하기

____10.2.1 TodoTemplate 만들기

____10.2.2 TodoInsert 만들기

____10.2.3 TodoListItem과 TodoList 만들기

__10.3 기능 구현하기

____10.3.1 App에서 todos 상태 사용하기

____10.3.2 항목 추가 기능 구현하기

____10.3.3 지우기 기능 구현하기

____10.3.4 수정 기능

__10.4 정리



11장 컴포넌트 성능 최적화

__11.1 많은 데이터 렌더링하기

__11.2 크롬 개발자 도구를 통한 성능 모니터링

__11.3 느려지는 원인 분석

__11.4 React.memo를 사용하여 컴포넌트 성능 최적화

__11.5 onToggle, onRemove 함수가 바뀌지 않게 하기

____11.5.1 useState의 함수형 업데이트

____11.5.2 useReducer 사용하기

__11.6 불변성의 중요성

__11.7 TodoList 컴포넌트 최적화하기

__11.8 react-virtualized를 사용한 렌더링 최적화

____11.8.1 최적화 준비

____11.8.2 TodoList 수정

____11.8.3 TodoListItem 수정

__11.9 정리



12장 immer를 사용하여 더 쉽게 불변성 유지하기

__12.1 immer를 설치하고 사용법 알아보기

____12.1.1 프로젝트 준비

____12.1.2 immer를 사용하지 않고 불변성 유지

____12.1.3 immer 사용법

____12.1.4 App 컴포넌트에 immer 적용하기

____12.1.5 useState의 함수형 업데이트와 immer 함께 쓰기

__12.2 정리



13장 리액트 라우터로 SPA 개발하기

__13.1 SPA란?

____13.1.1 SPA의 단점

__13.2 프로젝트 준비 및 기본적인 사용법

____13.2.1 프로젝트 생성 및 라이브러리 설치

____13.2.2 프로젝트에 라우터 적용

____13.2.3 페이지 만들기

____13.2.4 Route 컴포넌트로 특정 주소에 컴포넌트 연결

____13.2.5 Link 컴포넌트를 사용하여 다른 주소로 이동하기

__13.3 Route 하나에 여러 개의 path 설정하기

__13.4 URL 파라미터와 쿼리

____13.4.1 URL 파라미터

____13.4.2 URL 쿼리

__13.5 서브 라우트

__13.6 리액트 라우터 부가 기능

____13.6.1 history

____13.6.2 withRouter

____13.6.3 Switch

____13.6.4 NavLink

__13.7 정리



14장 외부 API를 연동하여 뉴스 뷰어 만들기

__14.1 비동기 작업의 이해

____14.1.1 콜백 함수

____14.1.2 Promise

____14.1.3 async/await

__14.2 axios로 API 호출해서 데이터 받아 오기

__14.3 newsapi API 키 발급받기

__14.4 뉴스 뷰어 UI 만들기

____14.4.1 NewsItem 만들기

____14.4.2 NewsList 만들기

__14.5 데이터 연동하기

__14.6 카테고리 기능 구현하기

____14.6.1 카테고리 선택 UI 만들기

____14.6.2 API를 호출할 때 카테고리 지정하기

__14.7 리액트 라우터 적용하기

____14.7.1 리액트 라우터의 설치 및 적용

____14.7.2 NewsPage 생성

____14.7.3 Categories에서 NavLink 사용하기

__14.8 usePromise 커스텀 Hook 만들기

__14.9 정리



15장 Context API

__15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기

__15.2 Context API 사용법 익히기

____15.2.1 새 Context 만들기

____15.2.2 Consumer 사용하기

____15.2.3 Provider

__15.3 동적 Context 사용하기

____15.3.1 Context 파일 수정하기

____15.3.2 새로워진 Context를 프로젝트에 반영하기

____15.3.3 색상 선택 컴포넌트 만들기

__15.4 Consumer 대신 Hook 또는 static contextType 사용하기

____15.4.1 useContext Hook 사용하기

____15.4.2 static contextType 사용하기

__15.5 정리



16장 리덕스 라이브러리 이해하기

__16.1 개념 미리 정리하기

____16.1.1 액션

____16.1.2 액션 생성 함수

____16.1.3 리듀서

____16.1.4 스토어

____16.1.5 디스패치

____16.1.6 구독

__16.2 리액트 없이 쓰는 리덕스

____16.2.1 Parcel로 프로젝트 만들기

____16.2.2 간단한 UI 구성하기

____16.2.3 DOM 레퍼런스 만들기

____16.2.4 액션 타입과 액션 생성 함수 정의

____16.2.5 초깃값 설정

____16.2.6 리듀서 함수 정의

____16.2.7 스토어 만들기

____16.2.8 render 함수 만들기

____16.2.9 구독하기

____16.2.10 액션 발생시키기

__16.3 리덕스의 세 가지 규칙

____16.3.1 단일 스토어

____16.3.2 읽기 전용 상태

____16.3.3 리듀서는 순수한 함수

__16.4 정리



17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기

__17.1 작업 환경 설정

__17.2 UI 준비하기

____17.2.1 카운터 컴포넌트 만들기

____17.2.2 할 일 목록 컴포넌트 만들기

__17.3 리덕스 관련 코드 작성하기

____17.3.1 counter 모듈 작성하기

____17.3.2 todos 모듈 만들기

____17.3.3 루트 리듀서 만들기

__17.4 리액트 애플리케이션에 리덕스 적용하기

____17.4.1 스토어 만들기

____17.4.2 Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기

____17.4.3 Redux DevTools의 설치 및 적용

__17.5 컨테이너 컴포넌트 만들기

____17.5.1 CounterContainer 만들기

____17.5.2 TodosContainer 만들기

__17.6 리덕스 더 편하게 사용하기

____17.6.1 redux-actions

____17.6.2 immer

__17.7 Hooks를 사용하여 컨테이너 컴포넌트 만들기

____17.7.1 useSelector로 상태 조회하기

____17.7.2 useDispatch를 사용하여 액션 디스패치하기

____17.7.3 useStore를 사용하여 리덕스 스토어 사용하기

____17.7.4 TodosContainer를 Hooks로 전환하기

____17.7.5 useActions 유틸 Hook을 만들어서 사용하기

____17.7.6 connect 함수와의 주요 차이점

__17.8 정리



18장 리덕스 미들웨어를 통한 비동기 작업 관리

__18.1 작업 환경 준비

__18.2 미들웨어란?

____18.2.1 미들웨어 만들기

____18.2.2 redux-logger 사용하기

__18.3 비동기 작업을 처리하는 미들웨어 사용

____18.3.1 redux-thunk

____18.3.2 redux-saga

__18.4 정리



19장 코드 스플리팅

__19.1 자바스크립트 함수 비동기 로딩

__19.2 React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

____19.2.1 state를 사용한 코드 스플리팅

____19.2.2 React.lazy와 Suspense 사용하기

____19.2.3 Loadable Components를 통한 코드 스플리팅

__19.3 정리



20장 서버 사이드 렌더링

__20.1 서버 사이드 렌더링의 이해

____20.1.1 서버 사이드 렌더링의 장점

____20.1.2 서버 사이드 렌더링의 단점

____20.1.3 서버 사이드 렌더링과 코드 스플리팅 충돌

__20.2 프로젝트 준비하기

____20.2.1 컴포넌트 만들기

____20.2.2 페이지 컴포넌트 만들기

__20.3 서버 사이드 렌더링 구현하기

____20.3.1 서버 사이드 렌더링용 엔트리 만들기

____20.3.2 서버 사이드 렌더링 전용 웹팩 환경 설정 작성하기

____20.3.3 빌드 스크립트 작성하기

____20.3.4 서버 코드 작성하기

____20.3.5 정적 파일 제공하기

__20.4 데이터 로딩

____20.4.1 redux-thunk 코드 준비하기

____20.4.2 Users, UsersContainer 컴포넌트 준비하기

____20.4.3 PreloadContext 만들기

____20.4.4 서버에서 리덕스 설정 및 PreloadContext 사용하기

____20.4.5 스크립트로 스토어 초기 상태 주입하기

____20.4.6 redux-saga 코드 준비하기

____20.4.7 User, UserContainer 컴포넌트 준비하기

____20.4.8 redux-saga를 위한 서버 사이드 렌더링 작업

____20.4.9 usePreloader Hook 만들어서 사용하기

__20.5 서버 사이드 렌더링과 코드 스플리팅

____20.5.1 라우트 컴포넌트 스플리팅하기

____20.5.2 웹팩과 babel 플러그인 적용

____20.5.3 필요한 청크 파일 경로 추출하기

____20.5.4 loadableReady와 hydrate

__20.6 서버 사이드 렌더링의 환경 구축을 위한 대안

____20.6.1 Next.js

____20.6.2 Razzle

__20.7 정리



21장 백엔드 프로그래밍: Node.js의 Koa 프레임워크

__21.1 소개하기

____21.1.1 백엔드

____21.1.2 Node.js

____21.1.3 Koa

__21.2 작업 환경 준비

____21.2.1 Node 설치 확인

____21.2.2 프로젝트 생성

____21.2.3 ESLint와 Prettier 설정

__21.3 Koa 기본 사용법

____21.3.1 서버 띄우기

____21.3.2 미들웨어

__21.4 nodemon 사용하기

__21.5 koa-router 사용하기

____21.5.1 기본 사용법

____21.5.2 라우트 파라미터와 쿼리

____21.5.3 REST API

____21.5.4 라우트 모듈화

____21.5.5 posts 라우트 생성

__21.6 정리



22장 mongoose를 이용한 MongoDB 연동 실습

__22.1 소개하기

____22.1.1 문서란?

____22.1.2 MongoDB 구조

____22.1.3 스키마 디자인

__22.2 MongoDB 서버 준비

____22.2.1 설치

____22.2.2 MongoDB 작동 확인

__22.3 mongoose의 설치 및 적용

____22.3.1 .env 환경변수 파일 생성

____22.3.2 mongoose로 서버와 데이터베이스 연결

__22.4 esm으로 ES 모듈 import/export 문법 사용하기

____22.4.1 기존 코드 ES Module 형태로 바꾸기

__22.5 데이터베이스의 스키마와 모델

____22.5.1 스키마 생성

____22.5.2 모델 생성

__22.6 MongoDB Compass의 설치 및 사용

__22.7 데이터 생성과 조회

____22.7.1 데이터 생성

____22.7.2 데이터 조회

____22.7.3 특정 포스트 조회

__22.8 데이터 삭제와 수정

____22.8.1 데이터 삭제

____22.8.2 데이터 수정

__22.9 요청 검증

____22.9.1 ObjectId 검증

____22.9.2 Request Body 검증

__22.10 페이지네이션 구현

____22.10.1 가짜 데이터 생성하기

____22.10.2 포스트를 역순으로 불러오기

____22.10.3 보이는 개수 제한

____22.10.4 페이지 기능 구현

____22.10.5 마지막 페이지 번호 알려 주기

____22.10.6 내용 길이 제한

__22.11 정리



23장 JWT를 통한 회원 인증 시스템 구현하기

__23.1 JWT의 이해

____23.1.1 세션 기반 인증과 토큰 기반 인증의 차이

__23.2 User 스키마/모델 만들기

____23.2.1 모델 메서드 만들기

____23.2.2 스태틱 메서드 만들기

__23.3 회원 인증 API 만들기

____23.3.1 회원가입 구현하기

____23.3.2 로그인 구현하기

__23.4 토큰 발급 및 검증하기

____23.4.1 비밀키 설정하기

____23.4.2 토큰 발급하기

____23.4.3 토큰 검증하기

____23.4.4 토큰 재발급하기

____23.4.5 로그아웃 기능 구현하기

__23.5 posts API에 회원 인증 시스템 도입하기

____23.5.1 스키마 수정하기

____23.5.2 posts 컬렉션 비우기

____23.5.3 로그인했을 때만 API를 사용할 수 있게 하기

____23.5.4 포스트 작성 시 사용자 정보 넣기

____23.5.5 포스트 수정 및 삭제 시 권한 확인하기

__23.6 username/tags로 포스트 필터링하기

__23.7 정리



24장 프런트엔드 프로젝트: 시작 및 회원 인증 구현

__24.1 작업 환경 준비하기

____24.1.1 설정 파일 만들기

____24.1.2 라우터 적용

____24.1.3 스타일 설정

____24.1.4 Button 컴포넌트 만들기

____24.1.5 리덕스 적용

__24.2 회원가입과 로그인 구현

____24.2.1 UI 준비하기

____24.2.2 리덕스로 폼 상태 관리하기

____24.2.3 API 연동하기

____24.2.4 회원가입 구현

____24.2.5 로그인 구현

____24.2.6 회원 인증 에러 처리하기

__24.3 헤더 컴포넌트 생성 및 로그인 유지

____24.3.1 헤더 컴포넌트 만들기

____24.3.2 로그인 상태를 보여 주고 유지하기

____24.3.3 로그아웃 기능 구현

__24.4 정리



25장 프런트엔드 프로젝트: 글쓰기 기능 구현하기

__25.1 에디터 UI 구현하기

__25.2 에디터 하단 컴포넌트 UI 구현하기

____25.2.1 TagBox 만들기

__25.3 리덕스로 글쓰기 상태 관리하기

____25.3.1 EditorContainer 만들기

____25.3.2 TagBoxContainer 만들기

____25.3.3 글쓰기 API 연동하기

__25.4 정리



26장 프런트엔드 프로젝트: 포스트 조회 기능 구현하기

__26.1 포스트 읽기 페이지 구현하기

____26.1.1 PostViewer UI 준비하기

____26.1.2 API 연동하기

__26.2 포스트 목록 페이지 구현하기

____26.2.1 PostList UI 준비하기

____26.2.2 포스트 목록 조회 API 연동하기

____26.2.3 HTML 필터링하기

____26.2.4 페이지네이션 구현하기

__26.3 정리



27장 프런트엔드 프로젝트: 수정/삭제 기능 구현 및 마무리

__27.1 포스트 수정

____27.1.1 PostActionButtons 컴포넌트 만들기

____27.1.2 수정 버튼 클릭 시 글쓰기 페이지로 이동하기

__27.2 포스트 삭제

__27.3 react-helmet-async로 meta 태그 설정하기

__27.4 프로젝트 마무리

____27.4.1 프로젝트 빌드하기

____27.4.2 koa-static으로 정적 파일 제공하기

____27.4.3 더 할 수 있는 작업

__27.5 정리



28장 그다음은?

__28.1 리액트 관련 커뮤니티

____28.1.1 국내 커뮤니티

____28.1.2 국외 커뮤니티

__28.2 책의 연장선

__28.3 사이드 프로젝트 생성



찾아보기