디자인 패턴 5종 — Singleton·Observer·Strategy

디자인 패턴은 자주 만나는 문제의 표준 해결책. JS 는 다른 언어보다 가볍게 — 클로저·고차 함수·일급 함수 덕에 패턴이 짧아집니다. 25편은 매일 만나는 5종을 정리.

① Singleton — 인스턴스가 단 하나

// 옛 방식 — 클래스 + 정적 캐시
class Config {
  static #instance;
  static getInstance() {
    if (!Config.#instance) Config.#instance = new Config();
    return Config.#instance;
  }
}

// 현대 JS — 모듈 자체가 싱글톤
// config.js
const config = {
  apiUrl: process.env.API_URL,
  timeout: 5000,
};
export default config;

// 어디서 import 해도 같은 객체
import config from "./config.js";

② Observer (Pub/Sub) — 이벤트 시스템

class EventBus {
  #listeners = new Map();

  on(event, fn) {
    if (!this.#listeners.has(event)) this.#listeners.set(event, new Set());
    this.#listeners.get(event).add(fn);
    return () => this.off(event, fn);   // unsubscribe 반환
  }

  off(event, fn) {
    this.#listeners.get(event)?.delete(fn);
  }

  emit(event, ...args) {
    this.#listeners.get(event)?.forEach(fn => fn(...args));
  }
}

const bus = new EventBus();
const unsub = bus.on("login", user => console.log("환영", user.name));
bus.emit("login", { name: "준성" });   // "환영 준성"
unsub();   // 구독 해제

React 의 상태 라이브러리(zustand·jotai), DOM 의 addEventListener, Node 의 EventEmitter — 전부 이 패턴. JS 의 가장 보편적 비동기 패턴.

③ Factory — 객체 생성을 함수로 추상화

// 직접 new 대신 팩토리 함수
function createUser(role) {
  switch (role) {
    case "admin":
      return { role, perms: ["read", "write", "admin"] };
    case "user":
      return { role, perms: ["read", "write"] };
    case "guest":
      return { role, perms: ["read"] };
    default:
      throw new Error("unknown role");
  }
}

const a = createUser("admin");
const g = createUser("guest");

// 더 복잡한 예 — DB 클라이언트 팩토리
function createDbClient({ kind, ...config }) {
  if (kind === "postgres") return new PgClient(config);
  if (kind === "mysql")    return new MySqlClient(config);
  if (kind === "sqlite")   return new SqliteClient(config);
  throw new Error(`unknown kind: ${kind}`);
}

④ Module — 묶음 (ESM 으로 거의 표준화)

// 옛 IIFE 모듈
const Counter = (function () {
  let count = 0;
  return {
    inc() { count++; },
    get() { return count; },
  };
})();

// 현대 ESM (19편) — 파일 자체가 모듈
// counter.js
let count = 0;
export function inc() { count++; }
export function get() { return count; }

// 사용
import { inc, get } from "./counter.js";

21편의 IIFE·모듈 패턴이 ESM 등장 후 거의 안 씀. ESM 자체가 깔끔한 캡슐화.

⑤ Strategy — 알고리즘을 함수로 주입

// 정렬 알고리즘을 외부에서 주입
function sortBy(arr, strategy) {
  return [...arr].sort(strategy);
}

const byPrice    = (a, b) => a.price - b.price;
const byName     = (a, b) => a.name.localeCompare(b.name);
const byNewest   = (a, b) => b.createdAt - a.createdAt;

sortBy(products, byPrice);
sortBy(products, byName);
sortBy(products, byNewest);

// 더 복잡한 — 결제 처리
const paymentStrategies = {
  card:    (amount) => chargeCard(amount),
  bank:    (amount) => transferBank(amount),
  crypto:  (amount) => crypto.charge(amount),
};

function pay(amount, method) {
  const strategy = paymentStrategies[method];
  if (!strategy) throw new Error(`unknown: ${method}`);
  return strategy(amount);
}

보너스 패턴들 — 짧게

Decorator (16편 TS 와 다름)

// 함수를 감싸 기능 추가
function withLogging(fn) {
  return function (...args) {
    console.log("호출:", fn.name, args);
    return fn(...args);
  };
}

const safeAdd = withLogging(add);

Adapter

// 옛 API 를 새 API 모양으로
class NewLogger {
  log(level, msg) { console.log(`[${level}] ${msg}`); }
}

// 옛 인터페이스에 맞추는 어댑터
function oldLoggerAdapter(newLogger) {
  return {
    info: (m) => newLogger.log("info", m),
    warn: (m) => newLogger.log("warn", m),
    error: (m) => newLogger.log("error", m),
  };
}

Memoize

function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const fibo = memoize(function fib(n) {
  return n < 2 ? n : fib(n - 1) + fib(n - 2);
});

한 표 — 5종 요약