프로그래밍124 [RxJS / angular] 22. concatMap 이해하기 (옵저버블 매핑 + concat ) 옵저버블은 또다시 옵저버블을 방출할 수 있습니다. 옵저버블을 방출하는 옵저버블을 다룰 때는 고차 매핑 연산자를 사용하는 것이 좋습니다. 고차 매핑 연산자에 대해 더 알고 싶은 분은 지난 포스트를 참고해 주세요. 이번 포스트에서는 고차 매핑 연산자인 catcatMap에 대해 자세히 알아보도록 하겠습니다. concatMap 이란? concatMap은 고차 매핑과 concat(연결)작업을 동시에 한다고 생각하면 이해하기 편합니다. 여기서 말하는 고차 매핑은 옵저버블에서 방출된 옵저버블을 구독해서 처리하는 과정이라고 생각해주세요. concatMap 연산자는 방출된 각 항목을 우리가 제공하는 함수에 정의된 대로 새로운 내부 옵저버블 항목으로 변환합니다. 외부 옵저버블에서 방출된 각 항목을 각각 내부에 정의된 처리.. 2022. 8. 12. [RxJS / angular] 21. 고차 옵저버블과 고차 매핑 연산자 이번 포스트부터 고차 옵저버블과 switchMap과 같은 고차 매핑 연산자에 대해 알아보게 됩니다. 옵저버블을 방출하는 옵저버블이 존재하는 걸까요? 고차 옵저버블(higher-order Observable)이란? 옵저버블을 방출하는 옵저버블? 우리에게 익숙한 옵저버블은 숫자나 문자열과 같은 기본 요소를 방출합니다. 위 예에서는 옵저버블이 2, 3, 4 숫자를 방출하고 있습니다. 하지만 옵저버블이 다시 옵저버블을 방출할 수 있습니다. 위 예제는 옵저버블을 방출하게 됩니다. of에서 생성된 옵저버블로 방출되는 숫자는 map 연산자에서 http get에 매핑됩니다. 따라서 소스 옵저버블에서 방출된 각 항목은 옵저버블을 출력 옵저버블로 방출합니다. 이렇게 옵저버블을 내보내는 옵저버블을 고차 옵저버블(higher.. 2022. 8. 9. [RxJS / angular] 20. Observable 사용해 에러 메시지 표시하기(OnPush 전략 시 화면 갱신하기) http 통신에서 에러가 났을 때 화면에 에러 메시지를 표시하는 흐름은 흔히 볼 수 있는 화면 구성입니다. 하지만 만약 Angular의 OnPush Change Detection Strategy를 사용한다면 원하는 대로 화면 갱신이 이뤄지지 않을 수도 있습니다. 이번 포스트는 OnPush 전략 시 Observable을 사용해서 화며 갱신이 이루어지고 에러 메시지를 표시하는 과정을 소개하겠습니다. 1. 문제점 : OnPush 사용시 프로퍼티 값이 바뀌어도 화면이 갱신이 되지 않음 우선 문제되는 컴포넌트의 코드를 살펴보겠습니다. 컴포넌트에서 Angular의 OnPush 변경 감지를 사용하고 있습니다. OnPush 변경 감지 전략은 input 프로퍼티, 이벤트, async 파이프를 사용하는 옵저버블 의 변경 .. 2022. 8. 4. [RxJS / angular] 19. Subject 액션 스트림으로 데이터 필터링 하기 이번 포스트에서는 액션 스트림을 사용해서 유저 인터렉션을 어떻게 처리하는지 살펴보게 됩니다. 액션 스트림과 데이터 스트림을 결합해서 데이터를 필터링하고 화면에 표시하겠습니다. select를 선택할 때 데이터를 방출하는 액션 스트림을 Subject로 만들어보고 그때 발생할 수 있는 초기값 문제점을 해결해 보도록 하겠습니다. rxjs를 이용해서 유저 액션을 처리하는 순서 먼저 유저 액션에 반응하기 위해 먼저 액션 스트림을 생성합니다. 액션 스트림을 만드는 방법 중 한가지는 Subject 또는 BehaviorSubject를 사용하는 것입니다. 그런 다음 액션 스트림을 데이터 스트림과 결합 합니다. 스트림의 결합은 combineLatest나 forkJoin과 같은 rxjs에서 제공해주는 생성 함수 혹은 연산자를.. 2022. 8. 2. 이전 1 2 3 4 5 6 7 ··· 31 다음
