프로그래밍/Angular60 [RxJS / angular] 12. http response 매핑하기(포멧 바꾸기) 서버에서 받은 데이터가 우리 화면에 적합한 데이터 포맷이 아닌 경우가 많이 있습니다. 이번 포스트에서는 서버에서 반환되는 데이터를 프론트엔드에서 사용되는 포맷을 바꾸어 매핑하는 기술을 살펴보도록 하겠습니다. 데이터 매핑 작업의 필요성 백엔드 서버에서 반환된 데이터를 매핑하는 이유는 여러가지가 있습니다. 예를 들어 상품의 가격에 이벤트로 값을 10% 인하하거나 인상할 수도 있습니다. 또는 바인딩을 쉽게 하기 위해서 'Y'값을 true로 'N'값을 false로 변경할 수도 있습니다. 그리고 필드 이름을 변경하기 위해 매핑을 해야 하는 상황도 있습니다. map 연산자 매핑작업에는 map연산자를 사용하게 됩니다. 이전 포스트에서 map연산자를 사용해서 옵저버블에서 방출된 각 항목을 변환하는 방법에 대해 알아보았.. 2022. 7. 13. [RxJS / angular] 11. 옵저버블 에러 처리 전략 지난 포스트에서 옵저버블 에러를 처리하는 세 단계를 이야기했습니다. 이번 포스트에서 에러를 catch 하고 난 후에 어떤 처리를 할 수 있는지 에러 처리 전략에 대해 이야기해 보도록 하겠습니다. 옵저버블 에러 처리 전략 http request를 할 때는 에러가 발생할 수 있는 여러 상황이 있습니다. 예를 들어 url이 잘못됐거나, 권한이 없거나 연결 문제가 발생할 수 있습니다. 따라서 HTTP request를 발행할 때마다 에러 처리를 추가하는 것이 좋습니다. 지난 포스트에서 다뤘던 옵저버블 에러를 처리하기 위한 단계를 기억하시나요? 첫 번째로 에러를 catch합니다. 두 번째로 선택적으로 에러를 throw 합니다. 세 번째로 에러가 난 옵저버블을 새 옵저버블로 바꿔줍니다. 에러를 잡기 위해 파이프라인에.. 2022. 7. 12. [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. 이전 1 2 3 4 5 6 7 ··· 15 다음
