hsunny study blog

RxJS 7으로 가면서, toPromise() 메소드에 변경점이 생기고, 대체 메소드들이 나왔다. 어떻게 변했는지 살펴보자. 일단 toPromise() 메소드는 Observable을 Promise와 같이 동작하도록 해주는 RxJS Operator다. Observable Promise 공통점 비동기를 처리하는 방식으로, 시간이 지남에 따라 값을 방출한다. 차이점 값을 생성하지 않거나, 하나 이상의 값을 방출할 수 있다. resolve될 때, 그때의 값만 한번 방출할 수 있다. Observable이 값을 방출하지 않는 사실을 반영하기 위해, RxJS 7에서는 toPromise() 메소드의 반환 형태를 Promise에서 Promise로 변경했다. RxJS 6 toPromise(): Promise → RxJS ..

rxjs 6.5버전 부터 forkJoin으로 넘기는 인자의 형태가 달라졌다. 이전 사용방식 ( new Promise(resolve => setTimeout(() => resolve(`Promise Resolved: ${val}`), 5000) ); const example = forkJoin( // 'Hello' 즉시 출력 sourceOne: of('Hello'), // 1초 후에 'World' 출력 sourceTwo: of('World').pipe(delay(1000)), /..

fromEvent 이벤트 타겟으로부터 오는 특정한 타입의 이벤트를 방출하는 옵저버블을 만듭니다. 튜토리얼 바로가기 fromEvent(target: FromEventTarget, eventName: string, options?: EventListenerOptions | ((...args: any[]) => T), resultSelector?: ((...args: any[]) => T)): Observable example fromEvent(target: FromEventTarget, eventName: string): Observable 1 2 const clicks = fromEvent(document, 'click'); clicks.subscribe(x => console.log(x)); fromEv..

pluck 각 객체에 지정된 중첩 속성에 매핑합니다. (말이 어려우니 예제로 보면) pluck(...properties: string[]): OperatorFunction 가족 정보를 출력하는 family Observable이 있습니다. 이 중에서 role에 해당하는 값만 뽑아서 반환하고 싶다면, pluck를 이용해서 아래와 같이 코드를 짤 수 있습니다. return result = family$.pipe( pluck('role') ); result를 구독(subscribe)해야 원하는 값을 받을 수 있습니다. result.subscribe(val => console.log(`역할: ${val}`)); 이렇게 하면 val로 'role'에 해당하는 값들이 걸러져서 출력됩니다. 역할: 엄마 역할: 아빠 역할..

개발 중인 IONIC 앱에서는 Angular에서 제공하는 HttpClientModule을 이용하여 서버와 통신하고 있습니다. HttpClientModule은 Angular 4.3.0 버전에 추가되었습니다. Angular에서 제공하는 HTTP 모듈은 RxJS Observable 객체를 기반으로 만들어졌습니다. RxJS이지만 RxJS의 장점들을 이용하지 못하고 단순히 결과를 받는 데에만 이용하고 있었습니다. 이 부분에 대해 어떻게 개선해나갔는지 내용을 공유합니다. 기존 이런 생각을 시작으로 코드를 개선해나갔습니다. - 통신에 실패하는 이유를 timeout으로만 두어도 될까 - http 응답에 따라 처리를 다르게 주는 것이 괜찮을 것 같다! 첫 번째 개선 개선한 것 - 서버에 보낼 최종 데이터를 세팅하는 부분..