프로그래밍124 [RxJS / angular] 10. 옵저버블 에러 처리 (catchError, throwError, EMPTY) 옵저버블 에러 처리 옵저버블도 다른 코드들과 마찬가지로 에러가 발생할 수 있는 여러 시나리오가 있습니다. 예를 들어 Http 리퀘스트를 하기위해 옵저버블을 사용하게 되고 리퀘스트가 실패하고 에러가 발생할 수 있습니다. 따라서 옵저버블 에러가 프로그램에 영향을 미치지 않게 하기 위해서 에러를 처리하는 게 매우 중요합니다. 에러가 발생하면 옵저버블이 중지된다는 것을 잘 염두해야 합니다. 즉 옵저버블에 에러가 발생하면 더 이상 항목은 방출되지 않고 사용할 수 없습니다. 옵저버블에 에러를 처리하기 위해서 일반적으로 세 단계로 분류해서 생각해 볼 수 있습니다. 옵저버블 에러를 처리하는 세 단계 1. 에러 Catch 하기 먼저 에러를 잡아냅니다. 발생한 에러를 catch 함으로 프로그램 내에서 처리되지 않은 에러가.. 2022. 7. 8. [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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 31 다음
