프로그래밍/Angular60 [RxJS / angular] 20. Observable 사용해 에러 메시지 표시하기(OnPush 전략 시 화면 갱신하기) http 통신에서 에러가 났을 때 화면에 에러 메시지를 표시하는 흐름은 흔히 볼 수 있는 화면 구성입니다. 하지만 만약 Angular의 OnPush Change Detection Strategy를 사용한다면 원하는 대로 화면 갱신이 이뤄지지 않을 수도 있습니다. 이번 포스트는 OnPush 전략 시 Observable을 사용해서 화며 갱신이 이루어지고 에러 메시지를 표시하는 과정을 소개하겠습니다. 1. 문제점 : OnPush 사용시 프로퍼티 값이 바뀌어도 화면이 갱신이 되지 않음 우선 문제되는 컴포넌트의 코드를 살펴보겠습니다. 컴포넌트에서 Angular의 OnPush 변경 감지를 사용하고 있습니다. OnPush 변경 감지 전략은 input 프로퍼티, 이벤트, async 파이프를 사용하는 옵저버블 의 변경 .. 2022. 8. 4. [RxJS / angular] 19. Subject 액션 스트림으로 데이터 필터링 하기 이번 포스트에서는 액션 스트림을 사용해서 유저 인터렉션을 어떻게 처리하는지 살펴보게 됩니다. 액션 스트림과 데이터 스트림을 결합해서 데이터를 필터링하고 화면에 표시하겠습니다. select를 선택할 때 데이터를 방출하는 액션 스트림을 Subject로 만들어보고 그때 발생할 수 있는 초기값 문제점을 해결해 보도록 하겠습니다. rxjs를 이용해서 유저 액션을 처리하는 순서 먼저 유저 액션에 반응하기 위해 먼저 액션 스트림을 생성합니다. 액션 스트림을 만드는 방법 중 한가지는 Subject 또는 BehaviorSubject를 사용하는 것입니다. 그런 다음 액션 스트림을 데이터 스트림과 결합 합니다. 스트림의 결합은 combineLatest나 forkJoin과 같은 rxjs에서 제공해주는 생성 함수 혹은 연산자를.. 2022. 8. 2. [RxJS / angular] 18. Subject와 BehaviorSubject 이번 포스트에서는 subject와 observable의 차이를 알아보며 멀티캐스트와 유니캐스트의 정의를 살펴보겠습니다. 마지막에는 subject의 단점을 보안할 수 있는 BehaviorSubject에 대해 알아봅니다. Subject 란 Subject는 옵저버블이자 옵저버인 특별한 유형의 옵저버블입니다. subject는 아래 코드에서 처럼 new 키워드를 사용해서 생성할 수 있습니다. 생성할 때 제네릭으로 subject가 방출하는 항목의 타입 지정을 위해 타입 인수를 지정합니다. subject는 옵저버 인터페이스를 구현하기 때문에 next 메서드를 호출하여 항목을 방출할 수 있습니다. 그리고 여전히 옵저버블이기 때문에 알림을 수신하고자 하려는 모든 코드에서 subscribe 메서드를 호출할 수 있습니다. .. 2022. 7. 30. [RxJS / angular] 17. 데이터 스트림과 액션 스트림, Subject를 사용하는 이유 데이터 스트림과 액션 스트림이 무엇인지 알아보겠습니다. 그리고 액션 스트림에서 사용되는 Subject의 필요성에 대해 생각해 보도록 하겠습니다. 데이터 스트림(data stream)과 액션 스트림(action stream) http get을 호출하면 옵저버블은 response라는 하나의 항목을 방출합니다. 예를 들어 response가 배열 데이터 [{a},{b}]를 방출하고 우리는 방출된 데이터를 이용해 화면에 적절히 표시하게 됩니다. 이러한 흐름을 데이터 스트림으로 생각할 수 있습니다. 그리고 방출이 끝나면 옵저버블이 complete이 되므로 더 이상 데이터를 방출하지 않는 죽은 스트림이 됩니다. 액션은 유저에 의해 발생되는 이벤트 입니다. 예를 들어 선택 박스를 클릭해서 선택을 하는 행위를 액션이라고.. 2022. 7. 28. 이전 1 2 3 4 5 ··· 15 다음
