본문 바로가기

반응형

프론트엔드/JavaScript

(5)
RxJS - 연산자 4 유용한 연산자들 sequenceEqual Operator 타이밍에 관계없이, 두 스트림 발행물들의 순서와 값 동일 여부 반환 두 스트림이 끝나는 시점이 달라도 같은 값을 같은 순서로 발행하면 true 를 발행한다. const { from, fromEvent } = rxjs const { sequenceEqual, mergeMap, map, take } = rxjs.operators const num$ = from([3, 1, 4, 7, 5, 8, 2]) const key$ = fromEvent(document, 'keyup').pipe( map(e => Number(e.code.replace('Digit', ''))), take(7), sequenceEqual(num$) ).subscribe(consol..
RxJS - 연산자 3 스트림을 결합하는 연산자들 스트림 결합 연산자 merge : 두 스트림을 순서관계없이 병합 const { merge, interval, fromEvent } = rxjs const { map } = rxjs.operators const interval$ = interval(1000).pipe(map(_ => 'interval')) const click$ = fromEvent(document, 'click').pipe(map(_ => 'click')) merge(interval$, click$).subscribe(console.log) const { merge, interval } = rxjs const { map, take } = rxjs.operators const intv1$ = interval(10..
RxJS - 연산자 2 시간을 다루는 연산자들 시간을 다루는 연산자 1 delay : 주어진 시간만큼 지연 발행 const { interval, fromEvent } = rxjs const { delay, tap, take } = rxjs.operators interval(1000).pipe( take(5), tap(x => console.log(x + ' 발행시작')), delay(1500) ).subscribe(x => console.log(x + ' 발행완료')) 1.5초씩 지연됐다가 차례대로 발행이 완료된다. timestamp : 타임스탬프 const { fromEvent } = rxjs const { timestamp, pluck, map } = rxjs.operators fromEvent(document, 'clic..
RxJS - 연산자 1 산수 관련 Operator count, max, min, reduce const { of } = rxjs const { count, max, min, reduce } = rxjs.operators const obs$ = of(4, 2, 6, 10, 8) obs$.pipe(count()).subscribe(x => console.log('count: ' + x)) // 총 몇개가 있는지 갯수를 발행 obs$.pipe(max()).subscribe(x => console.log('max: ' + x)) // 가장 큰 값을 발행 obs$.pipe(min()).subscribe(x => console.log('min: ' + x)) // 가장 작은 값을 발행 obs$.pipe( reduce((acc, x) =>..
RxJS 기초 개념 공부 Reactive X 반응형 프로그래밍 함수형 프로그래밍은 선언형 프로그래밍의 성질을 가진다. 반응형 프로그래밍은 함수형 프로그래밍의 골격을 갖추고 있다. Reactive X는 크게 3 요소로 구성된다. Observable 일련의 값들을 발행한다. 관찰될 수 있는 것, 관찰되는 대상이란 의미이다. Stream은 Observable이 발행하는 연속된 값들의 흐름이다. pipe라는 배관을 타고 흐른다. Operators 연산자 순수함수들 Observer 관찰자 파이프만 쳐다보며 값을 기다리다가 나온 결과로 최종 작업을 실행한다. 반응형 프로그래밍에서 중요한것은 소프트웨어에서 구현하고자 하는 것을 이 스트림 즉, 흐름들로 재해석할 수 있어야 한다. 흐름들을 Observable로 발행하고 나온 데..

반응형