GoF 디자인 패턴: 구조 패턴(1) - 정처기 실기 대비 개념 이해(어댑터, 데코레이터, 퍼사드, 프록시)

// Target 인터페이스
class Storage {
  setData(key, data) {
    throw new Error("setData()는 반드시 구현되어야 합니다.");
  }
  getData(key) {
    throw new Error("getData()는 반드시 구현되어야 합니다.");
  }
}

// Concrete Target
class LocalStorageManager extends Storage {
  setData(key, data) {
    localStorage.setItem(key, data);
  }
  getData(key) {
    return localStorage.getItem(key);
  }
}

// Adaptee (호환되지 않는 인터페이스를 가진 클래스)
class SessionStorageHandler {
  saveObject(key, obj) {
    sessionStorage.setItem(key, JSON.stringify(obj));
  }
  loadObject(key) {
    const item = sessionStorage.getItem(key);
    return item ? JSON.parse(item) : null;
  }
}

// Adapter
class SessionStorageAdapter extends Storage {
  constructor() {
    super();
    this.handler = new SessionStorageHandler();
  }

  // Target의 setData()를 Adaptee의 saveObject()로 연결
  setData(key, data) {
    // Adaptee는 객체를 받으므로, 문자열 데이터를 객체로 감싸줍니다.
    this.handler.saveObject(key, { value: data });
  }

  // Target의 getData()를 Adaptee의 loadObject()로 연결
  getData(key) {
    const obj = this.handler.loadObject(key);
    return obj ? obj.value : null;
  }
}

// 클라이언트 코드
function saveUserData(storage, userData) {
  storage.setData("user", userData);
  console.log("데이터가 저장되었습니다. ✅");
}

// LocalStorage 사용 (기존 방식)
const localManager = new LocalStorageManager();
saveUserData(localManager, "John Doe");
console.log("LocalStorage에서 읽음:", localStorage.getItem("user")); // "John Doe"

// SessionStorage 사용 (어댑터 활용)
const sessionAdapter = new SessionStorageAdapter();
saveUserData(sessionAdapter, "Jane Doe");
console.log("SessionStorage에서 읽음:", sessionStorage.getItem("user")); // {"value":"Jane Doe"}

// 클라이언트는 getData를 호출할 뿐이지만, 어댑터가 내부적으로 JSON 파싱을 처리합니다.
console.log("어댑터를 통해 읽음:", sessionAdapter.getData("user")); // "Jane Doe"

// Adaptee: 우리가 통합하려는 새로운 로거.
class NewLogger {
  logMessage(timestamp, message) {
    console.log(`[${new Date(timestamp).toISOString()}] - ${message}`);
  }
}

// Target: 우리 시스템이 기대하는 로거 인터페이스.
// 여기서는 'log(message)' 메서드를 가진 객체로 가정합니다.
// const logger = { log: (message) => { console.log(message) } };

// Instance Adapter
class LoggerAdapter {
  constructor(newLogger) {
    // Adaptee의 인스턴스를 내부에 품습니다. (Composition)
    this.adaptee = newLogger;
  }

  // Target 인터페이스에 맞는 log 메서드를 구현합니다.
  log(message) {
    // Adaptee가 요구하는 형식에 맞춰 데이터를 가공한 뒤,
    const timestamp = Date.now();
    // 실제 작업은 Adaptee에게 위임합니다.⭐️
    this.adaptee.logMessage(timestamp, message);
  }
}

// 클라이언트 코드
function logSystemEvent(logger, message) {
  logger.log(message);
}

const newLogger = new NewLogger();
const adapter = new LoggerAdapter(newLogger);

logSystemEvent(adapter, "사용자가 로그인했습니다.");
// 출력: [2025-07-02TXX:XX:XX.XXX] - 사용자가 로그인했습니다.

// Component: 공통 인터페이스
class Coffee {
  cost() {
    throw new Error("cost()는 반드시 구현되어야 합니다.");
  }

  getDescription() {
    throw new Error("getDescription()은 반드시 구현되어야 합니다.");
  }
}

// ConcreteComponent: 장식될 기본 객체
class SimpleCoffee extends Coffee {
  cost() {
    return 5; // 기본 커피 가격 5
  }

  getDescription() {
    return "기본 커피";
  }
}

// Decorator: 다른 Coffee 객체를 감싸는 역할
class CoffeeDecorator extends Coffee {
  constructor(coffee) {
    super();
    this._coffee = coffee; // 감쌀 Coffee 객체를 저장
  }

  cost() {
    return this._coffee.cost(); // 감싼 객체의 cost()를 호출
  }

  getDescription() {
    return this._coffee.getDescription(); // 감싼 객체의 getDescription()을 호출
  }
}

// ConcreteDecorator A: 우유 추가
class WithMilk extends CoffeeDecorator {
  constructor(coffee) {
    super(coffee);
  }

  cost() {
    return super.cost() + 2; // 기본 가격에 우유 가격 추가
  }

  getDescription() {
    return super.getDescription() + ", 우유 추가";
  }
}

// ConcreteDecorator B: 설탕 추가
class WithSugar extends CoffeeDecorator {
  constructor(coffee) {
    super(coffee);
  }

  cost() {
    return super.cost() + 1; // 기본 가격에 설탕 가격 추가
  }

  getDescription() {
    return super.getDescription() + ", 설탕 추가";
  }
}

// 클라이언트 코드
let coffee = new SimpleCoffee();
console.log(`${coffee.getDescription()} - 가격: ${coffee.cost()}`);
// 출력: 기본 커피 - 가격: 5

// 우유를 추가해봅시다.
coffee = new WithMilk(coffee);
console.log(`${coffee.getDescription()} - 가격: ${coffee.cost()}`);
// 출력: 기본 커피, 우유 추가 - 가격: 7

// 거기에 설탕도 추가해봅시다.
coffee = new WithSugar(coffee);
console.log(`${coffee.getDescription()} - 가격: ${coffee.cost()}`);
// 출력: 기본 커피, 우유 추가, 설탕 추가 - 가격: 8

// 순서를 바꿔서 설탕을 먼저 추가할 수도 있습니다.
let anotherCoffee = new SimpleCoffee();
anotherCoffee = new WithSugar(anotherCoffee);
anotherCoffee = new WithMilk(anotherCoffee);
console.log(
  `${anotherCoffee.getDescription()} - 가격: ${anotherCoffee.cost()}`
);
// 출력: 기본 커피, 설탕 추가, 우유 추가 - 가격: 8

// Subsystem Class 1: 프로젝터
class Projector {
  on() {
    console.log("프로젝터가 켜졌습니다.");
  }
  off() {
    console.log("프로젝터가 꺼졌습니다.");
  }
}

// Subsystem Class 2: 앰프
class Amplifier {
  on() {
    console.log("앰프가 켜졌습니다.");
  }
  setVolume(level) {
    console.log(`볼륨이 ${level}로 설정되었습니다.`);
  }
  off() {
    console.log("앰프가 꺼졌습니다.");
  }
}

// Subsystem Class 3: 조명
class Lights {
  dim(level) {
    console.log(`조명이 ${level}% 밝기로 어두워졌습니다.`);
  }
  brighten() {
    console.log("조명이 밝아졌습니다.");
  }
}

// Subsystem Class 4: DVD 플레이어
class DvdPlayer {
  on() {
    console.log("DVD 플레이어가 켜졌습니다.");
  }
  play(movie) {
    console.log(`'${movie}' 영화를 재생합니다.`);
  }
  off() {
    console.log("DVD 플레이어가 꺼졌습니다.");
  }
}

// Facade
class HomeTheaterFacade {
  constructor(amp, projector, lights, dvd) {
    this.amplifier = amp;
    this.projector = projector;
    this.lights = lights;
    this.dvdPlayer = dvd;
  }

  // 영화 보는 과정을 하나의 메서드로 통합
  watchMovie(movie) {
    console.log("--- 영화 볼 준비를 시작합니다 ---");
    this.lights.dim(10);
    this.projector.on();
    this.amplifier.on();
    this.amplifier.setVolume(7);
    this.dvdPlayer.on();
    this.dvdPlayer.play(movie);
  }

  // 영화 끝내는 과정을 하나의 메서드로 통합
  endMovie() {
    console.log("\n--- 홈시어터를 종료합니다 ---");
    this.dvdPlayer.off();
    this.amplifier.off();
    this.projector.off();
    this.lights.brighten();
  }
}

// 클라이언트 코드
const amp = new Amplifier();
const projector = new Projector();
const lights = new Lights();
const dvd = new DvdPlayer();

// 퍼사드 객체 생성
const homeTheater = new HomeTheaterFacade(amp, projector, lights, dvd);

// 클라이언트는 복잡한 과정을 알 필요 없이, 간단한 메서드만 호출합니다.
homeTheater.watchMovie("인터스텔라");
homeTheater.endMovie();

--- 영화 볼 준비를 시작합니다 ---
조명이 10% 밝기로 어두워졌습니다.
프로젝터가 켜졌습니다.
앰프가 켜졌습니다.
볼륨이 7로 설정되었습니다.
DVD 플레이어가 켜졌습니다.
'인터스텔라' 영화를 재생합니다.

--- 홈시어터를 종료합니다 ---
DVD 플레이어가 꺼졌습니다.
앰프가 꺼졌습니다.
프로젝터가 꺼졌습니다.
조명이 밝아졌습니다.

// Subject: 공통 인터페이스
class Image {
  display() {
    throw new Error("display()는 반드시 구현되어야 합니다.");
  }
}

// RealSubject: 실제 객체 (생성 비용이 비쌈)
class RealImage extends Image {
  constructor(fileName) {
    super();
    this.fileName = fileName;
    this.loadFromDisk(); // 생성 시점에 바로 이미지 로딩 (무거운 작업)
  }

  loadFromDisk() {
    console.log(
      `${this.fileName} 파일을 디스크에서 로딩하는 중... (시간 소요)`
    );
  }

  display() {
    console.log(`${this.fileName} 이미지를 화면에 표시합니다.`);
  }
}

// Proxy: RealImage를 대리하는 객체
class ProxyImage extends Image {
  constructor(fileName) {
    super();
    this.fileName = fileName;
    this.realImage = null; // 처음에는 실제 이미지 객체를 null로 둔다.
  }

  display() {
    // display()가 호출되는 시점에 실제 객체가 필요한지 확인
    if (this.realImage === null) {
      console.log(`[프록시] 실제 이미지가 필요해졌습니다. 지금 생성합니다.`);
      // 실제 객체가 필요한 바로 그 순간에 생성! (Lazy Initialization)
      this.realImage = new RealImage(this.fileName);
    }
    // 실제 객체에게 작업 위임
    this.realImage.display();
  }
}

// 클라이언트 코드
console.log("--- 프록시 객체 생성 ---");
const image = new ProxyImage("고화질_풍경사진.jpg");

console.log("\n--- 첫 번째 display() 호출 ---");
// 이 시점에 RealImage 객체가 생성되고 로딩됩니다.
image.display();

console.log("\n--- 두 번째 display() 호출 ---");
// 이미 RealImage 객체가 생성되었으므로, 바로 display만 호출됩니다.
image.display();

--- 프록시 객체 생성 ---

--- 첫 번째 display() 호출 ---
[프록시] 실제 이미지가 필요해졌습니다. 지금 생성합니다.
고화질_풍경사진.jpg 파일을 디스크에서 로딩하는 중... (시간 소요)
고화질_풍경사진.jpg 이미지를 화면에 표시합니다.

--- 두 번째 display() 호출 ---
고화질_풍경사진.jpg 이미지를 화면에 표시합니다.