프로그래밍/Angular60 [RxJS / angular] 16. combineLatest 옵저버블 결합하기 데이터 스트림(혹은 옵저버블)을 결합하는 기술에 대한 포스트를 이어가고 있습니다. 지난 포스트까지 combineLatest와 forkJoin 생성 함수 그리고 withLatestFrom 연산자를 알아보았습니다. 이론을 익혔으니 combineLatest를 이용하는 실습을 하겠습니다. 사용자 친화적인 표시를 위해 두 데이터 스트림을 결합하여 숫자 ID를 문자열로 매핑하여 표시하는 과정을 소개하겠습니다. 실습 목표 아래와 같이 상품 목록을 조회하는 화면이 있습니다. 현재 카테고리 정보는 카테고리 ID, 즉 숫자로 표시하고 있습니다. 이러한 숫자 코드는 유저 그 뜻을 알기 어렵습니다. 뜻을 쉽게 파악할 수 있도록 ID에 해당하는 카테고리 이름으로 변경하고 싶습니다. 한편 데이터는 상품정보(카테고리 ID가 포함).. 2022. 7. 25. [RxJS / angular] 15. forkJoin과 withLatestFrom 데이터 스트림을 결합하는 방법에 대해 알아보고 있습니다. 지난 포스트에서는 combineLatest를 다뤘습니다. 이번 포스트에서는 http 통신에서 자주 사용되는 forkJoin 생성자에 대해 알아보고, 하나의 옵저버블의 변경에만 반응하는 withLatestFrom 파이프 연산자에 대해 알아보도록 하겠습니다. forkJoin 이란? forkJoin은 각 입력 옵저버블의 마지막 값을 사용해서 출력 옵저버블을 생성합니다. forkJoin의 핵심은 마지막 값이라는 점입니다. 위 예는 3개의 옵저버블에서 하나의 옵저버블을 생성하고 있습니다. forkJoin으로 생성한 옵저버블은 단 한번의 값을 방출합니다. 값을 방출할때는 입력 옵저버블이 모두 완료될때 입니다. 이때 방출된 값은 각 옵저버블의 마지막 값이 배열.. 2022. 7. 21. [RxJS / angular] 14. combineLatest 생성 함수 CombineLatest 생성 함수 란? combineLatest는 파이프 연산자가 아닌 정적 생성함수입니다. combineLatest는 각 입력 옵저버블의 마지막에 방출된 값을 사용하여 값을 방출하는 하나의 옵저버블을 생성합니다. 위 예 에서는 3개의 입력 옵저버블 a$, b$, c$ 배열로 받는 combineLatest 생성 함수를 사용해서 하나의 옵저버블로 만들고 있습니다. 각 입력 옵저버블이 방출될 때마다 각 옵저버블의 최신 값이 배열로 결합되어 하나의 출력 옵저버블로 방출됩니다. combineLatest 마블 다이어그램 입력 옵저버블 a$, b$, c$로 combineLatest를 사용해서 출력 옵저버블을 만들고 있습니다. 입력 옵저버블중 하나가 새 값을 방출할 때마다 출력 옵저버블에서 값이 방.. 2022. 7. 19. [RxJS / angular] 13. 옵저버블 데이터 스트림 결합, 결합 연산자 유형 여러 데이터를 반응적으로 사용하는 방법 중 하나는 다수의 옵저버블의 방출 항목을 결합해 하나의 방출 세트로 결합하는 것입니다. 이번 포스트에서는 옵저버블의 스트림을 결합하는 방법에 대해 알아보도록 하겠습니다. 스트림을 결합하는 이유 데이터 스트림을 결합을 통해 여러가지 편리한 작업을 할 수 있습니다. 첫 번째로 스트림 결합을 통해 연관 있는 두 데이터를 매핑해 줄 수 있습니다. 예를 들어 ID값을 특정 문자열과 매핑하려면 ID 정보가 있는 데이터 스트림과 특정 문자열 정보가 있는 데이터 스트림을 병합해서 ID에 해당하는 문자열을 매핑할 수 있습니다. 두 번째로 스트림을 결합해서 여러 데이터 소스를 통해 보다 유용하고 포괄적인 정보를 하나의 스트림으로 제공할 수 있습니다. 예를 들어 "제품" 데이터 스트림.. 2022. 7. 14. 이전 1 2 3 4 5 6 ··· 15 다음
