본문 바로가기

전체 글143

[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.
[RxJS / angular] 12. http response 매핑하기(포멧 바꾸기) 서버에서 받은 데이터가 우리 화면에 적합한 데이터 포맷이 아닌 경우가 많이 있습니다. 이번 포스트에서는 서버에서 반환되는 데이터를 프론트엔드에서 사용되는 포맷을 바꾸어 매핑하는 기술을 살펴보도록 하겠습니다. 데이터 매핑 작업의 필요성 백엔드 서버에서 반환된 데이터를 매핑하는 이유는 여러가지가 있습니다. 예를 들어 상품의 가격에 이벤트로 값을 10% 인하하거나 인상할 수도 있습니다. 또는 바인딩을 쉽게 하기 위해서 'Y'값을 true로 'N'값을 false로 변경할 수도 있습니다. 그리고 필드 이름을 변경하기 위해 매핑을 해야 하는 상황도 있습니다. map 연산자 매핑작업에는 map연산자를 사용하게 됩니다. 이전 포스트에서 map연산자를 사용해서 옵저버블에서 방출된 각 항목을 변환하는 방법에 대해 알아보았.. 2022. 7. 13.