🛠️ 처음부터 만드는 EventEmitter — 이벤트로 소통하는 구조 만들기

왜 EventEmitter인가?

Node.js의 `EventEmitter`, 브라우저의 `addEventListener` — 이벤트 기반 프로그래밍은 어디에나 있습니다. 핵심 원리는 놀랍도록 단순합니다. 이름에 함수를 등록하고, 그 이름으로 호출하는 것.

직접 구현하기

```javascript
function createEmitter() {
const events = new Map();
return {
on(event, handler) {
if (!events.has(event)) events.set(event, []);
events.get(event).push(handler);
// 구독 해제 함수 반환
return () => {
const handlers = events.get(event);
const idx = handlers.indexOf(handler);
if (idx > -1) handlers.splice(idx, 1);
};
},
once(event, handler) {
const off = this.on(event, (...args) => {
off();
handler(...args);
});
return off;
},
emit(event, ...args) {
const handlers = events.get(event);
if (!handlers) return;
handlers.slice().forEach(fn => fn(...args));
},
};
}
```
> `handlers.slice()`를 쓰는 이유: `once` 핸들러가 실행 중 배열을 변경하므로, 복사본을 순회해야 안전합니다.

사용 예시

```javascript
const bus = createEmitter();
const off = bus.on('message', (text) => console.log(`받음: ${text}`));
bus.once('connect', () => console.log('첫 연결!'));
bus.emit('connect'); // "첫 연결!"
bus.emit('connect'); // (아무 일도 없음 — once니까)
bus.emit('message', '안녕'); // "받음: 안녕"
off(); // 구독 해제
bus.emit('message', '또 안녕'); // (아무 일도 없음)
```

핵심 포인트

| 개념 | 설명 |
|------|------|
| on | 이벤트에 핸들러를 등록하고, 해제 함수를 반환 |
| once | `on` 위에 한 번만 실행되도록 래핑 |
| emit | 등록된 핸들러를 순서대로 호출 |
| 구독 해제 | 반환된 함수를 호출하면 리스너 제거 → 메모리 누수 방지 |
React의 상태 관리 라이브러리(Zustand, Redux), WebSocket 래퍼, 게임 엔진 — 모두 이 패턴 위에 세워져 있습니다. 30줄로 만든 이 코드가 이벤트 시스템의 본질입니다.