Top

리액트 16 [리액트를 사용한 고급 웹앱 클라이언트 제작]

  • 원서명Pro React 16 (ISBN 9781484244500)
  • 지은이애덤 프리먼(Adam Freeman)
  • 옮긴이이태상
  • ISBN : 9791161754161
  • 45,000원
  • 2020년 05월 21일 펴냄
  • 페이퍼백 | 968쪽 | 188*235mm
  • 시리즈 : 웹 프로페셔널

책 소개

요약

리액트는 가장 인기 있는 웹 UI 라이브러리다. 이 책은 기초부터 시작해 정교한 고급 기능까지 리액트를 최대한으로 설명한다. 또한 리액트로 웹 애플리케이션을 개발할 때 필요한 다양한 도구와 기법도 빠뜨리지 않았다. 이 책을 통해 정교하고 풍부한 UI 기반에서 강력한 아키텍처와 응답성 높은 웹 애플리케이션 개발 방법을 배우고 실무에 적용할 수 있다.

이 책에서 다루는 내용

■ 리액트 아키텍처의 확실한 이해
■ 리액트를 사용한 풍부하고 동적인 웹앱 클라이언트 제작
■ 리덕스를 사용한 데이터 스토어 제작
■ REST와 그래프QL로 데이터 사용
■ 리액트 프로젝트 테스트

이 책의 대상 독자

리액트를 사용해 동적인 클라이언트 측 애플리케이션을 제작하고자 하는 자바스크립트 개발자를 위한 책이다.

이 책의 구성

1부, 리액트 시작하기 1부는 리액트 개발을 시작하는 데 필요한 정보를 제공한다. 1장에서 간단한 리액트 애플리케이션의 제작 방법을 익히고 3장과 4장에서 HTML, CSS, 자바스크립트와 같은 리액트 개발의 핵심 기술에 관한 기초 지식을 복습한다. 5장부터 8장까지는 SportsStore라고 하는 좀 더 현실적인 애플리케이션 제작 과정을 거친다.

2부, 리액트 주무르기 2부에서는 대부분의 프로젝트에 필요한 리액트의 핵심 기능을 다룬다. 리액트에는 많은 기능이 내장돼 있다. 예제 애플리케이션을 위해 커스텀 코드와 콘텐츠를 추가하는 방식으로 기능을 깊이 있게 설명할 것이다.

3부, 리액트 애플리케이션 완성하기 리액트는 복잡한 애플리케이션에 필요한 고급 기능을 별도의 패키지를 통해 제공한다. 3부에서는 중요한 패키지들을 소개하고, 작동 원리를 설명하며, 어떻게 리액트의 핵심 기능에 적용할 수 있는지 알아본다

저자/역자 소개

지은이의 말

매우 인기 있는 리액트 프레임워크를 사용해 현대의 브라우저와 디바이스의 능력을 활용한 동적인 자바스크립트 애플리케이션을 구축한다. 리액트가 정교하고 풍부한 사용자 인터페이스의 기반을 제공하면서 동시에 어떻게 강력한 아키텍처와 응답성 높은 데이터의 강점을 가져다 주는지 배울 수 있다.
이 책에서는 리액트를 최대한으로 설명한다. 먼저 리액트 아키텍처와 이점을 설명하고, 나중에는 리액트뿐만 아니라 관련 도구와 라이브러리의 사용법까지 보여준다. 기초부터 시작해 정교한 고급 기능까지 여러분에게 필요한 지식을 깊이 있게 전달하면서 말이다.
각 주제는 명확하고 간결하게 나타내고, 각 장은 흔하게 겪을 수 있는 문제점과 해결책으로 구성했다.

지은이 소개

애덤 프리먼(Adam Freeman)

오랫동안 여러 기업에서 중책을 맡았던 IT 전문가다. 가장 최근에는 한 글로벌 은행에서 최고기술책임자(CTO, Chief Technology Officer)와 최고운영책임자(COO, Chief Operating Officer)를 역임했다. 은퇴한 후 지금은 IT 저술과 장거리 달리기에 전념하고 있다.

옮긴이의 말

스택 오버플로(Stack Overflow)의 2019년 조사에 의하면 가장 많이 사용되는 웹 프레임워크는 제이쿼리(jQuery), 리액트(React), 앵귤러(Angular) 순이었습니다. 범용 자바스크립트 라이브러리인 제이쿼리를 제외한다면, 자바스크립트 UI 프레임워크로는 여전히 리액트가 선두에 있습니다. 또한 가장 사랑하는, 가장 배우고 싶은 웹 프레임워크 부문에서도 리액트가 1위였습니다.
그런 인기만큼이나 리액트 관련 서적도 많습니다만, 그중에서도 이 책은 리덕스(Redux), URL 라우팅, 그래프QL(GraphQL) 리액트로 웹앱을 개발할 때 필요한 거의 모든 사항을 다루고 있습니다. 이 책의 또 하나의 장점은 모든 버전을 고정해 예제를 제시하고 있다는 점입니다. 많은 경우에 각 패키지들의 버전이 집필 시점과 달라짐에 따라 독자가 실습을 할 때 오류가 발생하거나 책의 설명이 맞지 않기도 합니다. 이 책은 그런 문제를 방지하고자 모든 패키지의 버전을 명시해 실습하게 했습니다. 예컨대 리액트의 경우 이 책에서는 16.7을 사용하며, 이 책을 보는 시점의 최신 버전은 16.13이나 16.14 정도로 예상됩니다. 그러나 이 정도의 마이너 버전 차이는 리액트를 공부하는 데 거의 지장을 주지 않습니다. 오히려 리액트와 그에 맞는 각 패키지들의 버전을 고정함으로써 완벽한 실습이 가능해집니다.
이 책은 리액트를 처음 접하는 독자, 이미 리액트를 기초 수준에서 알고 있는 독자 모두에게 적합합니다. 이 책으로 리액트를 마스터하고 실제 프로젝트에서도 충분히 활용할 수 있다고 감히 말씀드립니다. 신종 바이러스 사태 등 여러 가지 힘든 상황에서도 고군분투하는 모든 웹 개발자 분들의 건승과 성공을 빕니다.

옮긴이 소개

이태상

자바와 웹 전문가로서 주로 교육과 컨설팅을 진행했으며, 오랫동안 전자금융 업무를 담당했다. 현재 한 금융기관의 전사 시스템 재구축을 위한 연구를 진행 중이다. 『톰캣 최종분석』(에이콘, 2005)부터 『리액트 웹앱 제작 총론 2/e』(에이콘, 2019)까지 다수의 IT 서적을 번역했다.

목차

목차
  • 1부. 리액트 시작하기

  • 1장. 첫 리액트 애플리케이션
    • 개발 환경 준비
      • Node.js 설치
      • Create React App 설치
      • 깃 설치
      • 에디터 설치
      • 브라우저 설치
    • 프로젝트 생성
      • 프로젝트 구조
      • 부트스트랩 CSS 프레임워크
      • 개발 도구
    • 임시 콘텐츠 대체
    • 동적 콘텐츠
      • 상태 데이터의 변경
    • 할 일 목록 애플리케이션에 기능 추가
      • 할 일 목록 보여주기
    • 컴포넌트 추가
      • 자식 컴포넌트 사용
    • 마무리 작업
      • 완료된 할 일의 시각적 처리
      • 데이터의 지속 저장
    • 정리

  • 2장. 리액트의 이해
    • 리액트는 필수인가?
      • 라운드 트립 애플리케이션
      • 싱글 페이지 애플리케이션
      • 애플리케이션 복잡성
    • 필요한 사전 지식
    • 필요한 개발 환경
      • 이 책의 구성
      • 1부: 리액트 시작하기
      • 2부: 리액트 주무르기
      • 3부: 리액트 애플리케이션 완성하기
    • 예제의 양
    • 이 책의 예제 코드
    • 이 책의 정오표
    • 연락 방법
    • 정리

  • 3장. HTML, JSX, CSS 핵심 정리
    • 준비 작업
      • HTML 파일과 컴포넌트 준비
      • 예제 실행
    • HTML과 DOM 엘리먼트의 이해
      • 엘리먼트 콘텐츠의 이해
      • 속성의 이해
      • HTML 엘리먼트의 동적 생성
      • 리액트 컴포넌트를 사용한 엘리먼트의 동적 생성
    • 리액트 엘리먼트에서의 표현식
      • 표현식과 정적 콘텐츠의 결합
      • 표현식 안에서의 계산
      • 컴포넌트 프로퍼티와 메소드 접근
      • 표현식으로 프로퍼티 값 설정
      • 표현식으로 이벤트 처리
    • 부트스트랩 소개
      • 기본 부트스트랩 클래스 적용
      • 부트스트랩으로 그리드 생성
      • 부트스트랩으로 테이블 스타일 적용
      • 부트스트랩으로 폼 스타일 적용
    • 정리

  • 4장. 자바스크립트 핵심 정리
    • 준비 작업
    • 자바스크립트 구문
    • 자바스크립트 함수
      • 파라미터가 있는 함수
      • 결과를 리턴하는 함수
      • 다른 함수의 인자로 함수 사용
    • 변수와 타입
      • 기본 데이터 타입
    • 자바스크립트 연산자
      • 조건문
      • 등치 연산자와 일치 연산자
      • 명시적 타입 변환
    • 배열
      • 배열 리터럴
      • 배열 콘텐츠의 읽기와 변경
      • 배열 콘텐츠 열거
      • 스프레드 연산자
      • 배열의 내장 메소드
    • 객체
      • 객체 리터럴
      • 메소드로서의 함수
      • 클래스
      • 다른 객체로 프로퍼티 복사
      • 명명된 파라미터로 프로퍼티 읽기
    • 자바스크립트 모듈
      • 자바스크립트 모듈의 생성과 사용
      • 명명된 기능 내보내기
      • 여러 개의 명명된 기능 정의하기
    • 자바스크립트 프로미스
      • 비동기 작업의 문제점
      • 프로미스 사용하기
      • 비동기 작업을 다루는 쉬운 방법
    • 정리

  • 5장. SportsStore: 현실적인 애플리케이션
    • 프로젝트 준비
      • 추가 패키지 설치
      • CSS 스타일시트 추가
      • 웹 서비스 준비
      • 예제 애플리케이션 실행
    • 데이터 스토어
      • 데이터 스토어 액션과 액션 생성자
    • 쇼핑 기능 만들기
      • 상품과 카테고리 컴포넌트 제작
      • 데이터 스토어 및 URL 라우터 연결
      • 애플리케이션에 Shop 추가
      • 카테고리 버튼 개선
    • 쇼핑 카트 추가
      • 데이터 스토어 확장
      • CartSummary 컴포넌트 추가
      • CartDetails 컴포넌트 추가
      • 라우팅 설정에 카트 URL 추가
    • 정리

  • 6장. SportsStore: REST와 결제 시스템
    • 준비 작업
    • RESTful 웹 서비스
      • 설정 파일 만들기
      • 데이터 소스 생성
      • 데이터 스토어 확장
      • 액션 생성자 수정
    • 페이지네이션
      • 웹 서비스 페이지네이션
      • HTTP 요청과 액션 변경
      • 데이터 로딩 컴포넌트 제작
      • ShopConnector 컴포넌트 수정
      • 카테고리 버튼 수정
      • 페이지네이션 제어
    • 결제 처리 시스템
      • REST 데이터 소스와 데이터 스토어 확장
      • 결제 폼 제작
    • ShopConnector 컴포넌트 다듬기
    • 정리

  • 7장. SportsStore: 관리자 기능
    • 준비 작업
      • 예제 애플리케이션 실행
    • 그래프QL 서비스 제작
      • 그래프QL 스키마 정의
      • 그래프QL 리졸버 정의
      • 서버 갱신
    • 주문 관리 기능
      • 주문 테이블 컴포넌트 정의
      • 커넥터 컴포넌트 정의
      • 그래프QL 클라이언트 구성
      • 뮤테이션 설정
    • 상품 관리 기능
      • 상품 테이블 컴포넌트 연결
      • 상품 편집 컴포넌트 제작
      • 라우팅 설정 추가
    • 정리

  • 8장. SportsStore: 인증과 배포
    • 준비 작업
    • 그래프QL 요청에 대한 인증
      • 인증 시스템의 이해
      • 인증 컨텍스트 생성
      • 인증 폼 만들기
      • 관리자 기능의 보호
      • 관리자 기능으로의 내비게이션 링크 추가하기
    • 애플리케이션 배포 준비
      • 관리자 기능에 지연 로딩 적용
      • 데이터 파일 만들기
      • 요청 URL 변경
      • 애플리케이션 빌드
      • 애플리케이션 서버 제작
      • 배포 버전과 서버 테스트
    • SportsStore 애플리케이션의 컨테이너화
      • 도커 설치
      • 애플리케이션 준비
      • 도커 컨테이너 생성
      • 애플리케이션 실행
    • 정리

  • 2부. 리액트 주무르기

  • 9장. 리액트 프로젝트의 이해
    • 준비 작업
    • 리액트 프로젝트의 구조
      • 소스 코드 폴더
      • 패키지 폴더
    • 리액트 개발 도구
      • 컴파일과 변환 과정의 이해
      • 개발 HTTP 서버
      • 정적 콘텐츠
      • 에러 디스플레이
      • 린터의 이해
      • 개발 도구 설정
    • 디버깅
      • 애플리케이션의 상태 조사
      • 브라우저 디버거 사용하기
    • 정리

  • 10장. 컴포넌트와 props
    • 준비 작업
    • 컴포넌트의 이해
      • HTML 콘텐츠 렌더링
      • 다른 컴포넌트의 렌더링
    • props의 이해
      • 부모 컴포넌트에서 props 정의
      • 자식 컴포넌트에서 props 받기
    • 자바스크립트와 props의 조합
      • 콘텐츠의 조건부 렌더링
      • 배열 렌더링
      • 복수의 엘리먼트 렌더링
      • 렌더링하지 않기
      • props 변경 시도
    • 함수 props
      • 함수 prop에 인자 사용
    • 자식 컴포넌트에 props 전달
      • props 일괄 전달
    • 기본 prop 값 제공
    • prop 값의 타입 검사
    • 정리

  • 11장. 상태 유지 컴포넌트
    • 준비 작업
    • 컴포넌트 유형의 이해
      • 무상태 컴포넌트의 이해
      • 상태 유지 컴포넌트의 이해
    • 상태 유지 컴포넌트 제작
      • 컴포넌트 클래스의 이해
      • import 구문의 이해
      • render 메소드의 이해
      • 상태 유지 컴포넌트 props의 이해
    • 상태 데이터 추가
      • 상태 데이터 읽기
    • 상태 데이터 변경
      • 상태 데이터 변경의 함정
    • 훅을 사용한 상태 유지 컴포넌트
    • 상태 데이터 끌어올리기
      • 상태 데이터 더 끌어올리기
    • prop 타입과 기본값 정의
    • 정리

  • 12장. 이벤트
    • 준비 작업
    • 이벤트의 이해
      • 이벤트 처리 메소드 사용
      • 이벤트 객체의 이해
      • 이벤트 핸들러 호출에 커스텀 인자 사용
      • 기본 동작 취소
    • 이벤트 전파
      • 타깃 단계와 버블 단계
      • 캡처 단계
      • 이벤트 단계 판별
      • 이벤트 전파 중단
    • 정리

  • 13장. 재조정과 생명주기
    • 준비 작업
      • 예제 컴포넌트 작성
    • 콘텐츠 렌더링에 대한 이해
      • 갱신 과정의 이해
      • 재조정 과정의 이해
      • 목록 재조정의 이해
    • 명시적 재조정
    • 컴포넌트 생명주기
      • 마운트 단계
      • 업데이트 단계
      • 언마운트 단계
    • 이펙트 훅
    • 고급 생명주기 메소드
      • 불필요한 컴포넌트 업데이트의 방지
      • props 값으로부터 상태 데이터 갱신
    • 정리

  • 14장. 애플리케이션 컴포지션
    • 준비 작업
      • 예제 컴포넌트 작성
    • 기본 컴포넌트 관계
    • children prop 사용하기
      • children prop 다루기
    • 특성화 컴포넌트
    • 고차 컴포넌트
      • 상태 유지 HOC
      • HOC의 조합
    • 렌더링 prop
      • 인자가 있는 렌더링 prop
    • 전역 데이터를 위한 컨텍스트
      • 컨텍스트 정의
      • 컨텍스트 소비자
      • 컨텍스트 제공자
      • 컨텍스트 데이터 변경
      • 컨텍스트 API 사용
    • 에러 경계
      • 에러 경계 컴포넌트
    • 정리

  • 15장. 폼과 데이터 검증
    • 준비 작업
      • 예제 컴포넌트 작성
      • 개발 도구 실행
    • 폼 엘리먼트 사용
      • select 엘리먼트
      • 라디오 버튼
      • 체크박스
      • 체크박스를 사용한 배열 채우기
      • 텍스트 영역
    • 폼 데이터 검증
      • 검증 규칙 정의
      • 컨테이너 컴포넌트 제작
      • 검증 메시지 표시
      • 폼 검증 적용
      • 그 밖의 엘리먼트와 데이터 타입의 검증
      • 폼에 특정적인 검증
    • 정리

  • 16장. ref와 포털
    • 준비 작업
    • ref 생성
    • 비제어 폼 컴포넌트
      • 콜백 함수를 사용한 ref 생성
      • 비제어 폼 컴포넌트의 검증
    • ref와 생명주기
    • 다른 라이브러리나 프레임워크를 위한 ref
    • 자식 컴포넌트의 콘텐츠에 접근
      • ref 포워딩
    • 포털
    • 정리

  • 17장. 유닛 테스트
    • 준비 작업
      • 컴포넌트 작성
      • 예제 애플리케이션 실행
    • 간단한 유닛 테스트
    • 얕은 렌더링을 사용한 컴포넌트 테스트
    • 전체 렌더링을 사용한 컴포넌트 테스트
    • props, 상태, 메소드, 이벤트를 사용한 테스트
      • 메소드 테스트
      • 이벤트 테스트
      • 컴포넌트 상호작용 테스트
    • 정리

  • 3부. 리액트 애플리케이션 완성하기

  • 18장. 온전한 애플리케이션 제작
    • 프로젝트 생성
      • 개발 도구 실행
    • 예제 애플리케이션 작성
      • 상품 관련 개발
      • 공급업체 관련 개발
      • 애플리케이션 완성하기
    • 예제 애플리케이션의 한계
    • 정리

  • 19장. 리덕스 데이터 스토어
    • 준비 작업
    • 데이터 스토어 생성
      • 데이터 타입 정의
      • 초기 데이터 정의
      • 액션 타입 정의
      • 액션 생성자 정의
      • 리듀서 정의
      • 데이터 스토어 생성
    • 데이터 스토어 사용
      • 최상위 컴포넌트에 데이터 스토어 적용
      • 상품 데이터 연결
      • 공급업체 데이터 연결
    • 데이터 스토어 확장
      • 스토어에 상태 데이터 추가
      • 액션 타입과 액션 생성자 정의
      • 리듀서 정의
      • 스토어에 상태 데이터 기능 통합
      • 컴포넌트와 상태 데이터 연결
    • 복수의 액션 디스패치
    • 참조의 필요성
    • 정리

  • 20장. 데이터 스토어 API
    • 준비 작업
    • 리덕스 데이터 스토어 API
      • 데이터 스토어 상태 취득
      • 데이터 스토어의 변경 감시
      • 액션 디스패치
      • 커넥터 컴포넌트 제작
    • 리듀서 개선
    • 데이터 스토어 미들웨어
    • 데이터 스토어 개선
      • 개선자 적용
    • 리액트 리덕스 API
      • 고급 연결 기능
    • 정리

  • 21장. URL 라우팅
    • 준비 작업
    • URL 라우팅 시작하기
      • Link 컴포넌트
      • Route 컴포넌트
    • 내비게이션에 대한 응답
      • 컴포넌트와 콘텐츠 선택
      • URL 매칭
      • 단일 Route 매칭
      • 리다이렉션 사용
    • 내비게이션 링크 렌더링
      • 활성화된 링크 표시
    • 라우터 선택
      • HashRouter 컴포넌트
    • 정리

  • 22장. 고급 URL 라우팅
    • 준비 작업
    • 라우팅 인식 컴포넌트
      • match prop
      • location prop
      • URL 파라미터 사용
    • 다른 컴포넌트에서 라우팅 데이터 접근
      • 라우팅 데이터의 직접 접근
      • HOC를 사용한 라우팅 데이터 접근
    • 프로그래밍 방식의 내비게이션
      • 컴포넌트를 사용한 프로그래밍 방식의 내비게이션
      • 내비게이션의 사용자 확정
    • 프로그래밍 방식의 라우트 생성
    • 데이터 스토어 컴포넌트와 함께 라우팅 사용
      • 디스플레이 컴포넌트 교체
      • 편집기 컴포넌트 수정
      • 테이블 컴포넌트 수정
      • 라우팅 설정의 마무리
    • 정리

  • 23장. RESTful 웹 서비스
    • 준비 작업
      • 프로젝트에 패키지 추가
      • 웹 서비스 준비
      • 컴포넌트와 라우트 추가
      • 웹 서비스와 예제 애플리케이션 실행
    • RESTful 웹 서비스의 이해
    • 웹 서비스 소비하기
      • 데이터 소스 컴포넌트 제작
      • 컴포넌트에서 데이터 가져오기
      • 데이터의 저장, 갱신, 삭제
      • 에러 처리
    • 데이터 스토어와 함께 웹 서비스 소비하기
      • 신규 미들웨어 제작
      • 데이터 스토어에 미들웨어 추가
      • 애플리케이션 완성
    • 정리

  • 24장. 그래프QL의 이해
    • 준비 작업
    • 그래프QL의 이해
    • 그래프QL 서버 제작
      • 스키마 작성
      • 리졸버 제작
      • 서버 제작
    • 그래프QL 쿼리 작성
      • 연관 데이터 질의
      • 인자를 사용한 쿼리
    • 그래프QL 뮤테이션
    • 그 밖의 그래프QL 기능
      • 요청 변수
      • 다중 요청
      • 쿼리 프래그먼트
    • 정리

  • 25장. 그래프QL 소비하기
    • 준비 작업
      • 패키지 추가
      • 그래프QL 서버를 위한 데이터 변경
      • 스키마와 리졸버 갱신
      • 그래프QL 서버에 개발 도구 통합
    • 그래프QL 서비스 소비하기
      • 쿼리와 뮤테이션 정의
      • 데이터 소스 정의
      • 격리된 컴포넌트 설정
    • 데이터 스토어와 함께 그래프QL 사용
      • 그래프QL 데이터 형식 조정
    • 그래프QL 클라이언트 프레임워크
      • 클라이언트 설정
      • 그래프QL 컴포넌트 제작
      • 뮤테이션 사용
      • 공급업체 데이터와 편집 기능 추가

도서 오류 신고

도서 오류 신고

에이콘출판사에 관심을 가져 주셔서 고맙습니다. 도서의 오탈자 정보를 알려주시면 다음 개정판 인쇄 시 반영하겠습니다.

오탈자 정보는 다음과 같이 입력해 주시면 됩니다.

(예시) p.100 아래에서 3행 : '몇일'동안 -> 며칠동안