RxJS 퀵스타트
도서명:RxJS 퀵스타트
저자/출판사:손찬욱/루비페이퍼
쪽수:440쪽
출판일:2018-07-24
ISBN:9791186710357
목차
RxJS를 시작하기 전에
1.1. 웹 환경의 변화
1.2. 웹 개발 복잡도 증가
1.3. 웹 애플리케이션은 상태 머신이다
1.4. 웹 애플리케이션 오류가 발생하는 경우
__1.4.1. 입력 오류
__1.4.2. 상태 오류
__1.4.3. 로직 오류
1.5. RxJS는 무엇인가? 그리고 웹 애플리케이션과 무슨 관련이 있는가?
- 1부 -
Chapter 01. RxJS가 해결하려고 했던 문제 1 - 입력 데이터의 오류
1.1. 웹 애플리케이션의 입력 데이터
1.2. 입력 데이터의 전달 시점이 다양하다
__1.2.1. 동기
__1.2.2. 비동기
1.3. 동기와 비동기를 함께 사용할 수밖에 없는가?
1.4. RxJS는 어떻게 개선하였나?
__1.4.1. Observable
__1.4.2. 모든 데이터는 Observable 인스턴스로 만들 수 있다
1.5. 정리
Chapter 02. RxJS가 해결하려고 했던 문제 2 - 상태 전파 문제
1.1. 웹 애플리케이션의 상태
1.2. 웹 애플리케이션의 상태 변화로 인한 문제점
__1.2.1. 첫째, User의 인터페이스가 변경되면, System도 함께 변경해야 한다
__1.2.2. 둘째, User 상태를 확인하기 위한 인터페이스에 대한 의사소통 비용이 발생한다
__1.2.3. 셋째, 다수의 클래스가 User에 의존 관계가 있는 경우라면 User의 변경 여부를
반영하기 위해 다수의 클래스들이 직접 User의 상태를 모두 반영해야 한다
1.3. 우리가 이미 알고 있는 솔루션 - 옵서버 패턴
__1.3.1. Loosely Coupling
__1.3.2. 자동 상태 전파
__1.3.3. 인터페이스의 단일화
1.4. 옵서버 패턴의 흔한 예
1.5. 옵서버 패턴 적용하기
1.6. RxJS는 무엇을 해결하고자 했는가?
__1.6.1. 상태 변화는 언제 종료되는가?
__1.6.2. 상태 변화에서 에러가 발생하면?
__1.6.3. Observer에 의해 Subject의 상태가 변경되는 경우는?
1.7. RxJS는 어떻게 개선하였나?
__1.7.1. 인터페이스의 확장
__1.7.2. Observable은 Read-only
1.8. Observable은 리액티브하다
1.9. 정리
Chapter 03. RxJS가 해결하려고 했던 문제 3 - 로직 오류
1.1. 웹 애플리케이션의 로직
1.2. 로직의 복잡성 그리고 오류
__1.2.1. 반복문과 분기문
__1.2.2. 변수는 오류의 시작
1.3. 자바스크립트의 솔루션
__1.3.1. 로직의 분리
__1.3.2. 반복문, 분기문, 그리고 변수와의 이별
1.4. RxJS는 어떻게 개선하였나?
__1.4.1. RxJS가 제공하는 오퍼레이터
__1.4.2. 불변 객체 Observable
1.5. 정리
부록1. 1부를 마치며
1.1. 입력 데이터 오류
1.2. 상태 전파 오류
1.3. 로직 처리의 오류
부록2. 함수형 프로그래밍
1.1. 함수형 프로그래밍이란?
1.2. 수학적 함수의 계산
1.3. 상태 변경과 가변 데이터를 피하려는
__1.3.1. 부원인과 부작용
__1.3.2. 불변 데이터
1.4. 순수 함수, 상태가 없다
1.5. RxJS에 녹아 있는 함수형 프로그래밍
- 2부 -
Chapter 01. RxJS란 무엇인가?
1.1. RxJS란?
1.2. RxJS 시작하기
__1.2.1. RxJS 첫 번째 예제
__1.2.2. RxJS 첫 번째 예제 개선하기
__1.2.3. RxJS 두 번째 예제
1.3. RxJS 4대 천왕
__1.3.1. Observable
__1.3.2. 오퍼레이터
__1.3.3. Observer
__1.3.4. Subscription
1.4. RxJS 개발 방법
1.5. 정리
Chapter 02. Observable 만들기
1.1. Observable 생성자를 이용하여 Observable 만들기
1.2. Observable 구현 시 고려해야 할 것들
__1.2.1. 에러 발생
__1.2.2. 데이터 전달이 완료된 경우
__1.2.3. 구독 해제
1.3. rxjs 네임스페이스에 있는 생성 함수로 Observable 만들기
__1.3.1. of
__1.3.2. range
__1.3.3. fromEvent
__1.3.4. from
__1.3.5. interval
1.4. 특별한 용도의 Observable 만들기
__1.4.1. empty
__1.4.2. throwError
__1.4.3. never
1.5. 정리
Chapter 03. RxJS의 핵심 - Observable
1.1. 함수와 Observable
1.2. Promise와 Observable
__1.2.1. Lazy
__1.2.2. Cancellation
1.3. 함수 VS Observable VS Promise
1.4. Pull과 Push가 가지는 의미
__1.4.1. Push 방식은 데이터 처리에 따른 오류 처리가 필요 없다
__1.4.2. Push 방식은 리액티브하다
1.5. 정리
Chapter 04. RxJS 오퍼레이터를 살펴보기 전에
1.1. 마블 다이어그램
1.2. 오퍼레이터 활용법
__1.2.1. RxJS 오퍼레이터는 어떻게 찾죠?
__1.2.2. RxJS 오퍼레이터는 어떻게 학습하는 게 좋을까요?
1.3. 정리
Chapter 05. 자동완성 UI 만들기
1.1. 자동완성 UI란?
1.2. 사용자의 키입력 처리 : 사용자가 입력한 검색어는 어떻게 얻나요?
__1.2.1. 전달되는 값을 바꾸고 싶어요
1.3. 서버에서 데이터 받기 : 검색 결과는 어떻게 얻나요?
1.4. 검색어로 서버 요청하기
__1.4.1. The Observable of Observables
__1.4.2. map하고 mergeAll을 합치면 뭐라고 부르나?
1.5. 데이터는 받아왔으나... 사용할 수가 없다
__1.5.1. 403 에러 처리: 빈번한 요청은 ****돼요
__1.5.2. 422 에러 처리: 빈 검색어는 서버로 요청하면 ****돼요
__1.5.3. keyup 이벤트는 꼭! 문자만을 받지 않는다
1.6. 데이터는 왔으니 이제 그림을 그리자!
__1.6.1. 검색 결과창 만들기
1.7. 코드
1.8. 정리
Chapter 06. 자동완성 UI 사용성 개선하기
1.1. 친절한 사용자 UI
__1.1.1. 입력한 검색어가 잘 처리되고 있나요?
__1.1.2. 검색 결과가 없는데요
1.2. 열악한 네트워크 환경
__1.2.1. 이미 서버에 요청한 reqesut를 취소할 수는 없을까?
__1.2.2. switchAll은 mergeMap과 같은 간단한 오퍼레이터가 없나?
__1.2.3. 서버 응답은 항상 200 코드만을 주지 않는다
1.3. 코드
1.4. 정리
Chapter 07. 자동완성 UI와 Subject
1.1. 사소한 문제점
__1.1.1. Cold Observable과 Hot Observable
__1.1.2. Subject
__1.1.3. Subject를 이용하여 사소한 문제 해결하기
1.2. 데이터 공유가 까다롭네?
__1.2.1. ConnectableObservable 만들기
__1.2.2. multicast에 매번 subject를 생성해야 하는가?
__1.2.3. ConnectableObservable 관리하기
1.3. 코드
1.4. 정리
Chapter 08. 캐러셀 UI 만들기
1.1. 캐러셀이란?
1.2. 캐러셀 UI 준비 작업
__1.2.1. 기본 구조
__1.2.2. HTML과 CSS
__1.2.3. 작업에 필요한 변수 정의
1.3. 사용자 터치나 마우스 입력을 Observable로 만들기
1.4. 드래그 기능
__1.4.1. 원하는 데이터 흐름 만들기
__1.4.2. 원하는 데이터 값 만들기
1.5. 드롭 기능
__1.5.1. 원하는 데이터 흐름 만들기
__1.5.2. 원하는 데이터 값 만들기
__1.5.3. 아차! drop$은 drag$부터 시작했었지
1.6. 캐러셀 UI 데이터 흐름 만들기
1.7. 코드
1.8. 정리
Chapter 09. 캐러셀 UI 상태 관리하기
1.1. 상태 관리
__1.1.1. scan과 reduce
1.2. 캐러셀 Observable에 scan 적용하여 상태 관리하기
__1.2.1. 드래그와 드롭 데이터 형태 일관성 있게 맞추기
__1.2.2. scan 적용하기
1.3. 캐러셀 동작시키기
1.4. 코드
1.5. 정리
Chapter 10. 캐러셀 UI 애니메이션 만들기
1.1. RxJS 스케줄러
__1.1.1. 스케줄러는 언제 쓰나요?
__1.1.2. 스케줄러에는 어떤 것이 있나요?
1.2. 애니메이션 구현하기
__1.2.1. Animation Observable 만들기
__1.2.2. 이동 시간에 따른 '이동 거리 비율' 구하기
__1.2.3. takeWhile로 애니메이션 종료하기
__1.2.4. concat으로 애니메이션 완료 값 1 전달하기
__1.2.5. 이동 거리의 비율로 실제 이동 거리 구하기
1.3. 모듈화하기
1.4. 캐러셀에 애니메이션 적용하기
1.5. 코드
1.6. 정리
부록1. RxJS의 Subjects
1.1. BehaviorSubject
1.2. ReplaySubject
1.3. AsyncSubject
1.4. Subject를 포함하는 alias 오퍼레이터
__1.4.1. publish와 Subject
__1.4.2. share와 Subject
부록2. 자바스크립트 비동기 처리 과정과 RxJS 스케줄러
1.1. 자바스크립트 엔진
1.2. 이벤트 루프(event loop)와 큐(queue)
1.3. 자바스크립트 처리 과정
1.4. RxJS 스케줄러와 자바스크립트 비동기 작업의 종류
__1.4.1. 태스크
__1.4.2. 마이크로태스크
-3부-
Chapter 01. 버스 노선 조회 서비스 살펴보기
1.1. 준비하기
__1.1.1. 로컬 PC에 다운로드하기
__1.1.2. 로컬 PC에 관련 모듈 설치하기
__1.1.3. API 서버 시작하기
1.2. 버스 노선 조회 서비스
1.3. 서비스 분석
__1.3.1. 조회 기능
__1.3.2. 데이터 흐름으로 본 조회 기능
__1.3.3. URL 공유 기능
__1.3.4. 해시태그 관점에서 본 URL 공유 기능
1.4. 예제 파일 내용 살펴보기
__1.4.1. app.js
__1.4.2. map.js
__1.4.3. sidebar.js
__1.4.4. autocomplete.js
__1.4.5. common.js
1.5. 정리
Chapter 02. 지도 영역 만들기
1.1. 지도 dragend Observable
__1.1.1. 주변 버스 정류소 목록 가져오는 Observable
__1.1.2. 주변 버스 정류소 목록을 지도에 표현하기
__1.2. 버스 정류소 클릭 Observable
__1.2.1. 버스 정류소 정보를 버스 정류소 마커로 변경하기
__1.2.2. 버스 정류소 마커를 버스 정류소 마커 정보로 변경하기
__1.2.3. 경유하는 버스 번호 목록 가져오는 Observable
__1.2.4. 버스 정류소 마커 클릭 시 버스 정류소ID 전달하기
__1.2.5. 버스 정류소ID를 경유하는 버스 번호 목록 데이터로 변경하기
1.3. 경유하는 버스 번호 목록 그리기
__1.3.1. combineLatest로 mapBus 메소드 변경하기
__1.3.2. 정보창 그리기
__1.3.3. 정보창 제어하기
1.4. 코드
1.5. 정리
Chapter 03. 자동완성 UI 만들기
1.1. 자동완성 UI
__1.1.1. 제어 대상 엘리먼트 추출하기
__1.1.2. 사용자 입력 내용 Observable 만들기
__1.1.3. 검색어로 버스 번호 목록 조회하는 Observable 만들기
__1.1.4. 검색 결과를 초기화하는 Observable 만들기
1.2. 입력값에 따라 발생하는 스크립트 오류
__1.2.1. 검색 결과가 단일 건일 경우
__1.2.2. 검색 결과가 없거나 에러가 발생한 경우
1.3. 코드
1.4. 정리
Chapter 04. URL 공유 기능과 초기 로딩 처리하기
1.1. URL 공유 기능
__1.1.1. 해시값 변경하기
__1.1.2. 해시값 분석하기
1.2. 초기 로딩 처리하기
__1.2.1. 현재 위치 정보 얻기
__1.2.2. search$와 연결하기
__1.2.3. 현재 위치 정보로 주변 버스 정류소 지도에 표시하기
__1.2.4. 적용하기
1.3. 버스 노선 결과 표현하기
__1.3.1. 지도 영역에 결과 표현하기
__1.3.2. 사이드바 영역에 결과 표현하기
1.4. 코드
1.5. 3부를 마치며
부 록. 예제에서 사용된 오픈 API
1.1. 공공데이터포털 공공 API
1.2. 네이버 지도 API
