JavaScript Design Patterns

JavaScript 디자인 패턴 적용

디자인 패턴은 이름 암기가 아니라 생성, 공유 상태, 이벤트 알림, 알고리즘 교체가 반복될 때 객체 간 책임을 정리하는 도구다.

01

문제 유형 찾기

객체 생성이 복잡한지, 전역 상태가 필요한지, 이벤트 구독이 필요한지 먼저 분류한다.

문제 먼저 확인
02

패턴 선택

Factory는 생성 분기, Observer는 알림, Strategy는 알고리즘 교체에 맞다.

fit
03

JS 문법 매핑

class, closure, module, callback, Map 같은 언어 기능에 패턴의 역할을 맞춰 표현한다.

idiomatic JS
04

과설계 방지

한 번 쓰는 코드에 패턴 이름을 억지로 붙이지 않고 변경 가능성이 있을 때만 분리한다.

불필요한 추상화 줄이기
Singleton
앱 전체에서 하나의 설정 또는 연결 객체를 공유할 때 사용한다. 테스트 격리와 숨은 전역 상태 위험을 함께 고려한다.
shared instance
Observer
상태 변화가 여러 구독자에게 전파되어야 할 때 적합하다. 구독 해제 누락은 메모리 누수와 중복 실행을 만든다.
subscribe/unsubscribe
Strategy
정렬, 검증, 결제 방식처럼 알고리즘을 런타임에 바꾸고 싶을 때 쓴다. 공통 인터페이스가 명확해야 호출부가 단순해진다.
swap behavior

패턴 적용 기준

변경 이유 패턴이 실제 변경 축을 분리하는지 확인한다.
언어 관용 Java식 구조를 그대로 옮기지 않고 JS 함수와 모듈로 단순화한다.
테스트 전략과 옵저버는 mock 구현으로 동작을 쉽게 검증할 수 있다.

Strategy 예시

const validators = {
  email: (v) => v.includes("@"),
  minLength: (v) => v.length >= 8,
};