본문으로 건너뛰기
yceffort
PostsSeriesTagsAbout🧪 Research
EN

Tweaks

theme
accent palette
film grain
minimal mode
BACK TO INDEX
◆ ESSAY
--min
--year
KOoriginal

mailMail icongithubtwitter
yceffort
•
© 2026
•
https://yceffort.kr
BACK TO INDEX
◆ ESSAY

ReactiveX) Observable

avatar
yceffort
2018-05-31 · 3분
3min
2018year
KOoriginal
reactive-programmingjavascript

보통 일반적인 프로그램의 경우에는, 하나씩 작성된 순서에 따라 로직이 실행되고, 완료되면 또다른 로직이 실행되는 등의 순서가 있음을 알수 있다.

그러나 이와 달리 ReactiveX는 "Observer"에 의해 임의의 순서에 따라 병렬적으로 실행되고 나중에 결과나 나온다.

즉 메서드를 호출하는 것이 아니라, Observable안의 데이터를 조회하고, 변환 하는 등의 프로세스를 정의한 후, Observable이 이벤트를 발생시키면 옵저버의 관찰자가 그 순간을 감지하고 준비된 연산을 실행하고 결과를 리턴한다. 그래서 Observable을 Subscribe한다는 표현을 쓴다.

일반적으로 Observable을 구현하기 위해서 다음과 같은 절차를 거친다.

  1. 비동기 호출로 결과를 리턴받고, 필요한 동작을 처리하는 메서드를 정의한다.
  2. Observable로 비동기 호출을 정의한다.
  3. Subscribe를 통해 옵저버를 Observable에 연결 시킨다.
  4. 메서드 호출로 결과가 리턴 될 때마다, 옵저버의 메서더는 리턴 값 또는 항목을 사용해서 연산을 한다.

onNext Observable은 새로운 항목을 push 할 때 마다 이 메서드를 호출한다. 이 메서드는 Observable 이 배출하는 항목을 parameter 로 전달 받는다.

oNError 기대하는 데이터가 생성되지 않았거나, 오류가 발생할 경우 호출된다. 이 경우 onNext, onCompleted는 호출되지 않는다.

onCompleted 마지막 onNext가 호출된 뒤에 호출된다.

더 이상 구독을 하지 않으려면 unSubscirbe를 호출한다.

Observable이 연속된 항목을 push하는 방법에는 두가지가 있는데 바로 hot과 cold다. hot은 생성되자마자 push하고, cold는 옵저버가 구독할때까지 배출하지 않는다.

이러한 Observable은 연산자와 연결하여 사용할 수 있는데, 이런 연산자들은 리턴된 observable을 변경하여 제공할 수 있다.

관련 글

  • #javascript#reactive-programming

    ReactiveX) Subject

    subject는 옵저버나 observable처러 행동하는 일부 ReactiveX구현체에서만 사용가능한 일종의 프록시다. subject는 옵저버이기 때문에 하나이상의 observable을 구독할 수 있으며, 동시에 observable 이기도 하기 때문에 항목을 하나하나 거치면서 다시 push하고 새로운 항목을 push할 수 있다. 총 4종류의 subject...

    2018-05-31·2분
  • #javascript#animation#web-animations-api

    number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복

    number-flow가 애니메이션을 켜는 최소 버전은 Chrome 125, Safari 17.2다. 이 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들면서 내린 결정들과, 뒤집게 된 판단 두 가지, 그리고 자동 강등을 포기한 Safari 버그 조사의 기록.

    2026-08-11·44분
  • #nodejs#security#javascript

    Node.js vm 모듈의 함정: 샌드박스가 아닌 이유

    집필 중인 Node.js Deep Dive의 5.2장(vm 모듈의 함정) 일부를 미리 공개합니다.

    2026-02-27·25분
  • #nodejs#javascript

    Node.js Deep Dive (가제) 베타 리더를 모십니다.

    많관부22

    2026-02-19·5분

새 글을 놓치고 싶지 않으시다면 RSS로 구독해 주세요.

RSS 구독 →

yceffort — 프론트엔드 엔지니어입니다. 발표·기술 자문·기고 문의는 이곳에서 받고 있습니다.

← Back to the blogIssue on GitHub →