RxJS 시간 : 동기, 비동기

 

RxJS 반응형 프로그래밍

 

 

1. 왜 시간을 신경써야 할까?

 

 

유저들은 시간에 대해 아주 예민합니다.

어플리케이션의 성공은 '시간'이 아주 중요합니다.

 

프로그램 데이터는 받는 방식에 따라 동기와 비동기로 나뉩니다.

동기 프로그램은 실행시간을 예측할 수 있지만

비동기 프로그램은 네트워크 속도등 여로 요소로 인해 예측이 불가능 합니다.

 

비동기 프로그램을 작성할 때는 시간을 직접 처리하거나 특정 작업이 언제 완료될지 추측하지말고,

작업에 반응해야 합니다.

비동기 이벤트는 예측이 불가능하여 실행과 완료가 모호하고 이전 작업에 따라 결과도 달라집니다.

 

 

2. 자바스크립트의 비동기 타이밍 이해하기

 

RxJS를 사용하면

이전코드가 완료된 후에 실행이 되도록 직렬화하여 비동기 작업을 동기인 것처럼 처리합니다.

 

옵저버블의 오케스트레이션 계층을 통해 암시적으로나 명시적으로 시간을 처리할 수 있습니다.

 

암시적 타이밍의 특성

서버에서 데이터를 가져오거나 사용자 입력을 처리하는 작업에서 시간은 암시적(알수 없으며),

각 단계가 완료되면 데이터가 다음 단계로 전달 됩니다.

 

 

명시적 타이밍의 특성

구체적: 정해진 시간에

명시적: 사용자가 명확하게 정의하고 제어할 때

무조건적: 에러가 발생하지 않거나 스트림이 취소되지 않는 한 항상!

발생합니다.

 

사용자 중심:

애니메이션, 대화상자, 유효성 검사 메시지 어려운 경험이 될 수 있는 부분을 사용자에게 절묘하게 안내합니다.

리소스 중심:

네트워크 I/O 작업, 빠른 사용자 입력, CPU 집약적 계산 시간초과를 지정하여 호출 수를 줄인다.

요소의 특정 하위 집합을 버퍼링하거나 캐싱하여 한 번에 수행한다.

 

명시적 타이밍 이벤트는 작업을 순차적으로 실행하는 암시적 타이밍에 의존하지 않고

코드를 실행할 때 제어할수 있기 때문에 컴퓨팅에서 유용한 속성입니다.

 

 

3. 자바스크립트 타이밍 인터페이스

 

setTimeout()

쿠킹 타이머설정하는 것 같이

setTimeout()함수를 호출하면 몇 밀리초 후에 코드를 실행해야 함을 자바스크립트 런타임에 알립니다.

콜백이 미래에 정확히 한 번 호출되는 간단한 옵저버블입니다.

clearTimeout(timeId)을 전달하여 타이머를 구독 취소하는데

 

timer() 연산자

RxJS는 timer() 연산자로 대체하여 구현할 수 있다.

프로그램 가독성이 향상되고,

다루기 힘든 콜백 대신 후속 구독을 통해 여러 소비자가 사용할 수 있는 일반적인 이벤트로 방출합니다.

 

setInterval()

호출 간격을 지정하여 연산을 반복적으로 호출합니다.

자바스크립트의 시간 간격이 무한대로 실행될 수 있어 이벤트의 구독 취소를 포함하기도 합니다.

 

interver() 연산자

interver() 연산자로 대체

해당 간격을 구독할 수 있고, 이벤트를 주기적으로 받을 수 있으며, 자동적인 구독해제방식을 사용할 수 있습니다.

 

4. RxJS로 시간 다루기

 

timeInterval() 연산자

Interval()의 또다른 변형으로, 실행 횟수나 간격 사이의 시간과 같은 추가 정보를 제공합니다.

 

delay() 연산자

밀리초 단위를 사용하며 옵저버블 시퀀스 전체를 시간 이동에 사용 할 수 있습니다.

 

Output 1과 같이 출력될 거라 생각이 들 수도 있지만,

delay() 연산자를 사용하면 Output 2와 같이 출력 됩니다.

 

 

각 연산자는 이벤트 생성이 아닌 이벤트 전파에만 영향을 미칩니다.

시간 연산자는 순차적으로 동작합니다.

 

5. 사용자 입력 처리하기

 

사용자의 마우스 움직임이나 키 입력같은 짧은 시간에 많은 이벤트를 방출할 때(ex. 스마트 검색 프로그램)

유용한 디바운싱과 스로틀링이 있다.

 

디바운싱

debounceTimer()

일정 시간 범위(밀리초)에서 어떤 값도 방출하지 않다가 설정된 시간이 경과한 후에만 옵저버블 시퀀스에서 이벤트를 방출합니다. 기본적으로 일정 시간 내에 여럿이 아닌 하나의 이벤트만 전송합니다.

비활성 상태로 설정된 시간이 지나면 마지막 이벤트만 방출됩니다.

 

ex. 스마트 검색 프로그램

 

사용자가 입력하는 동안 서버에서 수행한 웹 요청수를 제한하는 이점이 있으며 전반적으로 리소스 사용률이 더 낫습니다.

사용자가 입력할 때마다 자동 완성 기능이 깜빡이는 성가신 UX를 피할 수 있습니다.

 

 

디바운싱 연산은 처리 파이프라인 안에 내장된 필터라고 볼 수 있습니다.

RxJS는 소비자가 데이터를 소비하거나 수용하여

더 많은 작업을 표시하고 수행할 수 있게 생산자의 데이터를 파이프라인을 사용하여 처리합니다.

 

디바운싱은 불필요한 연산을 줄이고 사용자 입력을 처라하는데 더 효율적인 방법입니다.

 

스로틀링

throttleTime()

debouceTime() 연산자와 비슷

일정 시간 뒤에 다른 값이 따라오는 옵저버블 시퀀스의 값을 무시합니다. 매회 한 번만 함수 실행 합니다.

 

스크롤링 버튼 클릭은 애플리케이션이 실수로 반복되는 클릭 이벤트를 무시하게 하여

취소 작업이 여러 번 실행되는 것을 방지합니다.

 

6. RxJS에서의 버퍼링

 

RxJS는 버퍼링 연산자들을 드러내어 일정량 또는 일정 시간 동안 데이터를 임시로 저장하는 데 직접 사용할 수 있습니다.

버퍼링 연산자는 과거 데이터를 일시적으로 저장하는 기본 데이터 구조를 제공합니다.

 

 

버퍼연산자

buffer(observable)

bufferCount(number)

bufferWhen(selector)

bufferTime(time)

 

 

 

 

참고: RxJS 반응형 프로그램(길벗)