재밌는 Tech 상식

👀 observable: 단어 의미와 프로그래밍 에서의 활용

잡학&단어 2025. 7. 14. 12:26
반응형

최근 몇 년 사이에 프론트엔드 개발을 비롯한 다양한 IT 분야에서 **‘Observable(옵저버블)’**이라는 단어를 자주 접할 수 있습니다. 처음에는 생소하게 느껴질 수 있지만, 이 단어는 단순한 기술 용어를 넘어, 언어적 의미와 프로그래밍 패러다임을 연결하는 중요한 개념입니다. 이번 글에서는 observable의 형용사와 명사 의미, 그리고 RxJS와 같은 프로그래밍 기술에서 이 단어가 어떻게 활용되는지 자세히 알아보겠습니다.

 

✅ observable의 영어 의미

 

1. 형용사로서의 의미

observable은 동사 **observe(관찰하다)**에서 파생된 형용사입니다.

 

observable (adj.)

 

  • 관찰할 수 있는
  • 눈에 띄는
  • 감지 가능한

 

예문으로 보자면:

  • There was no observable change in temperature.
  • (눈에 띌 만한 온도 변화는 없었다.)

 

즉, **‘어떤 현상이나 상태가 외부에서 감지될 수 있는 상태’**를 말합니다.

 

 

2. 명사로서의 의미

 

사실 observable은 명사로도 사용됩니다. 특히 물리학이나 과학철학, 그리고 프로그래밍 분야에서 명사로서의 역할이 뚜렷합니다.

 

observable (n.)

 

  • 관찰 가능한 것
  • (과학적으로) 측정 가능하거나 관찰 가능한 변수
  • (프로그래밍에서) 관찰 가능한 데이터 흐름 객체

 

예문:

  • In quantum physics, an observable is a property that can be measured, like position or momentum.
  • (양자역학에서 observable은 위치나 운동량처럼 측정 가능한 특성이다.)

 

즉, 명사 observable은 관찰의 대상, 감시할 수 있는 어떤 구체적인 개체나 흐름을 의미합니다.

 

 

✅ IT, 특히 프로그래밍에서 observable은?

 

📌 핵심 정의

프로그래밍, 특히 **RxJS (Reactive Extensions for JavaScript)**에서 observable은 비동기 데이터 스트림을 표현하는 객체를 의미합니다.

 

즉, Observable은 시간의 흐름에 따라 발생하는 여러 값을 **관찰(observe)**하고, 이를 처리할 수 있게 해주는 **데이터 생산자(producer)**의 역할을 합니다.

import { Observable } from 'rxjs';

const myObservable = new Observable((subscriber) => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

myObservable.subscribe({
  next: (value) => console.log('Received:', value),
  complete: () => console.log('All done!'),
});

 

위 예시에서 myObservable은 문자열 "Hello"와 "World"를 차례로 방출하고 완료 신호를 보냅니다. subscribe()를 통해 사용자는 이 흐름을 **관찰(observer)**할 수 있게 됩니다.

 

 

✅ observable vs. promise: 차이점은?

많은 초보 개발자들이 “Observable은 Promise랑 뭐가 다른가요?“라는 질문을 던집니다. 중요한 차이점은 다음과 같습니다:

 

항목 promise observable
값 단일 값만 처리 다수의 값 처리 가능
취소 불가능 구독 취소(unsubscribe) 가능
지연 실행 즉시 실행 Lazy 실행 (구독 시 실행됨)
연산자 .then(), .catch() .map(), .filter(), .merge() 등 풍부한 연산자 제공

 

Observable은 이벤트 스트림처럼 지속적인 데이터 흐름을 처리할 수 있어서, 사용자 입력, API 응답, 웹소켓 메시지 처리에 적합합니다.

 

 

✅ RxJS에서의 observable: 반응형 프로그래밍의 핵심

📌 RxJS란?

RxJS(ReactX for JavaScript)는 Observable을 중심으로 설계된 반응형 프로그래밍(Reactive Programming) 라이브러리입니다. 데이터가 시간에 따라 변화할 때, 이 흐름을 선언적으로 처리할 수 있도록 도와줍니다.

 

 

예시: 버튼 클릭 이벤트 감지하기

import { fromEvent } from 'rxjs';

const button = document.querySelector('button');
const clicks$ = fromEvent(button, 'click');

clicks$.subscribe(() => {
  console.log('Button clicked!');
});

 

위 코드에서는 fromEvent()를 이용해 버튼 클릭 이벤트를 observable로 만든 후, 이를 구독(subscribe)하여 매번 클릭이 발생할 때 콘솔 로그를 출력합니다.

 

이런 방식은 기존 이벤트 리스너보다 훨씬 직관적이며 확장성이 뛰어난 처리 방식을 제공합니다.

 

 

✅ 고급 기능: observable의 연산자

Observable은 단순한 이벤트 흐름만 제공하는 것이 아니라, 다양한 연산자를 조합해 데이터 흐름을 조작할 수 있습니다.

 

대표적인 연산자:

 

  • map: 값을 변환
  • filter: 조건에 맞는 값만 전달
  • mergeMap: 여러 observable을 하나로 병합
  • debounceTime: 이벤트 폭주를 막기 위한 지연처리
clicks$
  .pipe(
    debounceTime(500),
    map(() => 'clicked')
  )
  .subscribe((val) => console.log(val));

 

이렇게 조합된 Observable은 UI 성능 최적화, API 응답 처리, 실시간 데이터 핸들링에 매우 유용합니다.

 

 

✅ 마무리: 왜 observable을 알아야 할까?

 

Observable이라는 단어는 단순히 ‘관찰 가능한 것’이라는 의미에서 출발해, 실제 소프트웨어 개발에서 매우 중요한 개념으로 자리잡았습니다.

  • 사용자 이벤트를 감지하고 처리할 수 있는 능력
  • 데이터 흐름을 구성하고 조작하는 능력
  • 시스템의 상태를 외부에서 관찰할 수 있도록 만드는 설계 철학

 

이 모든 것들이 observable의 철학과 구조 위에 세워져 있습니다.

 

RxJS를 사용한 프론트엔드 개발자뿐 아니라, 백엔드, DevOps, 데이터 엔지니어 등 다양한 분야의 개발자들이 observable 개념을 이해하고 활용할 수 있다면, 더 안정적이고 유연한 시스템을 만들 수 있을 것입니다.

 

📌 요약

 

구분 설명
Observable (형용사) 관찰 가능한, 감지 가능한
Observable (명사) 관찰 대상, 감지 가능한 객체
RxJS에서의 Observable 비동기 데이터 스트림을 표현하는 객체
특징 다수 값 처리, 구독 가능, 연산자 활용
주요 활용 사용자 입력 처리, API 응답, 실시간 스트림

 

반응형