React ＋ Atomic Design 아토믹 디자인이란? 일관성 있고 재사용할 수 있도록 디자인을 시스템화하여 팀 개발에 효율적이며 모던 워크플로를 확립할 수 있도록 합니다. 웹 사이트의 레이아웃을 원자, 분자, 유기체, 템플릿, 페이지로 분해하여 서비스 전체에서 재사용이 가능하도록 합니다. 이 책에서는 리액트의 기본부터 UI 디자인 설계, 컴포넌트 구현, 모듈 번들러 웹팩을 이용한 소스 코드 빌드, 리덕스를 통한 상태 관리, 리액트 컴포넌트 테스트, 제품 품질 유지, 코드 컨벤션, 스타일 가이드 등 실제 개발 현장에서 접할 수 있는 실무 노하우를 해설하고 있습니다. 리액트는 프런트엔드 개발에 혁신적인 영향을 주었습니다. 이전의 자바스크립트 라이브러리와 비교하면 구축할 때 접근하는 방식이 달라졌으므로 앞으로의 UI 개발에서 많은 통찰력을 얻을 수 있을 것입니다. 이 책은 '앞으로의 UI 개발' 시점에서 리액트를 설명합니다.

1장 웹 개발 동향 _ 1.1 웹 개발 기술의 변화와 환경 __ 웹 프런트엔드를 둘러싼 환경 __ 디자이너와 개발자 __ 개발 현장에서의 고민 __ 이상적인 프런트엔드 개발자 _ 1.2 개발자가 생각해야 할 것 __ 브라우저 지원 __ HTML과 CSS __ CCS의 문제점 _ 1.3 설계의 필요성 __ 지금까지의 프런트엔드 코드 __ 코드는 살아있는 생물 2장 리액트의 기본 _ 2.1 리액트란? __ 리액트의 특징 __ 리액트 추천 이유 _ 2.2 기본 구문과 실행 환경 __ ECMAScript __ 개발 환경 준비 __ 온라인 편집기 CodeSandbox _ 2.3 JSX __ JSX란? __ Babel _ 2.4 리액트 작성 방법 __ 컴포넌트(Components ) __ render __ 함수형 컴포넌트(Functional Components) __ Props __ State __ 이벤트 __ key _ 2.5 생명주기 __ 리액트에서의 생명주기 __ 처리의 흐름 __ Functional Components의 생명주기 _ 2.6 Babel 7로 업데이트 3장 아토믹 디자인 _ 3.1 아토믹 디자인이란? __ 아토믹 디자인의 기본 개념 __ Atoms __ Molecules __ Organisms __ Templates __ Pages _ 3.2 아토믹 디자인의 장점 __ 디자인 시스템 __ 개발에서의 디자인 기준 _ 3.3 컴포넌트 개발의 UI 디자인 __ 스타일 __ 레이아웃 __ 톤과 매너 _ 3.4 리액트와의 궁합 __ 비대해지지 않는 컴포넌트 __ 확장성 _ 3.5 Fragments 4장 소스 코드 빌드 _ 4.1 빌드의 이유 __ Node.js __ 사람과 기계가 해야 할 일 __ 개발 환경의 확장성 _ 4.2 webpack __ webpack의 기본 __ webpack 설정 __ webpack.config.js __ 로더 __ 플러그인 _ 4.3 webpack-dev-server __ 기본 사용 방법 __ Hot Module Replacement 5장 컴포넌트 구현 _ 5.1 모범 사례 __ Presentational과 Container 컴포넌트 __ 데이터 반영 __ Local State _ 5.2 컴포넌트 수준 __ 아토믹 디자인과의 비교 __ Molecules·Organisms와 Templates·Pages __ 실제 운용과 타협점 _ 5.3 프로젝트 구성 __ 컴포넌트 디렉터리 __ UI 라이브러리 활용 _ 5.4 서버 사이드 렌더링 __ 서버 사이드 렌더링이란? __ 리액트로 서버 사이드 렌더링 구현 6장 CSS 구현 _ 6.1 컴포넌트화와 CSS __ 종래의 접근법 __ 해결해야 할 문제 _ 6.2 CSS in JS __ CSS in JS의 기본 개념 __ CSS modules __ styled-components __ styled-jsx _ 6.3 CSS 분리 __ 지역 범위 실현 __ PostCSS __ Portals 7장 로직 구현 _ 7.1 컴포넌트의 상태 관리 __ 프런트엔드가 가진 상태란? __ 종래의 상태 관리와 Flux _ 7.2 리덕스의 기본 __ 기본 개념과 3원칙 __ 구현 __ 데이터 흐름 _ 7.3 리덕스 실습 __ 리액트 컴포넌트와의 연결 __ 미들웨어(Middleware) __ Store를 이용한 UI 제어 _ 7.4 비동기 처리 __ Redux의 지연 처리 __ redux-thunk __ redux-saga _ 7.5 Error Boundary 8장 제품의 품질 _ 8.1 품질 유지 __ 제품의 품질 __ 품질 유지의 필요성 __ 품질 유지의 포인트 _ 8.2 컴포넌트 테스트 __ 테스트 프레임워크 __ 리액트 컴포넌트 테스트 __ enzyme __ enzyme의 렌더링 처리 _ 8.3 Lint __ ESLint __ ESLint 설정 __ Rules __ stylelint _ 8.4 flow __ 자료형의 이점 __ flow란? __ flow 실무 __ 자료형 지정의 응용과 자료형 정의 _ 8.5 스타일 가이드 __ 스타일 가이드의 필요성 __ Storybook __ Storybook 설치 __ 스토리 파일 작성 __ 애드온