본문 바로가기
TYLER SONG2026
블로그 목록
Frontend

new Observable(subscriber => ...): 직접 Observable을 생성하는 방법

`Observable`은 비동기 데이터 스트림을 나타내는 핵심 클래스입니다. `new Observable()`을 사용하면 데이터 생산 방식과 흐름을 직접 정의할 수 있습니다. 이를 통해 복잡한 비동기 로직을 체계적으로 관리하고, 필요에 따라 커스텀한 데이터 스트림을 만들 수 있습니다.

송민성3분 읽기

1. 개념

Observable은 데이터 스트림을 나타냅니다. 데이터 스트림은 시간이 지남에 따라 생성되는 값들의 시퀀스입니다. new Observable(subscriber => ...)은 이러한 데이터 스트림을 직접 정의하는 방법입니다. 여기서 subscriber는 데이터를 소비하는 관찰자입니다.

2. 왜 사용하는가

기존의 of(), from() 등 미리 정의된 생성 함수는 한정적인 데이터 스트림만 만들 수 있습니다. new Observable()을 사용하면 데이터 생산 방식을 완벽하게 제어하여 복잡한 비동기 이벤트를 처리하거나, 특정 조건에 따라 데이터를 방출하는 사용자 정의 스트림을 만들 수 있습니다.

3. 동작 원리

new Observable(subscriber => ...) 생성자는 콜백 함수를 인자로 받습니다. 이 콜백 함수 안에서 subscriber 객체의 메서드 (next(), error(), complete())를 호출하여 데이터를 방출하거나, 에러를 알리거나, 스트림을 완료할 수 있습니다.

  • next(value): 스트림에 새로운 값 value를 방출합니다.
  • error(error): 스트림에 에러 error가 발생했음을 알립니다. 이후 next() 호출은 무시됩니다.
  • complete(): 스트림이 완료되었음을 알립니다. 이후 next() 호출은 무시됩니다.

4. 예제 (인라인 코드로만, fenced 코드블록 금지)

다음은 1초 간격으로 숫자를 방출하는 Observable을 만드는 예제입니다.

new Observable(subscriber => { let i = 0; setInterval(() => { subscriber.next(i++); }, 1000); })

먼저 new Observable()을 호출하고, 콜백 함수를 전달합니다. 콜백 함수 안에서 setInterval()을 사용하여 1초마다 i 값을 증가시키고, subscriber.next(i++)를 호출하여 숫자를 스트림에 방출합니다.

5. 실무 사용 사례

  • 웹소켓(WebSocket) 데이터 스트림: 웹소켓 연결을 통해 수신되는 데이터를 Observable로 변환하여 처리할 수 있습니다.
  • 사용자 입력 이벤트 스트림: 키보드 입력, 마우스 클릭 등 사용자 입력 이벤트를 Observable로 변환하여 처리할 수 있습니다.
  • 파일 스트림: 파일 내용을 조금씩 읽어오는 스트림을 Observable로 변환하여 처리할 수 있습니다.

6. 주의할 점

subscriber 객체의 메서드를 잘못 사용하면 예상치 못한 동작이 발생할 수 있습니다. 특히, error()complete()는 스트림을 종료하므로 신중하게 호출해야 합니다. 또한, 콜백 함수 안에서 예외가 발생하면 스트림이 중단될 수 있으므로 예외 처리를 반드시 수행해야 합니다.

7. 핵심 정리

new Observable(subscriber => ...)Observable을 생성하는 가장 기본적인 방법입니다. 데이터 생산 방식을 직접 정의하여 복잡한 비동기 로직을 효과적으로 관리할 수 있습니다. subscriber 객체의 메서드를 올바르게 사용하여 데이터 방출, 에러 처리, 스트림 완료를 제어하는 것이 중요합니다.

© 2026 Tyler Song