RxJS22 [RxJS / angular] 9. http 절차적 조회 패턴과 Async 파이프 사용하기 Angular에서는 이미 RxJS의 기술을 사용하고 있습니다. RxJS는 관찰이 가능한 Observable 시퀀스를 사용해서 데이터와 이벤트를 관찰하고 반응(처리)해주는 라이브러리 입니다. 그리고 앵귤러에서 처음 Observable을 접하는 곳은 아마도 http 통신일 것입니다. 이번 포스트는 옵저버블을 사용해서 절차적으로 http 통신을 통해 데이터를 조회하는 순서를 따라가보고, 이것을 다시 async 파이프를 사용을 시작으로 코드를 점점 리액티브 하게 개선해보도록 하겠습니다. http 통신 절차적 데이터 조회 패턴 여기 아래에 상품목록을 http 통신을 통해 데이터를 가져와 테이블로 표시하는 상품 목록 화면이 있습니다. 아래의 화면을 만든다는 이미지를 머릿속에 넣으시고 코드를 따라와 주세요. 1. 데.. 2022. 7. 6. [RxJS / angular] 8. take 연산자 rxjs의 연산자에 대해서 알아보고 있습니다. map, tap에 이어 자주 쓰는 연산자인 take에 대해 알아보겠습니다. take 연산자란? 테이크 연산자는 지정된 개수의 항목만을 방출해주는 연산자입니다. take(2)라고 pipe에 사용하면 최대 두 개의 아이템을 방출하게 됩니다. 그리고 지정된 개수의 항목이 방출되면 take는 자동으로 완료됩니다. 따라서 무제한 방출하는 옵저버블을 제한할 때 take는 좋은 해결책이 됩니다. 위 예에서는 take 연산자를 사용하여 처음 두 항목인 1과 2가 배출되고 3은 생략됩니다. 아래 두 번째 예는 어떨까요?? 콘솔에 어떤값이 출력될지 예상이 가시나요? 아래가 콘솔 출력 화면입니다. 예상한 대로 출력이 되었나요? 처음 소스 옵저버블 of(1,2,3) 에서 1이 방.. 2022. 7. 5. [RxJS / angular] 7. tap 연산자, 디버그에 사용하기 RxJS의 작업을 수행하다가 원치 않은 결과를 얻은 적이 있을 때 어떻게 디버그해야 할까요? rxjs의 디버그를 할 때는 tap을 적극 사용해보세요. tap 연산자란? 탭 연산자의 목적은 방출된 항목에 영향을 주지 않는 작업을 수행하는 것입니다. 아래 예에서는 방출한 각 항목을 수정하지 않고 콘솔에 기록합니다. 이 tap 연산자로 들어오는 각 항목에 대해 동일한 항목을 옵저버블로 배출합니다. 따라서 tap을 사용하여 디버깅을 수행하거나 데이터 흐름 밖에서 작업을 수행할 수 있습니다. 이러한 작업은 사이드 이펙트(side effect) 일으키기도 하는데요. 여기서 사이드 이펙트는 무엇을 의미할까요? 함수는 반환 값에 영향을 미치지 않는 상태를 변경할 경우 사이 이펙트를 수행한다고 합니다. 예를 들어 탭을 .. 2022. 7. 3. [RxJS / angular] 6. map 연산자, 마블 다이어그램 읽는 법 RxJS에서 가장 일반적으로 많이 사용되는 연산자 중 하나임 map연산자에 대해 알아보고, 마블 다이어그램을 어떻게 읽어야 하는지 알아보도록 하겠습니다. map 연산자란? map 연산자는 옵저버블에 의해 방출된 항목을 제공하는 함수에 정의된 대로 값을 변환하거나 변경합니다. 아래 예를 살펴보겠습니다. map을 사용해서 방출된 각 항목의 두배로 한 값을 매핑해 줍니다. map은 방출된 항목의 수를 변경할 수 없습니다. map연산자로 방출된 항목에 대해 정확히 하나의 매핑된 항목이 방출됩니다. 예를 들어 10개의 방출되는 항목이 있다면 map을 사용하여 방출된 각 항목을 변경한 후 각각의 항목이 10번 방출됩니다. 위에 of를 사용하여 옵저버블을 만들었습니다. 이 옵저버블은 1, 2, 3이라는 숫자가 차례로.. 2022. 7. 1. 이전 1 2 3 4 5 6 다음
