본문 바로가기

프로그래밍124

[RxJS / angular] 6. map 연산자, 마블 다이어그램 읽는 법 RxJS에서 가장 일반적으로 많이 사용되는 연산자 중 하나임 map연산자에 대해 알아보고, 마블 다이어그램을 어떻게 읽어야 하는지 알아보도록 하겠습니다. map 연산자란? map 연산자는 옵저버블에 의해 방출된 항목을 제공하는 함수에 정의된 대로 값을 변환하거나 변경합니다. 아래 예를 살펴보겠습니다. map을 사용해서 방출된 각 항목의 두배로 한 값을 매핑해 줍니다. map은 방출된 항목의 수를 변경할 수 없습니다. map연산자로 방출된 항목에 대해 정확히 하나의 매핑된 항목이 방출됩니다. 예를 들어 10개의 방출되는 항목이 있다면 map을 사용하여 방출된 각 항목을 변경한 후 각각의 항목이 10번 방출됩니다. 위에 of를 사용하여 옵저버블을 만들었습니다. 이 옵저버블은 1, 2, 3이라는 숫자가 차례로.. 2022. 7. 1.
[RxJS / angular] 5. RxJS 오퍼레이터(연산자) 개요, pipe 동작 이해하기 RxJS 오퍼레이터(연산자)란? RxJS 연산자는 옵저버블에서 방출된 항목을 변환하고 조작하는 함수 입니다. 이러한 오퍼레이터는 옵저버블에서 pipe메소드안의 인수로 사용하게 되고 여러 개의 연산자를 순서대로 적용할 수 있습니다. 위 예에서는 Observable의 pipe 메소드를 사용하여 오퍼레이터를 순서대로 map, tap, take 세 개를 사용하고 있습니다. 예에서 of는 세 개의 숫자를 방출하는 옵저버블 입니다. 옵저버블의 pipe 메소드를 호출하면서 쉼표로 구분하여 연산자를 전달하고 있습니다. 대부분의 연산자에는 하고 싶은 작업을 정의하는 인수가 필요하게 됩니다. map과 tap에서는 옵저버블에서 방출된 항목에 대해 해야 할 일을 정의하는 화살표 함수를 건네주었고, take에서는 3을 건네주고.. 2022. 6. 29.
[RxJS / angular] 4. 옵저버블 생성 함수(of, from, interval, fromEvent) 앵귤러에서 RxJS를 사용할 때 직접 옵저버블을 생성하는 일은 그다지 많지 않습니다. 직접 만드는 대신에 Angualr가 우리를 위해 생성해주는 옵저버블을 사용하게 됩니다. 하지만 직접 만들고 싶다면 Observable 생성자를 사용해서 옵저버블을 만들 수 있지만 권장하는 방법은 내장 생성 함수를 사용하는 것입니다. of, from, interval, fromEvent와 같은 생성 함수에 대해 알아보겠습니다. of 와 from 생성 함수 of는 내장 생성 함수 중 하나입니다. of는 정의된 값의 집합을 사용하여 Observable가능한 항목을 만들고 각 값을 내보내고 완료합니다. 위 예에서 옵저버블은 두 개의 문자열을 방출하고 완료됩니다. 또는 from 생성 함수가 있습니다. from은 배열과 같은 데이.. 2022. 6. 27.
[RxJS / angular] 3. 옵저버블의 Subscribe(구독), Unsubscribe(구독 취소) Observable를 시간의 흐름에 따른 이벤트 혹은 값이라고 했었습니다. 옵저버블이 있다고 해서 이것을 관찰하고 이용할 수 있는 건 아닙니다. 이러한 흐르는 이벤트와 값을 이용하기 위해서는 Subscribe(구독)이 필요합니다. 이번 포스트는 옵저버블의 구독(Subscribe)과 구독해지(Unsubscribe)에 대해 알아보도록 하겠습니다. 지난 글도 참고해 주세요. 2. Observable(옵저버블) 이란 무엇인가? 1. Observer와 Subscriber Subscribe(구독) 이란? RxJS에서는 Observable의 subscribe 메소드를 호출해서 알림을 수신하고 옵저버를 전달하여 옵저버블이 알림을 보낼 수 있도록 합니다. 이것을 "옵저버블을 구독한다"라고 합니다. Observable을 .. 2022. 6. 22.