🛠️ 처음부터 만드는 Observable — 데이터 스트림을 구독하기

왜 Observable인가?

RxJS의 핵심인 Observable 패턴은 시간에 따라 발생하는 값들의 스트림을 다룹니다. 클릭, API 응답, 타이머 등 비동기 이벤트를 일관된 방식으로 처리할 수 있습니다.

구현

```js
class Observable {
constructor(subscribeFn) {
this._subscribeFn = subscribeFn;
}
subscribe(observer) {
// observer가 함수면 next로 감싸기
const obs = typeof observer === 'function'
? { next: observer, error: () => {}, complete: () => {} }
: { next: observer.next || (() => {}),
error: observer.error || (() => {}),
complete: observer.complete || (() => {}) };
let unsubscribed = false;
this._subscribeFn({
next: (val) => !unsubscribed && obs.next(val),
error: (err) => !unsubscribed && obs.error(err),
complete: () => !unsubscribed && obs.complete(),
});
return { unsubscribe: () => { unsubscribed = true; } };
}
map(fn) {
return new Observable((observer) => {
this.subscribe({
next: (val) => observer.next(fn(val)),
error: (err) => observer.error(err),
complete: () => observer.complete(),
});
});
}
filter(fn) {
return new Observable((observer) => {
this.subscribe({
next: (val) => fn(val) && observer.next(val),
error: (err) => observer.error(err),
complete: () => observer.complete(),
});
});
}
}
```

사용 예시

```js
const numbers$ = new Observable((observer) => {
[1, 2, 3, 4, 5].forEach((n) => observer.next(n));
observer.complete();
});
numbers$
.filter((n) => n % 2 === 1) // 홀수만
.map((n) => n * 10) // 10배
.subscribe({
next: (val) => console.log(val), // 10, 30, 50
complete: () => console.log('완료!'),
});
```

핵심 포인트

| 개념 | 설명 |
|------|------|
| Lazy | `subscribe()` 호출 전까지 실행되지 않음 |
| Unsubscribe | 구독 해제로 메모리 누수 방지 |
| Chainable | `map`, `filter` 등 연산자를 체이닝 |
Promise가 단일 비동기 값이라면, Observable은 여러 값의 스트림입니다. 이 차이를 이해하면 RxJS를 훨씬 쉽게 쓸 수 있습니다.