JavaScript 디자인 패턴 실전편｜모듈부터 전략 패턴까지 코드로 배우기

🎨 JavaScript 디자인 패턴 실전편｜모듈 패턴부터 옵저버, 전략 패턴까지 코드로 이해하기

안녕하세요, 퍼블리셔 노미입니다! 😊

이전 글에서 우리는 JavaScript의 모듈 시스템과 기본적인 디자인 패턴을 배웠어요.
그럼 이번에는 진짜로 실무에서 써먹을 수 있도록, "코드로 체감하는 디자인 패턴 실전 예제"를 준비했어요! 💡

JavaScript 디자인 패턴 실전편｜모듈부터 전략 패턴까지 코드로 배우기

이 글에서는 다음과 같은 패턴을 코드 예시 중심으로 풀어봅니다:

• 📦 모듈 패턴(Module Pattern)
• 👑 싱글턴 패턴(Singleton Pattern)
• 🏭 팩토리 패턴(Factory Pattern)
• 👀 옵저버 패턴(Observer Pattern)
• 🎯 전략 패턴(Strategy Pattern)

실전 예제 + 사용 시점까지 부드럽고 꼼꼼하게 설명할게요! 시작합니다! 🚀

---

📦 모듈 패턴 (Module Pattern)

모듈 패턴은 변수를 캡슐화하고, 필요한 기능만 외부에 노출하는 패턴이에요. IIFE (즉시 실행 함수)를 사용해 클로저를 활용하는 게 핵심! 🔐

📌 예시 코드

const Counter = (function () {
  let count = 0;

  function increase() {
    count++;
    console.log(count);
  }

  function reset() {
    count = 0;
  }

  return {
    increase,
    reset,
  };
})();

Counter.increase(); // 1
Counter.increase(); // 2
Counter.reset();
Counter.increase(); // 1

• 🔒 내부 상태는 외부에서 직접 접근 불가
• 🔧 필요한 기능만 리턴 객체에 노출

→ 전역 오염 없이 재사용 가능한 유틸 모듈 제작에 유리! ✅

---

👑 싱글턴 패턴 (Singleton Pattern)

싱글턴 패턴은 인스턴스를 오직 하나만 만들도록 보장하는 패턴이에요. 전역 설정, 유저 세션, 알림 센터 같은 곳에서 자주 써요. 🌐

📌 예시 코드

class Config {
  constructor() {
    if (Config.instance) {
      return Config.instance; // 이미 있으면 그거 반환
    }
    this.mode = 'dark';
    Config.instance = this;
  }

  toggle() {
    this.mode = this.mode === 'dark' ? 'light' : 'dark';
  }
}

const a = new Config();
const b = new Config();

console.log(a === b); // true

• 🧠 생성자 안에서 인스턴스를 저장하고 재활용
• 🚫 여러 개 만들 수 없음 = 상태 공유

→ 앱 전체 설정, 공통 상태 관리에 딱! 🧭

---

🏭 팩토리 패턴 (Factory Pattern)

팩토리 패턴은 객체 생성 로직을 하나의 함수로 캡슐화하는 패턴이에요. 특정 조건에 따라 다른 객체를 만들어주는 '공장' 같다고 보면 돼요! 🏭

📌 예시 코드

class Dog {
  speak() {
    return '멍멍!';
  }
}

class Cat {
  speak() {
    return '야옹~';
  }
}

function AnimalFactory(type) {
  if (type === 'dog') return new Dog();
  if (type === 'cat') return new Cat();
  return null;
}

const pet = AnimalFactory('dog');
console.log(pet.speak()); // 멍멍!

• 📥 객체 생성 방식 추상화
• 💡 클라이언트는 내부 로직 몰라도 됨

→ 코드 확장성과 유지보수가 훨씬 쉬워져요! 🔧

---

👀 옵저버 패턴 (Observer Pattern)

옵저버 패턴은 하나의 객체 상태가 바뀔 때, 그걸 구독 중인 객체들에 자동 알림을 보내는 구조예요. 이벤트 시스템이나 리액티브 상태 관리에 많이 써요! 📡

📌 예시 코드

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers.push(fn);
  }

  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}

// 사용
const state = new Subject();

state.subscribe((msg) => console.log('Logger:', msg));
state.subscribe((msg) => console.log('Analytics:', msg));

state.notify('🟢 사용자 로그인'); 
// Logger: 사용자 로그인
// Analytics: 사용자 로그인

• 🔔 한 번의 상태 변경 = 여러 구독자 반응
• 💬 구독(subscribe) / 알림(notify) 구조

→ 상태 연동, 실시간 반응형 앱 구현에 딱! ⚡

---

🎯 전략 패턴 (Strategy Pattern)

전략 패턴은 동일한 작업을 다양한 방식으로 수행할 수 있도록 전략(함수)을 분리하는 구조예요. 예: 정렬, 할인 정책, 인증 방식 등 다양한 전략을 상황에 따라 바꿀 수 있어요! ♻️

📌 예시 코드

class PaymentContext {
  setStrategy(strategy) {
    this.strategy = strategy;
  }

  pay(amount) {
    this.strategy.pay(amount);
  }
}

class CardPayment {
  pay(amount) {
    console.log(`💳 카드로 ${amount}원 결제`);
  }
}

class KakaoPay {
  pay(amount) {
    console.log(`📱 카카오페이로 ${amount}원 결제`);
  }
}

// 사용
const payment = new PaymentContext();
payment.setStrategy(new CardPayment());
payment.pay(5000); // 💳 카드로 5000원 결제

payment.setStrategy(new KakaoPay());
payment.pay(7000); // 📱 카카오페이로 7000원 결제

• 🔄 전략은 클래스 또는 함수로 분리
• 🧠 Context는 전략만 갈아끼움

→ 유연한 조건별 로직 처리에 최고예요! 🧩

---

🧭 디자인 패턴 사용 시기 정리표

패턴	사용 시점	대표 상황
📦 모듈	코드 캡슐화	유틸 함수, 전역 충돌 방지
👑 싱글턴	하나의 상태 유지	앱 설정, 전역 캐시
🏭 팩토리	유사 객체 다양하게 생성	동물, 버튼 등 타입 분기
👀 옵저버	상태 변경 감지	이벤트 시스템, 알림센터
🎯 전략	동작 방식 교체	결제, 로그인, 정렬 전략

→ 상황에 맞는 패턴을 골라 쓰는 게 중요! 🧠

---

📚 마무리하며

디자인 패턴은 단순한 “문법 공식”이 아니라 코드를 더 유연하고 유지보수 가능하게 만드는 설계 아이디어입니다. 🧩

오늘 정리한 모듈, 싱글턴, 팩토리, 옵저버, 전략 패턴은 실전 JavaScript 프로젝트에서 자주 쓰이는 핵심 패턴이에요. 🚀

✅ 이 글에서 배운 핵심

• 📦 모듈 패턴 → 클로저와 캡슐화
• 👑 싱글턴 → 상태 공유와 전역 제어
• 🏭 팩토리 → 객체 생성 로직 분리
• 👀 옵저버 → 상태 감지와 반응 처리
• 🎯 전략 → 유연한 동작 방식 선택

다음 글에서는 디자인 패턴 고급편: 컴포지트, 상태, 커맨드 패턴도 이어서 풀어볼게요!

끝까지 읽어주신 여러분, 💖 정말 감사합니다! 함께 더 성장해요! 🌱

---

#JavaScript패턴 #디자인패턴실전 #옵저버패턴 #전략패턴 #팩토리패턴 #프론트엔드설계 #퍼블리셔노미 #코드유지보수 #JS패턴정리 #개발자성장