추가 적립 안내

페이스북이 만들고 사용 중인 모던 프런트엔드 라이브러리!

이 책은 jQuery 또는 백본/앵귤러 등으로 프런트엔드 앱을 개발해본 경험이 있지만 날로 복잡해지는 프런트엔드 애플리케이션을 효율적으로 제작할 수 있는 향상된 도구와 지식을 필요로 하는 중급 자바스크립트 개발자를 위해 구성됐다.

페이스북이 만들고 사용 중인 모던 프런트엔드 라이브러리!

리액트는 조합형 인터페이스를 제작하기 위한 오픈소스 라이브러리로서 현재는 페이스북이 관리하고 있다. 이 라이브러리는 처음 공개된 이후로 빠른 속도로 보급되고 있으며, 관련 커뮤니티의 사용자도 꾸준히 증가하고 있다.

이 책은 jQuery 또는 백본/앵귤러 등으로 프런트엔드 앱을 개발해본 경험이 있지만 날로 복잡해지는 프런트엔드 애플리케이션을 효율적으로 제작할 수 있는 향상된 도구와 지식을 필요로 하는 중급 자바스크립트 개발자를 위해 구성됐다.

리액트 라이브러리를 자세히 소개하고 인터페이스를 조합형으로 제작하는 최상의 방법을 설명한다. 리액트 라이브러리 자체는 아직 작기 때문에 완전한 애플리케이션을 만들 수 있는 충분한 지식을 독자에게 전달하기 위해 리액트 라우터나 플럭스 아키텍처 같은 리액트 생태계의 부가적인 도구와 라이브러리를 함께 다룬다.

각 주제는 특정 문제를 효과적으로 해결할 수 있는 정보를 전달하기 위해 간결하고 명확하게 구성했다. 가장 중요한 기능에 대해서는 현실적이고 구체적인 활용 방안을 제시하며, 모든 단원에서 흔히 발생하는 문제와 이러한 문제를 예방하는 방법을 자세히 다룬다.

[프로 리액트]는 점차 복잡해지는 프런트엔드 애플리케이션과 인터페이스를 효과적으로 제작하는 방법을 알려주는 책이다. 이 책은 리액트 라이브러리와 리액트 생태계의 추가 도구와 라이브러리를 이용해 복잡한 애플리케이션을 제작할 수 있는 과정을 심도 있게 다룬다.

리액트를 완전하게 이용하는 방법과 인터페이스를 조합형으로 제작하는 모범 사례를 배운다. 또 리액트 라우터 및 플럭스 아키텍처 같은 리액트 생태계의 추가 도구와 라이브러리에 대해서도 알아본다. 각 주제는 주어진 문제를 효과적으로 해결할 수 있는 정보를 전달하기 위해 간결하고 명확하게 구성돼 있다. 가장 중요한 기능에 대해서는 현실적이고 구체적인 이용 방안을 제시하며 모든 단원에서는 흔히 발생하는 문제와 이러한 문제를 예방하는 방법을 자세히 다룬다.

이 책은 jQuery나 다른 자바스크립트 프레임워크를 이용해 프런트엔드 앱을 개발해본 경험이 있지만 점차 복잡해지는 프런트엔드 애플리케이션을 효과적으로 제작하기 위한 방법을 찾는 독자에게 최적의 방법을 안내한다. 지금 바로 [프로 리액트]를 선택하고 리액트 전문가를 향한 발걸음을 시작하자.

이 책에서 다루는 내용

" 조합형 사용자 인터페이스를 구축하는 방법을 배운다.
" 리액트의 가상 DOM 아키텍처를 소개하고 가상 DOM이 애플리케이션 개발에 미치는 영향을 이해한다.
" 각 기능이 작동하는 방법과 이러한 기능이 중요한 이유를 이해한다.
" 리액트 자체는 물론 리액트 생태계의 주요 타사 라이브러리를 심도 있게 다룬다.
" 사용자 경험과 검색 엔진을 최적화하는 데 도움이 되는 동형/유니버셜 애플리케이션을 개발하는 방법을 배운다.
" 복잡한 애플리케이션의 데이터 흐름 전략을 체계적이고 포괄적으로 분석한다.
" 리액트 프로젝트를 테스트, 개선, 배포하는 방법을 배운다.

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
프로미스
화살표 함수
템플릿 문자열
구조분해 할당