Ch.12 디자인 패턴 | CS Visualizer

01 — SINGLETON PATTERN

싱글톤 패턴

클래스의 인스턴스가 오직 하나만 존재하도록 보장하고, 그 인스턴스에 전역 접근점을 제공하는 패턴입니다. "new"를 아무리 많이 호출해도 항상 같은 객체를 반환합니다.

STRUCTURE DIAGRAM

Caller A
new Instance()

Caller B
new Instance()

Caller C
new Instance()

SINGLE INSTANCE

DatabaseConnection

0x7f4a2b3c

host: localhost:5432
pool: 10 connections

생성 횟수: 0

// 버튼을 클릭하면 인스턴스 참조가 로그됩니다...

DOUBLE-CHECKED LOCKING (Java)

public class DatabaseConnection {
    private static volatile DatabaseConnection instance = null;
    private String host;
    private ConnectionPool pool;

    // private 생성자 — 외부에서 new 불가
    private DatabaseConnection() {
        this.host = "localhost:5432";
        this.pool = new ConnectionPool(10);
    }

    public static DatabaseConnection getInstance() {
        if (instance == null) {               // 1차 체크 (비용 절감)
            synchronized (DatabaseConnection.class) {
                if (instance == null) {       // 2차 체크 (스레드 안전)
                    instance = new DatabaseConnection();
                }
            }
        }
        return instance;
    }
}

사용 사례: DB 커넥션 풀 · Logger · 설정(Config) 관리자 · 캐시 관리자 · 스레드 풀

02 — FACTORY PATTERN

팩토리 패턴

객체 생성 로직을 클라이언트로부터 분리하여 팩토리 클래스에 위임하는 패턴입니다. 클라이언트는 구체적인 클래스를 알 필요 없이 공통 인터페이스를 통해 객체를 요청합니다.

도형 타입을 선택하면 팩토리가 해당 객체를 생성합니다

CLIENT

createShape("circle")

요청

FACTORY

ShapeFactory

생성

PRODUCT

Circle

OBJECT TYPE

Circle

PROPERTIES

radius: 50, area: 7854

METHOD

draw(), resize(n)

INTERFACE

Shape (공통)

FACTORY METHOD

서브클래스가 생성할 객체의 클래스를 결정.
하나의 제품 계층을 다룸.
예: Logger, Parser 생성

ABSTRACT FACTORY

관련된 객체 군(族)을 함께 생성.
여러 제품 계층을 다룸.
예: UI 컴포넌트 키트(Button+Input+Modal)

FACTORY IMPLEMENTATION (TypeScript)

interface Shape {
    draw(): void;
    area(): number;
}

class ShapeFactory {
    static create(type: string): Shape {
        switch (type) {
            case 'circle':    return new Circle();
            case 'rect':      return new Rectangle();
            case 'triangle':  return new Triangle();
            default:          throw new Error(`Unknown shape: ${type}`);
        }
    }
}

// 클라이언트 코드 — 구체 클래스를 전혀 모름
const shape = ShapeFactory.create('circle');
shape.draw();   // Circle이든 Rectangle이든 동일 인터페이스 사용

03 — OBSERVER PATTERN

옵저버 패턴

객체 간의 일대다(1:N) 의존 관계를 정의합니다. 퍼블리셔(Publisher)의 상태가 변경되면, 구독 중인 모든 서브스크라이버(Subscriber)에게 자동으로 통지됩니다.

PUBLISHER

📺 CS Visualizer 채널

구독자 수: 3명

발송된 이벤트: 0

→

👤

UserA (React 개발자)

대기 중...

👤

UserB (백엔드 개발자)

대기 중...

👤

UserC (CS 학생)

대기 중...

EVENT LOG

// 이벤트를 발생시키면 구독자들에게 통지됩니다...

실세계 적용 사례:

YouTube 구독 — Channel(Publisher) + User(Subscriber)

React useState — state 변경 → 컴포넌트 리렌더링

DOM Events — element.addEventListener()

Node.js EventEmitter — emitter.on() / emitter.emit()

04 — STRATEGY PATTERN

전략 패턴

알고리즘의 군(族)을 정의하고 각각을 캡슐화하여 런타임에 교환 가능하게 만드는 패턴입니다. 조건문 분기를 없애고 동작을 유연하게 변경할 수 있습니다.

CONTEXT

PaymentContext

현재 전략

전략을 선택하세요

💳

CreditCard

신용카드 결제
3D Secure 인증

💛

KakaoPay

카카오페이 결제
간편 인증

🟢

NaverPay

네이버페이 결제
포인트 사용 가능

PAYMENT FLOW

전략을 선택하고 "결제 실행"을 누르세요

BAD: if/else 분기

function pay(method, amount) {
  if (method === 'credit') {
    // 신용카드 로직...
    validate3DSecure();
    chargeCard(amount);
  } else if (method === 'kakao') {
    // 카카오 로직...
    requestKakaoAuth();
    deductKakao(amount);
  } else if (method === 'naver') {
    // 네이버 로직...
    checkNaverPoints();
    deductNaver(amount);
  }
  // 새 결제수단 추가 → 코드 수정 필요!
}

GOOD: 전략 패턴

interface PayStrategy {
  pay(amount: number): void;
}

class PaymentContext {
  private strategy: PayStrategy;

  setStrategy(s: PayStrategy) {
    this.strategy = s;
  }
  execute(amount: number) {
    this.strategy.pay(amount);
  }
}
// 새 전략 추가 → 클래스만 추가!
// 기존 코드 수정 없음 (OCP 준수)

05 — ARCHITECTURE PATTERNS

MVC / MVP / MVVM 아키텍처

UI와 비즈니스 로직을 분리하는 아키텍처 패턴들입니다. 관심사 분리(Separation of Concerns)를 통해 코드의 유지보수성과 테스트 가능성을 높입니다.

VIEW

화면

HTML/Template

이벤트/렌더

CONTROLLER

제어

요청 처리

데이터/쿼리

MODEL

데이터

DB/비즈니스 로직

MVC — Model View Controller

Model: 데이터와 비즈니스 로직 담당. DB와 직접 통신.
View: 사용자에게 보여지는 UI. Model 데이터를 렌더링.
Controller: 사용자 입력을 받아 Model 업데이트 후 View 선택.

Django (Python)

Ruby on Rails

Spring MVC

Laravel (PHP)

ASP.NET MVC

// 버튼을 클릭하면 MVC 데이터 흐름을 추적합니다...

VIEW

화면

수동적 (Passive)

인터페이스

PRESENTER

발표자

모든 로직 담당

데이터

MODEL

데이터

저장소

MVP — Model View Presenter

View: 완전히 수동적. UI 이벤트를 Presenter에게 위임.
Presenter: View와 Model 사이의 중재자. 모든 UI 로직 포함.
Model: 데이터 계층. Presenter만 접근 가능.

View가 Presenter를 모름 → 인터페이스(contract)로만 통신 → 단위 테스트 용이!

Android (Java)

iOS UIKit

WinForms

// 버튼을 클릭하면 MVP 데이터 흐름을 추적합니다...

VIEW

화면

데이터 바인딩

⇄ Two-way Binding

VIEWMODEL

뷰모델

상태 + 커맨드

데이터

MODEL

데이터

도메인 로직

MVVM — Model View ViewModel

View: ViewModel에 바인딩. 상태 변경 시 자동으로 UI 업데이트.
ViewModel: View를 위한 상태와 커맨드 노출. View를 직접 참조하지 않음.
Model: 도메인 데이터와 비즈니스 규칙.

양방향 데이터 바인딩: View ↔ ViewModel이 자동으로 동기화. 명시적 UI 조작 코드 불필요!

Vue.js

React + Hooks

Angular

SwiftUI

Jetpack Compose

// 버튼을 클릭하면 MVVM 데이터 흐름을 추적합니다...