hsunny study blog

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)), /..

서버의 통신을 받고 Component에 데이터를 뿌려 화면의 초기화를 진행합니다. 초기 셋팅이 완료된 화면에서 사용자의 액션에 따라 데이터의 값과 화면의 UI가 변경되어야 하는 경우(동기화)가 있습니다. 변경에 따른 이벤트를 단순히 EventEmmiter 를 이용한 Output 과 Input 만으로 Parent와 Child Component 간의 데이터 처리를 하는데에는 한계가 있었습니다. angular change detection 를 구글링 하면 여러 해결 방법들이 나옵니다. ngZone , onChange() life cycle, DoCheck() life cycle, ChangeDetectionStrategy 등이 Change Detection 방법입니다. 찾아보면서 학습한 내용을 공유합니다. :..

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 응답에 따라 처리를 다르게 주는 것이 괜찮을 것 같다! 첫 번째 개선 개선한 것 - 서버에 보낼 최종 데이터를 세팅하는 부분..