2.4.3 옵저버블 모듈

옵저버 객체를 직접 호출하면 구독자에게 전달되는 데이터를 정의할 수 있습니다. 이 데이터가 어떻게 생성되고 어디서 오는지는 옵저버블의 컨텍스트에 캡슐화됩니다. 예를 들어 사용자가 장기 실행 연산을 수행할 때 사용하는 간단한 진행률 표시기 위젯을 만든다고 해봅시다. 이 모듈은 다음 예제와 같이 특정 속도로 0%에서 100%까지의 백분율 값을 생성합니다.

예제 2-4 RxJS를 사용하는 사용자 정의 진행률 표시기 모듈

const progressBar$ = Rx.Observable.create(observer => {
  const OFFSET = 3000; -- 3초 뒤에 진행률 표시기의 카운터가 시작됩니다.
  const SPEED =  50; -- 50밀리초마다 새로운 진행률 값을 방출합니다.
 
  let val = 0;
  function progress() {
    if(++val <= 100) {
      observer.next(val); -- 50밀리초마다 새로운 진행률 값을 방출합니다.
      setTimeout(progress, SPEED); -- 재귀적으로 진행률 함수를 호출합니다.
    }
    else {
      observer.complete(); -- 100%에 도달한 후에 완료 신호를 전송합니다.
    }
  };
  setTimeout(progress, OFFSET); -- 3초 뒤에 진행률 표시기의 카운터가 시작됩니다.
});
 
window.onload = function() {
  const label = document.querySelector('#progress-indicator');
  progressBar$
    .subscribe(
      val => label.textContent = (Number.isInteger(val) ? val + "%" : val),
      error => console.log(error.message),
      () => label.textContent = 'Complete!'
    );
  };

---