HOME > Detail View

Detail View

프로 리액트 : React.js를 이용한 모던 프런트엔드 구축 (Loan 13 times)

Material type
단행본
Personal Author
Antonio, Cássio de Sousa 최민석, 역
Title Statement
프로 리액트 : React.js를 이용한 모던 프런트엔드 구축 / 카시우 지 소자 안토니우 지음 ; 최민석 옮김
Publication, Distribution, etc
파주 :   위키북스,   2016  
Physical Medium
xix, 438 p. : 삽화 ; 24 cm
Series Statement
위키북스 오픈소스 & 웹 시리즈 ;079
Varied Title
Pro React
ISBN
9791158390426
General Note
색인수록  
부록: A. 웹팩, B. 자바스크립트 2015  
Subject Added Entry-Topical Term
Application software --Programming User interfaces (Computer systems) JavaScript (Computer program language)
000 00000cam c2200205 c 4500
001 000045875299
005 20160704173830
007 ta
008 160704s2016 ggka 001c kor
020 ▼a 9791158390426 ▼g 93000
035 ▼a (KERIS)BIB000014093405
040 ▼a 211015 ▼c 211009 ▼d 211009
041 1 ▼a kor ▼h eng
082 0 4 ▼a 005.1 ▼2 23
085 ▼a 005.1 ▼2 DDCK
090 ▼a 005.1 ▼b 2016z4
100 1 ▼a Antonio, Cássio de Sousa
245 1 0 ▼a 프로 리액트 : ▼b React.js를 이용한 모던 프런트엔드 구축 / ▼d 카시우 지 소자 안토니우 지음 ; ▼e 최민석 옮김
246 1 9 ▼a Pro React
260 ▼a 파주 : ▼b 위키북스, ▼c 2016
300 ▼a xix, 438 p. : ▼b 삽화 ; ▼c 24 cm
440 0 0 ▼a 위키북스 오픈소스 & 웹 시리즈 ; ▼v 079
500 ▼a 색인수록
500 ▼a 부록: A. 웹팩, B. 자바스크립트 2015
650 0 ▼a Application software ▼x Programming
650 0 ▼a User interfaces (Computer systems)
650 0 ▼a JavaScript (Computer program language)
700 1 ▼a 최민석, ▼e▼0 AUTH(211009)37364
900 1 0 ▼a 안토니우, 카시우 지 소자, ▼e
945 ▼a KLPA
949 ▼a 위키북스 오픈소스 and 웹 시리즈 ; ▼v 079

Holdings Information

No. Location Call Number Accession No. Availability Due Date Make a Reservation Service
No. 1 Location Main Library/Monographs(3F)/ Call Number 005.1 2016z4 Accession No. 111758685 Availability Available Due Date Make a Reservation Service B M

Contents information

Book Introduction

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

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

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

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

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

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

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

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

<출판사 리뷰>

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

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

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

★ 이 책에서 다루는 내용 ★

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


Information Provided By: : Aladin

Author Introduction

카시우 지 소자 안토니우(지은이)

20년 전 싱클레어 스펙트럼(Sinclair Spectrum)에서 프로그래밍을 시작한 후 브라질과 미국에서 소프트웨어 엔지니어이나 기술 관리자로 일해왔으며, 마이크로소프트, 코카콜라, 유니레버, HSBC 등 여러 대기업의 주요 프로젝트에 참여했다. 그가 창업한 회사는 2014년 후반 인수됐으며, 현재 컨설턴트로 일하고 있다. 트위터에서는 @cassiozen으로 활동하고 있다.

최민석(옮긴이)

2005년부터 번역 회사에서 언어 전문가로 일하다 독립한 후 현재는 IT 전문 번역가로 일하고 있다. 10년 이상 다양한 소프트웨어 현지화와 개발자 웹사이트 한글화 프로젝트를 진행했으며, 현재는 주요 IT 기업 제품의 한글화와 IT 전문 서적을 번역하는 일을 병행하고 있다. 『리액트 디자인 패턴과 모범 사례』(에이콘, 2016) 『Unity 5.x By Example』(에이콘, 2016) 『유니티 5 메카님 캐릭터 애니메이션』(에이콘, 2016), 『유니티와 C#으로 배우는 게임 개발 교과서』(위키북스, 2015), 『엔터프라이즈 애플리케이션 아키텍처 패턴』(위키북스, 2015), 『네티 인 액션』(위키북스, 2016), 『유니티 5 셰이더와 이펙트 입문』(위키북스, 2017) 등이 있다.

Information Provided By: : Aladin

Table of Contents

▣ 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 컴포넌트 
- 에어치프 애플리케이션 완성: 항공권 로딩 
비동기 데이터 가져오기 구현 발전시키기 
- 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	
프로미스 
화살표 함수 
템플릿 문자열 
구조분해 할당
▣ 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 컴포넌트 
- 에어치프 애플리케이션 완성: 항공권 로딩 
비동기 데이터 가져오기 구현 발전시키기 
- 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	
프로미스 
화살표 함수 
템플릿 문자열 
구조분해 할당

New Arrivals Books in Related Fields

Ramamurthy, Bina (2021)
윤관식 (2020)