개요 흔히 rx.js를 사용할 때, Promise를 unwrap 할 때, mergeMap 또는 switchMap을 사용한다. 이 때 둘의 차이를 알아보자. mergeMap vs switchMap 우선 가이드 문서를 읽어보자. 우선 mergeMap의 설명은 아래와 같다. Projects each source value to an Observable which is merged in the output Observable.그리고 switchMap은 아래와 같다. Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected..

개요 Hot 생성자의 경우에는 하나의 생성자에서 여러개의 구독자가 붙을 수 있다. ( anycast ) Cold의 경우 생성자는 구독할 때마다 각각의 타임라인에서 생성된다. ( unicast ) Hot의 경우 구독을 하더라도, 처리가 이루어지지 않을 수 있다. 기본적으로 Observable은 Cold이다. 따라서 Hot으로 변경하기 위해서는 Connectable Observable/Flowable로의 변환이 필요하다. (아니면 쉽게 subject를 통해 구현이 가능하다.) Cold Observable vs Hot Observable 비교 Hot Cold 데이터 배출 구독하지 않아도 계속 배출 구독하지 않으면 배출하지 않음 example 마우스 이벤트, 키보드 이벤트, 시스템 이벤트 웹 요청, 데이터 베이..

개요 from 과 of의 차이를 알아보자. from 먼저 공식 문서를 보면 다음과 같다. Creates an Observable from an Array, an array-like object, a Promise, an iterable object, or an Observable-like object. array 또는 array-like object를 observable로 전환해준다. from([1,2,3]) .forEach(item => console.log(`case 1: ${item}`)); // case 1: 1, case 1: 2, case 1: 3 Promise또는 observable like object를 변환해준다. function promisify(item: T): Promise { re..

개요 stream으로 값을 불러오는 경우 여러개의 값을 bulk로 처리하고 싶을 때가 있다. 이 때 bufferCount를 통해서 여러값을 처리하도록 만들어 보자. 예제 test generator를 생성한다. const sleep = async function (ms: number): Promise { return new Promise(resolve => { setTimeout(resolve, ms); }); } const doBackground = async (count: number, subscriber: Subscriber) => { for (let i = 0; i < count; i++) { if (count % 4 == 0) { await sleep(10); }; subscriber.next(i..

개요 여러 async 함수를 동시에 수행해서 결과를 만들고 싶을 때, Promise.all()을 사용한다. 이 때 Promise.all에서 많은 함수가 동시에 call이 되는 것을 막고 싶을 때가 있다. 이를 편리하게 구현할 수 있게 RxJS에서는 mergeMap을 제공한다. 예제 준비코드 아래와 같이 일정 시간 delay후 종료되는 task함수를 만들자. const sleep = async function (ms: number): Promise { return new Promise(resolve => { setTimeout(resolve, ms); }); } const task = async function (id: string): Promise { console.log(id, new Date()); ..

개요 미뤄왔던 Reactive stream 관련을 공부해두려고 한다. 현재 node 기반으로 진행 중이니, RXJS를 통해서 한 번 익혀보도록 하자. 무작정 읽기만 하다간 진도가 안나갈 것 같아서 operator별로 살펴보고, 실습을 먼저 해보는 형태로 진행하려고 한다. 환경 우선 내가 설정한 개발 환경은 다음과 같다. Dependencies // package.json 일부 "dependencies": { "rxjs": "6.6.3" }, "devDependencies": { "@types/jest": "26.0.20", "@types/node": "14.14.31", "jest": "26.6.3", "ts-jest": "26.5.2", "ts-node": "9.1.1", "typescript": "4..