Programming paradigm/🦈 RxJS 검색 결과

해당 글 9건

[RxJS] Scheduler (with microtask queue, task queue)

일반적으로 자바스크립트는 다음 순서로 코드를 실행한다. call stack => microtask queue => task queue 콜백함수를 태스크 큐에 넣는 함수들 : setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링 콜백함수를 마이크로태스크 큐에 넣는 함수들 : process.nextTick, Promise, Object.observe, MutationObserver. 이 순서를 잘 생각해보면 마이크로태스크 큐에 너무 많은 것을 집어 넣는다면, UI 렌더링이 그만큼 늦어지게 된다는 것을 추측할 수 있습니다. 한편, 위 내용에 근거하여 작성한 아래 코드의 출력 결과가 다음과 같다. 먼저, 콜스택을 처리한 후, 마이크로..
Programming paradigm/🦈 RxJS 2021. 5. 5. 06:31

[RxJS] RxJS Operator (5): Subject, Multicasting operator

Subject는 특수한 종류의 Observable이다. 뭐가 특별한가? 값을 여러 Observer에게 멀티캐스팅해줄 수 있는 류의 옵저버블이다. 쉽게 말해서 여러 값의 옵저버를 달 수 있다는 거다. subject : darrengwon.tistory.com/1369?category=905593 [RxJS] Subject : BehaviorSubject, ReplaySubject, AsyncSubject rxjs-dev.firebaseapp.com/guide/subject Subject는 특수한 종류의 Observable이다. 뭐가 특별한가? 값을 여러 Observer에게 멀티캐스팅해줄 수 있는 류의 옵저버블이다. 아래는 가장 간단하게 subject를 생성해.. darrengwon.tistory.com m..
Programming paradigm/🦈 RxJS 2021. 5. 4. 00:19

[RxJS] RxJS Operator (4): Join Creation, Join

join operators는 스트림과 스트림을 합치는(join) 역할을 합니다. Join Creation Operators : obsv를 반환합니다. creation operator인데 조금 더 기능 붙었다 생각 ㅇㅇ concat 단순히 스트림을 합치는 역할입니다. const numbers$ = of(1, 2, 3); const numbers2$ = of(4, 5, 6); concat(numbers$, numbers2$).subscribe(console.log); const timer1 = interval(1000).pipe(take(3)); const timer2 = interval(2000).pipe(take(4)); const timer3 = interval(500).pipe(take(5)); co..
Programming paradigm/🦈 RxJS 2021. 5. 3. 21:48

[RxJS] RxJS Operator (3) : Filtering Operators (throttle, debounce, sample, audit)

1) 기초적인 필터링 filter of(1, 2, 3, 4) .pipe(filter((v) => v > 2)) .subscribe(console.log); // 3, 4만 출력 first, last first는 take(1)과 사실상 기능이 같습니다. of(1, 2, 3, 4).pipe(first()).subscribe(console.log); // 1만 출력 of(1, 2, 3, 4).pipe(last()).subscribe(console.log); // 4만 출력 2) distinct, distinctUntilChanged, distinctUntilKeyChanged distinctUntilChanged가 매우 자주 사용되는 편입니다. 의미 그대로, 값이 동일하면 무시하고, 값이 달라야만 처리합니다...
Programming paradigm/🦈 RxJS 2021. 5. 3. 19:42

[RxJS] RxJS Operator (2) : Transformation Operators : merge/switch/concat/exhaust

1) 기본적인 map, mapTo xxxMap이 붙은 녀석들은 observable을 flatten하게 만들어주는 역할을 합니다. mergeMap 부분에서 자세하게 설명해놓았습니다. map 이건 뭐 배열 사용할 때 많이 사용해보셨죠? 그겁니다. interval(1000) .pipe(take(5)) .pipe(map(v => v + 100)) .subscribe({ next: v => console.log(v), complete: () => console.log('done'), }); pluck을 map으로 대체해보자 Use map and optional chaining: pluck('foo', 'bar') is map(x => x?.foo?.bar). Will be removed in v8. - https..
Programming paradigm/🦈 RxJS 2021. 5. 3. 19:41

[RxJS] RxJS Operator (1) : Creation, Utility, Error Handling

cautions! 1. 관례상 stream 변수의 뒤에 $를 붙이곤 합니다. 이 포스트에서는 뗐다가 썼다가 혼용되어 있습니다. const inputObservable$ = fromEvent(inputDom, 'keyup'); 2. 공식문서의 그림(이런 녀석들을 "마블 다이어그램"이라고 부릅니다)을 이해할 수 있어야 합니다! 정보의 흐름을 아는데 그림이 정말 중요합니다. 3. 그 외의 지식들 - 기본적으로 Observable은 cold 합니다. 즉, subscription이 되지 않으면 등록되지 않습니다. - Observable은 immutable합니다. operator를 거친다고해서 변형되지 않습니다. 무엇보다, 공식 문서 보는게 제일 좋습니다. 거기에 타입이랑 인자 다 써 있어요. 그러니까 이 포스트는..
Programming paradigm/🦈 RxJS 2021. 5. 3. 19:40

[RxJS] Subject : BehaviorSubject, ReplaySubject, AsyncSubject

rxjs-dev.firebaseapp.com/guide/subject Subject는 특수한 종류의 Observable이자 Observer이다. 뭐가 특별한가? 값을 여러 Observer에게 멀티캐스팅해줄 수 있는 류의 옵저버블이다. 아래는 가장 간단하게 subject를 생성해본 것이다. const subject$ = new Subject(); const obs = { next: (x) => console.log(x), error: () => console.log(error), complete: () => console.log("done"), }; const subOne = subject$.subscribe(obs); subject$.next(1); const subTwo = subject$.subscr..
Programming paradigm/🦈 RxJS 2021. 5. 1. 17:28

[RxJS] push & pull : Producer와 Cosumer의 통신

Pull과 Push Observable 문서를 보면 옵저버블을 push collection으로 소개하고 있습니다. Observables are lazy Push collections of multiple values. They fill the missing spot in the following table: - 출처 : rxjs-dev.firebaseapp.com/guide/observable 도대체 pull이 뭐고, push가 뭔지. 당기는 문인지, 미는 문인지. ㅋㅋ 농담이고 pull과 push는 Producer와 Consumer가 어떻게 통신하는지에 대한 방법론입니다. 대전제 : data Producer가 Consumer에게 정보를 줍니다. 문제 : 컨슈머가 요청해서 받을 것인가(pull), 프로듀..
Programming paradigm/🦈 RxJS 2021. 4. 29. 04:07

[RxJS] RxJS를 위한 지식들 : EventEmitter, Stream, 마블 다이어그램

https://rxjs-dev.firebaseapp.com/ java 9에 Reactive Stream이 추가되고 Spring 5에서도 사용되면서 Reactive한 프로그래밍이 주목을 받게 되었다. rxjs가 담당하는 영역 : 비동기 처리, 데이터 전파, 데이터 처리, 그리고 이를 아우르는 "상태 자동 전파" * rxjs의 본질은 함수형 프로그래밍이 아니다. 관련은 있긴 하지만... * Rx는 FRP 구현체가 아니다. 명확한 정의보다는 현실의 문제를 Rx로 해결하는데에 집중해보도록하자. * 굳이 비동기 처리를 Rx로 할 이유는 없다. js는 generator, promise, async/await 등 처리 방법을 이미 만들어 두었다. rxjs는 일관된 방식으로 안전하게 데이터 흐름을 처리하는 라이브러리이..
Programming paradigm/🦈 RxJS 2021. 4. 29. 01:18