모던 리액트/리덕스 프로그래밍

React/Redux를 통해 배우는 모던 웹 프로그래밍의 정석

빠르게 동작하는 웹 서비스 만들기!

리액트의 개념부터 디플로이까지, 모던 웹 애플리케이션 개발의 전체적인 흐름을 이해할 수 있습니다. 이 책은 웹 애플리케이션 개발에서 큰 인기를 얻고 있는 리액트를 설명하는 책입니다. 리액트는 페이스북에서 배포하는 자바스크립트 라이브러리로서 웹 애플리케이션을 네이티브 애플리케이션처럼 만들 수 있게 만들어졌습니다.

기본적인 설치부터 코드를 직접 만들어보며 리액트를 알아보므로 처음 리액트를 공부하는 사람이라도 쉽게 이해할 수 있습니다. 또한 일반적인 리액트 책에서는 거의 다루지 않는 테스트, 디플로이, UI/UX 설정 등과 관련된 실무에서 필요한 내용도 자세히 설명합니다. 모던 웹 애플리케이션을 만들고 싶거나 최신 프런트엔드 개발 방법을 익히고 싶은 모든 분들에게 추천합니다.

★ 이 책의 특징 ★

  • 리액트의 기초부터 응용까지 실전적인 내용을 다룹니다.
  • 리액트의 개념과 사용법을 다룹니다.
  • 리액트를 활용한 UI/UX, 테스트, 디플로이 등의 내용까지 다룹니다.

아나이 히로유키

주식회사 Rich Lab의 엔지니어. 2009년에 야후 주식회사에 입사한 후 다양한 서비스에서의 개발을 경험하고, 2014년 9월에 야후의 사내 벤처 제도를 통해 설립된 Rich Lab로 이동했다. 스마트폰과 관련된 사업 영역과 웹 서비스 설계 개발을 주로 맡고 있다. 야후에서 가장 뛰어난 프런트엔드 개발자로 선정되기도 했다.

이시이 나오야

주식회사 야후의 시작 페이지 사업 본부 소속. 2012년에 야후에 엔지니어로 입사한 후 야후 재팬의 시작 페이지 프런트엔드 개발에 참여했다. 사내 프런트엔드 기술 발전에 공헌하고 있으며, 리액트를 적극적으로 홍보하고 있다. 취미는 게임이다. 트위터 ID: @kaidempa

시바타 카즈키

주식회사 Wonta의 CCO. 2012년에 야후에 디자이너로 입사했으며, 프런트엔드 개발을 하고 있다. SPA 개발 경력은 4년 이상이다. 2017년에 주식회사 Wonta를 공동 창업하고, 서비스를 운영하고 있다. 리액트.js 밋업 등에서 여러 번 발표하기도 했다. 트위터 ID: @shibe97

미미야 하지메

주식회사 야후의 시작 페이지 사업 본부 소속. 대학을 졸업하고 2008년에 야후에 디자이너로 입사했으며, 다양한 프런트엔드 개발을 경험하고, 2012년부터 야후 재팬의 시작 페이지 담당이 되어 지금까지 일하고 있다. 2016년에는 스마트폰 버전의 야후 재팬 시작 페이지 프런트엔드 개편 프로젝트도 진행했다.

윤인성

홍차와 커피를 좋아하며 요리, 음악, 그림, 스컬핑 등이 취미다. 『모던 웹을 위한 JavaScript+jQuery 입문』 『모던 웹을 위한 Node.js 프로그래밍』 『모던 웹 디자인을 위한 HTML5+CSS3 입문』 등을 저술하였으며, 『크롤링 핵심 가이드』 『파이썬을 이용한 웹 크롤링과 스크레이핑』 『모던 자바스크립트 개발자를 위한 리액트 프로그래밍』 『최신 표준 HTML5+CSS3 디자인』 『파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문』 『스위프트로 시작하는 아이폰 앱 개발 교과서』 『유니티 게임 이펙트 입문』 『모던 웹사이트 디자인의 정석』 등을 번역했다.

  • ▣ 01장: 리액트/리덕스란?
    • 1-1 리액트란?
      • 리액트의 특징
      • 다른 라이브러리/프레임워크와의 차이
    • 1-2 플럭스란?
      • 플럭스의 구성 요소
      • 리덕스의 특징
    • 1-3 리덕스란?
      • 리덕스의 구성 요소
    •  
  • ▣ 2장: create-react-app으로 개발 시작하기
    • 2-1 create-react-app이란?
      • 개발 환경 갖추기
      • 설치
      • create-react-app 설치
    • 2-2 애플리케이션 만들기
      • 프로젝트의 구성
      • 애플리케이션 실행
    • Hello, World!
    •  
  • ▣ 03장: JSX
    • 3-1 JSX란?
      • 자바스크립트를 확장한 언어
      • JSX가 왜 필요할까?
      • JSX 문법
    • 3-2 바벨을 사용해 JSX를 자바스크립트로 변환하기
      • 트랜스파일러와 바벨
      • CLI
      • 웹팩이란?
    •  
  • ▣ 04: 리액트 컴포넌트
    • 4-1 리액트 컴포넌트란?
      • 컴포넌트 개발 준비
      • 함수형 컴포넌트와 클래스형 컴포넌트
      • 리액트 요소
      • 데이터 주고받기(props)
    • 4-2 상태와 이벤트 핸들링
      • 컴포넌트 준비
      • 이벤트 핸들링
      • state 정리
      • 마운트와 관련된 라이프사이클 메서드
    • 4-3 라이프사이클
      • 데이터 업데이트와 관련된 라이프사이클
      • 오류 처리와 관련된 라이프사이클 메서드
      • 리덕스만으로 Todo 애플리케이션 구현하기
    •  
  • ▣ 05장: 리덕스를 이용한 애플리케이션 상태 관리
    • 5-1 리덕스로 애플리케이션 상태 관리하기
      • 리덕스 구성하기
      • 액션크리에이터 정의하기
      • 스토어 생성
      • React.js와 조합하기
      • 파일을 기능별로 분리
    • 5-2 react-redux
      • react-redux 설치
      • 컨테이너 컴포넌트와 프레젠테이셔널 컴포넌트
      • react-redux가 하는 것
      • Todo 애플리케이션에 react-redux 도입
    •  
  • ▣ 06장: 라우팅 구현
    • 6-1 라우팅이란?
      • 라우팅 구현 패턴
      • 라우팅 라이브러리 소개
    •  
  • ▣ 07장: 리덕스 미들웨어
    • 7-1 라우팅이란?
      • 리덕스 미들웨어의 기초
      • 액션 로그를 출력하는 리덕스 미들웨어 사용하기
    • 7-2 액션의 로그를 출력하는 리덕스 미들웨어 만들기
      • 미들웨어의 구조
      • 로그 미들웨어 구현
    • 7-3 미들웨어 예
      • thunk 미들웨어
      • 로컬 스토리지
    •  
  • ▣ 08장: 리덕스의 비동기 처리
    • 8-1 비동기 처리 기초
      • 비동기 처리란?
      • redux-thunk를 이용한 비동기 처리
      • thunk를 사용할 경우의 Promise와 Async/Await
    • 8-2 thunk 미들웨어의 편리한 사용법
      • 여러 개의 액션 묶기
      • getState 함수
    •  
  • ▣ 09장: 리덕스를 이용한 애플리케이션 상태 관리
    • 10-1 애플리케이션 만들 준비하기
      • 예제 애플리케이션
      • 깃허브 API의 기본적인 형태
      • 애플리케이션의 기본 형태 만들기
    • 10-2 애플리케이션 만들기
      • 파일과 디렉터리 구성
      • 리덕스 적용
      • 라우팅 적용
      • 페이지 라우팅 구현
      • 비동기 처리 구현
      • 리듀서 구현하기
      • Material-UI 적용
    •  
  • ▣ 11장: 애플리케이션 테스트 작성
    • 11-1 테스트 라이브러리(테스트 프레임워크)
      • 제스트
      • 제스트 사용
    • 11-2 리액트/리덕스 애플리케이션 테스트
      • 액션크리에이터 테스트
      • 비동기 액션크리에이터 테스트
      • 리듀서 테스트
      • 리액트 컴포넌트의 유닛 테스트
      • 리액트 컴포넌트의 스냅숏 테스트
    •  
  • ▣ 12장: 애플리케이션 공개
    • 12-1 애플리케이션 공개
      • 깃허브 페이지
      • 깃허브 페이지의 장점과 단점
    • 12-2 파이어베이스
      • 파이어베이스란?
    •  
  • ▣ 13장: 서버 사이드 렌더링
    • 13-1 서버 사이드 렌더링이란?
      • 서버 사이드 렌더링을 반드시 해야 하는 것은 아니다
      • 리액트 서버 사이드 렌더링의 흐름
      • 리액트 v15 이전의 서버 사이드 렌더링
    • 13-2 리액트 v16 이후의 서버 사이드 렌더링
      • 리액트 v16의 서버 사이드 렌더링의 변경 사항
      • 리덕스의 서버 사이드 렌더링
  • 42쪽, 페이지 하단 예제 코드의 3번째 줄

    const parent = <div>{parent}</div>;
    

    ==>

    const parent = <div>{child}</div>;