부수효과 가득한 프론트엔드에서 함수형으로 살아남기

// 영화 아이템 클릭 시 상세 모달을 띄운다.
movieListEl.addEventListener("click", (event) => {
  const target = event.target as HTMLElement;
  const movieItem = target.closest<HTMLElement>(".movie-item");
  if (movieItem?.dataset.movieId) {
    openMovieDetailModal(movieItem.dataset.movieId);
  }
});
 
// 모달이 열리면, 닫는 방법을 여러 개 등록한다.
function openMovieDetailModal(movieId: string) {
  // ... 모달 그리기 ...
 
  // ESC 키로 닫기
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") handleModalClose();
  });
 
  // 배경이나 닫기 버튼 클릭으로 닫기
  document.addEventListener("click", (event) => {
    const target = event.target as HTMLElement;
    if (target.closest(".close-modal") || target.classList.contains("modal-background")) {
      handleModalClose();
    }
  });
}

// 영화 아이템 클릭 → 모달 열기
movieListEl?.addEventListener("click", (event) => {
  const target = event.target as HTMLElement;
  // [액션] DOM 탐색을 통해 클릭된 영화 아이템을 찾는다.
  const movieItem = target.closest<HTMLElement>(".movie-item");
  // [계산] movieId가 있는지 판별한다.
  if (movieItem?.dataset.movieId) {
    // [액션] 모달을 연다.
    openMovieDetailModal(movieItem.dataset.movieId);
  }
});
 
// 모달 닫기
document.addEventListener("keydown", (event) => {
  // [계산] Escape 키인지 판별한다.
  if (event.key === "Escape")
    // [액션] 모달을 닫는다.
    handleModalClose();
});
 
document.addEventListener("click", (event) => {
  const target = event.target as HTMLElement;
  // [계산] 닫기 버튼인지 판별한다.
  const isCloseButton = !!target.closest(".close-modal");
  // [계산] 모달 배경인지 판별한다.
  const isBackground = target.classList.contains("modal-background");
  // [액션] 둘 중 하나라도 해당되면 모달을 닫는다.
  if (isCloseButton || isBackground) handleModalClose();
});

// --- 계산 (순수 함수) ---
 
// Escape 키인지 판별한다.
const isEscapeKey = (event: KeyboardEvent) => event.key === "Escape";
 
// 클릭 대상이 모달을 닫아야 하는 영역인지 판별한다.
const isModalCloseTarget = (target: HTMLElement) =>
  !!target.closest(".close-modal") || target.classList.contains("modal-background");
 
// 클릭된 요소에서 movieId를 꺼낸다.
const getMovieId = (target: HTMLElement) => target.closest<HTMLElement>(".movie-item")?.dataset.movieId;
 
// --- 액션 (얇아진 핸들러) ---
 
movieListEl?.addEventListener("click", (event) => {
  const movieId = getMovieId(event.target as HTMLElement);
  if (movieId) openMovieDetailModal(movieId);
});
 
document.addEventListener("keydown", (event) => {
  if (isEscapeKey(event)) handleModalClose();
});
 
document.addEventListener("click", (event) => {
  if (isModalCloseTarget(event.target as HTMLElement)) handleModalClose();
});

// keydown 이벤트를 받는다 → [계산] Escape 키인지 판별한다 → [액션] 모달을 닫는다.
document.addEventListener("keydown", (event) => {
  // [입력] keydown 이벤트를 받는다
 
  // [계산] Escape 키인지 판별한다.
  if (event.key === "Escape")
    // [결과 출력] 모달을 닫는다.
    handleModalClose();
});
 
// click 이벤트를 받는다 → [계산] 닫기 버튼인지 혹은 모달 배경인지 판별한다 → [액션] 둘 중 하나라도 해당되면 모달을 닫는다.
document.addEventListener("click", (event) => {
  // [입력] click 이벤트를 받는다
 
  const target = event.target as HTMLElement;
  // [계산] 닫기 버튼인지 판별한다.
  const isCloseButton = !!target.closest(".close-modal");
  // [계산] 모달 배경인지 판별한다.
  const isBackground = target.classList.contains("modal-background");
 
  // [결과 출력] 둘 중 하나라도 해당되면 모달을 닫는다.
  if (isCloseButton || isBackground) handleModalClose();
});

// 사용 예시 — 이벤트를 감싼 래퍼 객체에 메서드를 체이닝한다.
eventSource.map((event) => event.target).filter((target) => isModalCloseTarget(target));

type Cleanup = () => void;
 
interface EventSource<T> {
  filter(predicate: (value: T) => boolean): EventSource<T>;
  map<U>(fn: (value: T) => U): EventSource<U>;
  subscribe(handler: (value: T) => void): Cleanup;
}

function makeSource<T>(registerFn: (handler: (value: T) => void) => Cleanup): EventSource<T> {
  return {
    // filter, map, subscribe 메서드는 아래에서 차례로 채워나간다.
  };
}

// DOM 이벤트를 EventSource로 감싸는 진입 함수.
function fromDOMEvent<E extends Event>(target: EventTarget, type: string): EventSource<E> {
  return makeSource<E>((handler) => {
    const listener = (e: Event) => handler(e as E);
    target.addEventListener(type, listener);
    return () => target.removeEventListener(type, listener);
  });
}

subscribe(handler) {
  return registerFn(handler);
},

map<U>(fn: (value: T) => U): EventSource<U> {
  return makeSource<U>((handler) =>
    registerFn((value) => handler(fn(value))),
  );
},

filter(predicate) {
  return makeSource((handler) =>
    registerFn((value) => {
      if (predicate(value)) handler(value);
    }),
  );
},

function makeSource<T>(registerFn: (handler: (value: T) => void) => Cleanup): EventSource<T> {
  return {
    // 평가식을 통과한 값만 다음 단계로 흘려보내는 콜백을 한 겹 두른 새 EventSource를 반환한다.
    filter(predicate) {
      return makeSource((handler) =>
        registerFn((value) => {
          if (predicate(value)) handler(value);
        }),
      );
    },
 
    // 변환식을 적용해 다음 단계로 넘기는 콜백을 한 겹 두른 새 EventSource를 반환한다.
    map<U>(fn: (value: T) => U): EventSource<U> {
      return makeSource<U>((handler) => registerFn((value) => handler(fn(value))));
    },
 
    // 지금까지 쌓아 올린 등록 함수를 그대로 실행한다. 이 시점에 addEventListener가 걸린다.
    subscribe(handler) {
      return registerFn(handler);
    },
  };
}

// 여러 EventSource를 하나로 합친다.
// 어느 소스에서 이벤트가 발생해도 handler가 호출되며, cleanup 한 번으로 모든 소스가 해제된다.
function merge<T>(...sources: EventSource<T>[]): EventSource<T> {
  return makeSource((handler) => {
    const cleanups = sources.map((s) => s.subscribe(handler));
    return () => cleanups.forEach((c) => c());
  });
}

// Escape 키로 모달을 닫는 스트림.
const escapeKey$ = fromDOMEvent<KeyboardEvent>(document, "keydown").filter((event) => event.key === "Escape");
 
// 배경 / 닫기 버튼 클릭으로 모달을 닫는 스트림.
const closeClick$ = fromDOMEvent<MouseEvent>(document, "click").filter((event) => {
  const target = event.target as HTMLElement;
  return !!target.closest(".close-modal") || target.classList.contains("modal-background");
});
 
// 두 스트림을 합쳐서, 어느 쪽이든 발생하면 모달을 닫는다.
const cleanup = merge<Event>(escapeKey$, closeClick$).subscribe(() => handleModalClose());

// 영화 리스트 클릭 → 영화 아이템 추출 → movieId 있는 것만 통과 → movieId만 꺼내기.
const movieClick$ = fromDOMEvent<MouseEvent>(movieListEl, "click")
  .map((event) => (event.target as HTMLElement).closest<HTMLElement>(".movie-item"))
  .filter((item): item is HTMLElement => item?.dataset.movieId !== undefined)
  .map((item) => item.dataset.movieId as string);
 
// 마지막에 액션을 붙인다.
movieClick$.subscribe((movieId) => openMovieDetailModal(movieId));

import { fromEvent, merge } from "rxjs";
import { filter } from "rxjs/operators";
 
// Escape 키로 모달을 닫는 스트림.
const escapeKey$ = fromEvent<KeyboardEvent>(document, "keydown").pipe(filter((event) => event.key === "Escape"));
 
// 배경 / 닫기 버튼 클릭으로 모달을 닫는 스트림.
const closeClick$ = fromEvent<MouseEvent>(document, "click").pipe(
  filter((event) => {
    const target = event.target as HTMLElement;
    return !!target.closest(".close-modal") || target.classList.contains("modal-background");
  }),
);
 
// 두 스트림을 합쳐서, 어느 쪽이든 발생하면 모달을 닫는다.
const subscription = merge(escapeKey$, closeClick$).subscribe(() => handleModalClose());

import { fromEvent } from "rxjs";
import { map, filter } from "rxjs/operators";
 
// 영화 리스트 클릭 → 영화 아이템 추출 → movieId 있는 것만 통과 → movieId만 꺼내기.
const movieClick$ = fromEvent<MouseEvent>(movieListEl, "click").pipe(
  map((event) => (event.target as HTMLElement).closest<HTMLElement>(".movie-item")),
  filter((item): item is HTMLElement => item?.dataset.movieId !== undefined),
  map((item) => item.dataset.movieId as string),
);
 
movieClick$.subscribe((movieId) => openMovieDetailModal(movieId));