옵저버블, 구독 , 연산자, 서브젝트, 스케줄러

옵저버블: 객체
옵저버블 라이프 사이클 : 생성, 구독, 실행, 구독해제

옵저버블은 멀티캐스티잉 안됨. -> 뒤늦게 구독해도 클릭이벤트가 발생하면 같은 내용을 전달 받아야 하는데 그렇지 않다. -> 서브젝트를 이용

옵저버블과 옵저버
옵저버블에 subscribe가 호출되야 옴버저버블과 observer가 연결해 실행됌.
실행된 결과는 옵저버블의 next가 실행되면서 확인할 수 있다.

옵저버의 complete나 error함수를 호출할때까지 next함수로 값을 발행해요.

const { Observable } = require('rxjs');
const observableCreated$ = Observable.create(function(observer) {
    console.log('BEGIN Observable');
    observer.next(1);
    observer.next(2);
    observer.complete();
    observer.next(3);
    console.log('END Observable');
});

observableCreated$.subscribe(
    function next(item) {console.log(item);},
    function error(e) {},
    function complete() { console.log('complete');}
);

옵저버는 next, error, complete 함수로 구성된 객체에요.

서브젝트:

---

Operator

pipe : <옵저버블 인스턴스>.pipe(연산자1(), 연산자2(), ...)
연산자를 연결해서 호출할 수 있음. 각 연산자를 거치며 새로운 옵저버블 인스턴스 리턴함.

filter

옵저버블 생성함수

toArray(): 일련의 값들을 배열로 쌓아서 리턴해주는 함수.
9
18
로 나와야하는데
[9,18]로 리턴 할 수 있게 됌.

map 연산자도 새로운 옵저버블 객체를 리턴함. subscribe() 호출되야 값을 받을 수 있음.

const { Observable } = require('rxjs');
const { map, toArray } = require('rxjs/operators');
const observableCreated$ = Observable.create(function(observer) {
    console.log('Observable BEGIN');
    const arr = [1, 2];
    for (let i = 0; i < arr.length; i++) {
       console.log(`current array: arr[${i}]`);
       observer.next(arr[i]);
    }
    console.log('BEFORE complete');
    observer.complete();
    console.log('Observable END');
});

function logAndGet(original, value) {
    console.log(`original: ${original}, map value: ${value}`);
    return value;
}

observableCreated$.pipe(
    map(function(value) {
        return logAndGet(value, value * 2);
    }),
    map(function(value) {
        return logAndGet(value, value + 1);
    }),
    map(function(value) {
        return logAndGet(value, value * 3);
    }),
    toArray()
).subscribe(function(arr) {
    console.log('arr', arr);
});

3.2 of
나열된 인자를 순차로 next하는 옵저버블을 반환해줌
of( values: ...T, scheduler: Scheduler) Observable<T>

of( 10,20,30)
.subscribe({
next: console.log,
error: console.error,
complete: () => console.log('완료')
});

3.5. range
범위 내 수의 값들을 전달하는 Observable 만들 때 사용

3.3.2. fromEvent
브라우저에서 발생하는 Event를 Observable로 만들 때 사용한다.

3.3.1 from
배열, 옵저버블, 프로미스, 이터러블, 문자열, 배열 유사타입을 감싸서 옵저버블로 리턴해줌.

1.4.1 empty
empty는 Observable 완료 상태를 전달하는 Observable을 생성한다.

Observable은 읽기전용이기 때문에 자신의 상태를 바꾸지 못
한다. 하지만 Observable이 완료되었다는 것을 사용자에게 알려줄 수 있음. 이때 empty를 사용함.

3.7.3 throwError
throwError을 통해 에러가 발생했다는 것을 전달하고, 구독을 해지한다.

1.4.3 never
아무것도 하지 않는 Observable을 생성

3.6.1 interval
실행 시간 사이의 간격을 주고 특정시간마다 값을 발행하는 옵저버블

3.6.2 timer
특정시간 이후 값을 발행후 두 번째 인자가 있으면 반복해서 발행함.

변환연산자

map
switchMap:
바보라서 그런지 책을봐도 switchMap 왜 쓰는지 모르겟음.
그나마 쓰임새를 비교하자면
angular http 요청보낼때 httpClient를 쓰거든요. 응답을 Observable로 감싸요.
그래서 get이나 post 요청시 받은 응답을 map으로 까서 가공할 수 있고,

swithMap의 경우는 이벤트 바인딩때 기존 obervable을 끊고 새 요청이 들어올때마다 새로 observable 만드는 것?
https://dev.to/akashvarma9/rxjs-switchmap-operator-4bc7

스케줄러

단일 스레드 자바스크립트에서는 비동기 방식으로 setTimeout, setInterval 또는 마이크로 큐를 이용해 실행하는 asapScheduler, asyncScheduler가 있음.