읽은기간: 2018.8.1 ~ 2018.8.5 카테고리: 개발

서평

RxJS를 제대로 공부할 수 있는 책이 드디어 나왔다. RxJS를 단순히 라이브러리로 접근하다보면 몇 가지 주요 operator를 다루게 되지만 크게 장점을 못느낀다. 사실 개발 방법에 대한 패러다임을 바꿔야 한다. 절차지향에서 객체지향으로 옮겨 가듯이 기존에 UI를 개발해왔던 방식을 뒤집어야 RxJS를 장점을 제대로 살릴 수 있다.

이 책은 모든 RxJS의 operator를 다루는게 아니라 이런 RxJS의 철학과 개발 방법론을 다룬 책이다. 책의 구성 순서대로 읽다보면 RxJS의 철학과 개발 방법론을 이해 할 수 있다.

RxJS의 수 많은 operartor는 사실 반복적으로 다루는 내용을 패턴화 한게 전부이다. 그래서 기본 개념과 철학을 이해하면 필요한 operator는 공식 문서를 통해서 쉽게 적용 가능하다.

많은 사람들이 RxJS 세계로 들어오기를 바란다.

목차

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