RxJS 퀵스타트 : 북윈도
리뷰 0 위시 120

RxJS 퀵스타트 요약정보 및 구매

어리둥절한 RxJS를 개념부터 서비스까지! | RxJS 6+ 기반 설명

상품 선택옵션 0 개, 추가옵션 0 개

출판사 루비페이퍼
저자 손찬욱
ISBN 9791186710357 (1186710357)
정가 28,000원
판매가 25,200원(10% 할인)
배송비 무료배송
포인트 정책 설명문 닫기

00포인트

포인트 정책 설명문 출력

선택된 옵션

관심상품

상품 정보

사은품
상품 기본설명
어리둥절한 RxJS를 개념부터 서비스까지! | RxJS 6+ 기반 설명
상품 상세설명
RxJS를 왜, 언제, 어떻게 사용해야 하는가?에 대한 완벽한 해답!

RxJS가 소프트웨어 개발 문제를 어떤 식으로 해결하려 했는지를 살펴보면서 RxJS에 녹아들어간 함수형 프로그래밍과 리액티브 프로그래밍 패러다임을 이해한다. 더불어 서비스에서 사용할 수 있는 풍부한 예제를 점진적으로 개선하면서 RxJS의 개념을 설명한다. 마지막으로 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
출판사 서평
1부 RxJS 이해
1부에서는 웹 애플리케이션을 개발할 때 발생하는 문제를 RxJS가 어떻게 해결하려고 했는지에 대한 RxJS의 기술적 고민을 이야기한다. 이를 통해 RxJS가 추구하는 방향을 인지하고 RxJS를 효과적으로 사용하기 위한 배경 지식을 익힐 수 있다. 1부를 학습하면 RxJS가 추구하는 바를 명확히 알 수 있다. 2부와 3부를 모두 학습하고 다시 한번 1부를 읽어보길 권한다. 처음 읽었을 때보다 많은 것을 얻을 수 있다.2부 RxJS 사용하기
2부에서는 본격적으로 RxJS를 사용하는 방법을 이야기를 한다. RxJS의 개발 흐름에 대한 포괄적인 내용에서부터 RxJS가 다루는 6가지 개념들을 실제 예제를 만들면서 설명한다. 하나의 예제를 점진적으로 개선해 나가면서 RxJS 오퍼레이터를 언제, 어떻게, 왜 사용해야 하는지를 익힐 수 있다. 또한 RxJS 오퍼레이터를 어떻게 학습해야 하는지도 알 수 있다.3부 RxJS로 버스 노선 조회 서비스 만들기
3부에서는 1부와 2부에서 배웠던 내용을 토대로 간단한 버스 노선 조회 서비스를 만든다. RxJS를 이용하여 실제 서비스 구현을 위해서는 첫 번째로 사용자의 요구사항을 RxJS 관점에서 분석하는 작업이 필요하다. 이 장에서는 서비스 요구사항을 토대로 데이터 흐름을 파악하고 이를 RxJS로 구현하는 경험을 할 수 있다. 앞에서 배웠던 RxJS의 종합 예제인 “버스 노선 조회 서비스”를 통해 실제 서비스에서 사용되는 RxJS 사용법을 확인할 수 있다.■ 추천평
개념 있는 책이다. RxJS가 어떤 문제를 해결하고자 했고 RxJS는 그것을 어떻게 풀어갔는지 근본적인 부분부터 다룬다. 이 책은 RxJS에 대한 깊은 뿌리를 심어줄 수 있는 기본 개념서이다. 풍부한 예제는 열매를 맺을 수 있도록 도와줄 수 있는 좋은 자양분이 되어주리라 확신한다.
윤종문RxJS가 좋다는 말을 듣고 막상 사용하려고 하면, RxJS의 수많은 연산자와 기능을 언제 어떻게 써야 할지 난감할 따름이다. 이 책은 바로 이러한 문제를 해결해준다. 현업에서 사용할 만한 데모를 만들고 점진적으로 개선하면서 각 기능을 왜/어떻게/언제 써야 할지 쉽게 배울 수 있다.
김명진RxJS를 시작하면 만나게 되는 몇 가지 허들이 존재합니다. 대부분의 허들이 그 높이 보다는 생소하고 난해한 생김새로 RxJS의 시작을 방해하곤 합니다. 이 책을 통해 RxJS가 가진 다양한 형태의 허들을 넘어서는 방법과 해체하는 방법을 익히기 바랍니다.
송효종클라이언트 로직은 날이 갈수록 복잡해지면서 컴포넌트 간의 커뮤니케이션을 어떻게 하면 효율적으로 처리할 수 있을지를 고민하게 된다. 이때 RxJS는 좋은 도구다. RxJS와 관련한 다양한 책이 있지만, 현실적으로 RxJS를 어떻게 사용해야 하는지 고민한 책이다.만약, 당신이 RxJS를 사용하거나 계획이 있다면 이 책이 당신의 시간을 아껴줄 것으로 생각한다.
전용우■「코드스쿼드」윤지수님 추천사
프런트엔드 세상에 불쑥 들어와 버린 함수형 패러다임과 리액티브 프로그래밍은 몇몇 예제 코드만 보더라도, 마법 가루가 뿌려진 듯한 느낌이 든다. 파이프라인(pipeline)으로 연결된 다양한 함수들을 거쳐 동작하는 기능은 정말 신기할 따름이다. 이런 코드를 처음 마주치면 '함수형 프로그래밍인가?, 리액티브 개념이 섞인 건가?'라는 생각이 든다. 좀 더 자세히 들여다보면, 비동기 로직과 동기 로직이 절묘하게 섞여 들어가 있음을 발견한다. 웹 프런트엔드 개발의 난해함 중 하나인 비동기를 어떻게 동기적인 흐름과 섞어서 풀지?라는 답을 제시하고 있는 듯해서 많은 기대감으로 이어진다. 하지만 예제에서 제공하는 옵서버블(Observable)이나 파이프라인(pipeline)으로 이어진 추상화된 메서드들의 연결은 이전과 다른 구현 방식으로 선뜩 주저하게 되는 것도 사실이다. RxJS는 이미 꽤 유명해졌으며 그 장점과 사용법을 이해할 수 있는 예제도 많지만, 아직 의문점도 많다. '우리 서비스에 사용할 수 있는 것인가?, 어떻게 도입할 수 있지?, 성능에는 문제가 없을까?' 등은 의심으로 남아 있을 수 있다.
이 책은 그런 점에서 참 반가운 책이다.이 책은 RxJS를 실서비스에서 어떻게 사용하는지를 보여주는 풍부한 예제와 함께 설명한다. RxJS의 단점이 초기 학습 비용이라고 하는데, 이 책은 그 어느 RxJS 내용보다 일단 쉽다. 책의 중반을 넘어서 몇몇 예제를 보다 보면, 아 그렇구나라는 느낌을 계속 받게 된다. 더 나아가 '우리 서비스에도 RxJS를 도입해볼까?'라는 생각을 가질 것이 분명하다.
개인적인 생각으로 라이브러리나 프레임워크는 개발된 배경과 철학을 알고 시작하는 것이 중요하다. 이를 알고 시작하는 것은 개발 과정에서 어려움을 겪을 때 올바른 결정을 할 수 있는 힌트를 제시해주곤 한다. RxJS를 사용할 때도 마찬가지다.
RxJS는 도대체 어디서 출발한 것이고, 어떤 철학을 가진 것인지 아는 것이 개발 과정에서 중요하다. 그런 점이 없다면, 도대체 왜 내가 이런 것을 사용해야 하는 것인지? 이런 방식이 어떤 장점을 주고, 어떤 상황에 어울릴까? 하는 점을 의문점으로 남겨둔 채 그 철학과 다른 느낌으로 개발함으로써 서비스 코드에서 원래의 장점을 제대로 표현하지 못하게 된다.
이런 부분의 답을 이 책 앞부분에서 찾을 수 있다. 함수형, 리액티브, RxJS까지 이들이 어떻게 연관되어 있고 어떤 장점을 가지고 있는지를 실무적인 짧은 예제를 통해 이해를 얻을 수 있다. RxJS는 다양한 상황에서 데이터의 흐름을 제어하는 장점을 가지고 있다. 그렇다 보니 수많은 오퍼레이터(operator)를 제공해줌으로써 데이터의 흐름을 제어할 수 있게 해준다. 이 많은 오퍼레이터는 낯설고 너무 많아서 이해하기 어렵다. 물론 각자의 샘플 코드가 있으나, 컴포넌트나 웹 서비스 수준에서 이를 어떻게 활용해야 할지 완벽하게 느끼긴 쉽지 않다. 이 책에서는 절반 이상을 풍부한 예제와 실제 서비스 수준에서 쓸 수 있는 프로젝트 코드를 제시하며 오퍼레이터 사용에 대한 이해를 돕는다. 책을 넘겨 보는 만큼 다양한 오퍼레이터가 어느 순간에 어떻게 쓸 수 있는지 알게 된다.우리가 만들고 있는 웹 서비스는 어떤 복잡도를 안고 있는가를 생각해보자.
우리는 매일 todo list를 만드는 것이 아니다. 다양한 에러 상황에 대한 대처, 여러 가지 협력 관계에 있는 UI 컴포넌트 간의 통신, 성능을 고려한 복잡한 데이터 흐름제어, 비동기와 동기가 뒤섞인 데이터 흐름제어 등 실제 서비스에서는 고려할 부분이 무척 많다.
이 책의 뒷부분에서 풀고 있는 프로젝트는 많은 아이디어를 제공한다. 마치 우리가 서비스 수준에서 부딪치는 다양한 문제를 저자와 함께 풀어나가는 느낌을 받는다. RxJS를 손대보기로 한 이후에도, 이 책은 유용할 것이다. 개발 과정에서 어려움이 있다면 이 책을 다시금 들춰보며 기쁜 마음으로 해답을 찾아나갈 수 있을 것이다.
마지막으로 오랜 시간 동안 옆에서 지켜봤던 저자의 풍부하고 진한 개발 경험을 떠올리면, 이 책을 내 책상 위에 올려두는 것을 주저할 필요가 없다고 꼭 이야기해주고 싶다.■「블루웨일」박종욱님 추천사
나는 RxJS를 Angular2를 통해서 접하게 되었고 그때부터 복잡한 로직을 처리하기 위해 항상 사용하는 가장 중요한 라이브러리가 되었다. 처음에는 Promise 같은 비동기를 처리하기 위한 새로운 라이브러리구나 하고 사용을 했었는데 사용하면 할수록 그 강력함에 완전히 매료되었다. "RxJS를 한 번도 안 쓴 사람은 있어도 한 번만 쓴 사람은 없다."라는 말이 있다. 특히 비동기와 동기로 복잡하게 얽힌 코드에서 가장 깔끔하고 안전하게 문제를 해결해준다.
사실 RxJS는 단순 라이브러리가 아니라 새로운 프로그래밍 패러다임이다. 국내뿐만 아니라 외국에서도 러닝 커브가 가파른 라이브러리로 유명하다. 게다가 공식 페이지의 수많은 기능과 연산자를 보다 보면 어느새 창을 닫게 된다. 단순 라이브러리를 배우는 것 이상이 필요하다. 이런 RxJS를 제대로 학습할 수 있는 한글책이 나왔다. RxJS가 나온 배경, 핵심 철학, 여러 문제를 해결하면서 배우는 주요 오퍼레이터들, 이 책을 순서대로 읽다 보면 어느새 RxJS를 제대로 이해하게 된다. 개인적으로 2년 정도 RxJS를 사용했지만 이 책을 읽으면서 정말 많은 부분을 다시 배울 수 있게 되었다. 저자가 얼마나 많은 공부와 고민을 하고 책을 집필했는지 느꼈다. 다시 한번 좋은 책을 써주신 손찬욱 님께 감사하며 이 책을 통해서 더 많은 분이 RxJS를 영접하기 바란다.
상품 정보 고시
도서명 RxJS 퀵스타트
저자 손찬욱
출판사 루비페이퍼
ISBN 9791186710357 (1186710357)
쪽수 440
출간일 2018-07-24
사이즈 171 * 233 * 22 mm /1139g
목차 또는 책소개 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
상품 정보 고시
도서명 상품페이지 참고
저자 상품페이지 참고
출판사 상품페이지 참고
크기 상품페이지 참고
쪽수 상품페이지 참고
제품구성 상품페이지 참고
출간일 상품페이지 참고
목차 또는 책소개 상품페이지 참고
배송공지

사용후기

회원리뷰 총 0개

사용후기가 없습니다.

상품문의

등록된 상품문의

상품문의 총 0개

상품문의가 없습니다.

교환/반품

[반품/교환방법]
마이페이지> 주문배송조회 > 반품/교환신청 또는 고객센터 (070-4680-5689)로 문의 바랍니다.

[반품주소]
- 도로명 : (10882) 경기도 파주시 산남로 62-20 (산남동)
- 지번 : (10882) 경기도 파주시 산남동 305-21

[반품/교환가능 기간]
변심반품의 경우 수령 후 14일 이내, 상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내

[반품/교환비용]
단순 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담

[반품/교환 불가 사유]
- 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
(단지 확인을 위한 포장 훼손은 제외)
- 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
예) 화장품, 식품, 가전제품(악세서리 포함) 등
- 복제가 가능한 상품 등의 포장을 훼손한 경우
예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
- 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
- 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
- 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
- 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에 해당되는 경우
* (1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시
‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①양서-판매정가의 12%, ②일서-판매정가의 7%를 적용)

[상품 품절]
공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는 이메일과 문자로 안내드리겠습니다.

[소비자 피해보상, 환불지연에 따른 배상]
- 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은 소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됩니다.
- 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 처리함.

회원로그인

오늘 본 상품

  • RxJS 퀵스타트
    RxJS 퀵스타트
    25,200