프로 리액트-React.js를 이용한 모던 프런트엔드 구축(위키북스 오픈소스 & 웹시리즈 79)

리액트는 조합형 인터페이스를 제작하기 위한 오픈소스 라이브러리로서 현재는 페이스북이 관리하고 있다. 이 라이브러리는 처음 공개된 이후로 빠른 속도로 보급되고 있으며, 관련 커뮤니티의 사용자도 꾸준히 증가하고 있다. 이 책은 jQuery 또는 백본/앵귤러 등으로 프런트엔드 앱을 개발해본 경험이 있지만 날로 복잡해지는 프런트엔드 애플리케이션을 효율적으로 제작할 수 있는 향상된 도구와 지식을 필요로 하는 중급 자바스크립트 개발자를 위해 구성됐다.

1장- 시작하기 시작하기 전에 - Node.js와 npm - 자바스크립트 ES6 리액트의 정의 리액트의 장점 - 편리한 반응형 렌더링 - 순수 자바스크립트를 이용한 컴포넌트 기반 개발 - 문서 모델의 유연한 추상화 첫 번째 리액트 앱 작성 - 리액트 개발 워크플로 - 첫 번째 컴포넌트 만들기 - 타이핑 수고를 약간 줄이는 방법 - 동적 값 컴포넌트 조합하기 - 속성 - 칸반 보드 앱 소개 - 컴포넌트 계층 정의 - 속성의 중요성 - 컴포넌트 만들기 - 앱 모듈(App.js) 상태 소개 - 칸반 앱- 토글되는 카드 정리 02장- DOM 추상화의 내부 리액트의 이벤트 - DOM 이벤트 리스너 - 칸반 앱- DOM 이벤트 관리 JSX 자세히 살펴보기 - JSX와 HTML 비교 - JSX와 HTML의 차이 - JSX의 특이점 칸반 앱- 카드가 열려있는지 여부 확인 - 공백 - JSX의 주석 - 동적 HTML 렌더링 - 칸반 앱- 마크다운 렌더링 JSX를 배제하고 리액트 이용 - 일반 자바스크립트로 리액트 요소 만들기 - 요소 팩토리 - 커스텀 팩토리 인라인 스타일링 - 인라인 스타일 정의 - 칸반 앱- 인라인 스타일링을 이용한 카드 색상 지정 폼 처리 - 제어 컴포넌트 - 특수 사례 - 비제어 컴포넌트 - 칸반 앱- 태스크 폼 만들기 가상 DOM의 작동 방식 - 키 - 칸반 앱- 키 - ref 정리 03장- 컴포넌트를 이용한 애플리케이션 구축 속성 유효성 검사 - 속성 기본값 - 기본 제공되는 propTypes 유효성 검사기 - 칸반 앱- 속성 형식 정의 - 커스텀 propTypes 유효성 검사기 컴포넌트 조합 전략과 모범 사례 - 상태 저장 컴포넌트와 순수 컴포넌트 - 어떤 컴포넌트가 상태 저장이어야 할까? - 데이터 흐름과 컴포넌트 통신 컴포넌트 수명주기 - 수명주기 단계와 메서드 - 수명주기 함수의 실제 활용- 데이터 가져오기 불변성에 대한 개요 - 일반 자바스크립트에서의 불변성 - 중첩된 객체 - 리액트 불변성 도우미 칸반 앱- 약간의 복잡성 추가 정리 04장- 정교한 상호작용 리액트의 애니메이션 - CSS 트랜지션과 애니메이션의 기초 - ReactCSSTransitionGroup 드래그 앤드 드롭 - 리액트 DnD 구현 개요 - 리액트 DnD 예제 구현 칸반 앱- 애니메이션과 드래그 앤드 드롭 지원 - 카드 토글 애니메이션 - 카드 드래그 정리 05장- 라우팅 라우팅을 구현하는 단순한 방식 리액트 라우터 - 인덱스 라우트 - 매개변수를 이용하는 라우트 - 활성 링크 설정 - 속성 전달하기 - UI와 URL의 연결 분리 - 프로그래밍 방식으로 라우트 변경 - 히스토리 - 칸반 앱- 라우팅 정리 06장- 플럭스를 이용한 리액트 애플리케이션 설계 플럭스란? - 스토어 - 액션 - 디스패처 실용성이 없는 최소 플럭스 앱 - 은행계좌 애플리케이션 플럭스 유틸 - 플럭스 유틸 스토어 - 컨테이너 컴포넌트 고차 함수 비동기 플럭스 - waitFor- 스토어 업데이트 순서 - 비동기 데이터 가져오기 에어치프 애플리케이션 - 설정- 프로젝트 구성과 기본 파일 - 공항을 가져오는 액션 생성자와 API 도우미 작성 - AirportStore - App 컴포넌트 - 에어치프 애플리케이션 완성- 항공권 로딩 - API 도우미 비동기 데이터 가져오기 구현 발전시키기 - AppDispatcher의 dispatchAsync 메서드 칸반 앱- 플럭스 아키텍처로 전환 - 리팩터- 플럭스 기본 구조 제작 및 파일 이동 - 플럭스 아키텍처로 데이터 가져오기 전환 - FetchCards 액션, API 메서드 호출, 스토어 콜백 구현 - 모든 카드와 태스크 조작을 플럭스 아키텍처로 이식하기 - 기능 이식을 위한 준비 - 컴포넌트 - 모든 컴포넌트 상태 제거 정리 07장- 성능 튜닝 조정 프로세스 작동 방식 - 일괄 처리 - 하위 트리 렌더링 리액트 퍼프 - 성능 테스트 애플리케이션 - 리액트 퍼프 설치와 이용 shouldComponentUpdate - shallowCompare 애드온 정리 08장- 동형 리액트 애플리케이션 Node.js와 익스프레스 - Node.js와 익스프레스를 이용한 "Hello World" 애플리케이션 제작 동형 리액트의 기본 - 프로젝트 구조 만들기 - 서버상의 리액트 컴포넌트 렌더링 - 클라이언트에 리액트 마운팅 라우팅 - 내부 라우트 설정 - 동적 데이터 가져오기 - 라우트 렌더링 정리 09장- 리액트 컴포넌트의 테스트 제스트 리액트 테스트 유틸리티 - 테스트용 컴포넌트 렌더링 - 자식 순회 및 찾기 - 이벤트 시뮬레이션 - 얕은 렌더링 정리 부록A- 웹팩 웹팩이란? 그런트나 걸프와 같은 빌드 도구와의 차이점 시작하기 - 예제 프로젝트 - 첫 번째 빌드 실행 구성 파일 정의 - 태스크 바로가기 추가 - 소스맵 생성 웹팩 개발 서버 로더 바벨 - 설치와 구성 - 바벨 구성 파일 자바스크립트 외의 애셋 - 스타일시트 - CSS 모듈 - CSS 프로세서 플러그인 - 플러그인 이용하기 - html-webpack-plugin HMR 실무용 빌드 최적화 플러그인 캐싱 정리 부록B- 자바스크립트 2015 클래스 모듈 let과 const 프로미스 화살표 함수 템플릿 문자열 구조분해 할당