구조디자인 패턴 - 브리지

브리지 패턴 (Bridge)

• 브리지는 큰 클래스 또는 밀접하게 관련된 클래스들의 집합을 두 개의 개별 계층구조(추상화 및 구현)로 나눈 후 각각 독립적으로 개발할 수 있도록 하는 구조 디자인 패턴입니다.

브리지 구성요소

1. 리모컨 클래스 : 추상화를 담당하며, 기기를 참조해서 기기가 여러가지 동작을 수행하도록한다. tv의 볼륨을 올리거나, 채널을 변경하거나
2. 기능이 추가된 리모컨 클래스 : 리모컨 클래스에는 없는 또다른 기능이 추가된 advanced된 리모컨입니다.
3. 기기 인터페이스 : 리모컨클래스에서 사용하는 메서드들을 미리 선언해 둡니다.
4. 기기 인터페이스를 구현하는 여러가지 기기들 : 기기 인터페이스에서 선언한 메서드들에 대한 구현과 추가적인 메서드들을 포함할 수 있습니다.

요약

• 브리지 패턴은 추상화와 구현으로 나뉘어질 수 있습니다.
  • 추상화(인터페이스 ) : 일부 개체(entity)에 대한 상위 수준의 제어 레이어입니다. 이 레이어는 자체적으로 실제 작업을 수행해서는 안 되며, 작업들을 구현 레이어(플랫폼이라고도 함)에 위임해야 합니다.
  • 구현 : 모든 구상 구현들에 공통적인 인터페이스를 선언하며, 추상화는 여기에 선언된 메서드들을 통해서만 구현 객체와 소통할 수 있습니다.
• 여기서 본다면 리모컨이 추상화를 담당하고 구현은 tv나 radio 같은 기기에서 담당하고, 리모컨은 실제 구현담당보다는 기기에게 동작을 위임하여 동작을 지시할 수 있습니다.
• 따라서 리모컨은 Device 인터페이스를 통해서 tv, radio와 소통하므로 리모컨은 여러 장치 유형을 지원할 수 있습니다.
• 실제로 다른 여타 기기들을 추가할 때는 advanced 리모컨과 같은 클래스를 정의해서 얼마든지 기기를 추가할 수 있습니다.

반응형

코드

/**
 * 리모컨 클래스
 * 추상화를 담당하고, 두 클래스 계층구조의 제어 부분에 대한 인터페이스를 정의한다.
 * 구현 계층구조의 객체에 대한 참조를 유지하고 모든 실제작업을 이 객체에 위임한다.
 */
class RemoteControlB {
  protected device: Device;

  constructor(device: Device) {
    this.device = device;
  }

  public volumeDown() {
    this.device.setVolume(this.device.getVolume() - 10);
  }
  public volumeUp() {
    this.device.setVolume(this.device.getVolume() + 10);
  }
  public channelDown() {
    this.device.setChannel(this.device.getChannel() - 1);
  }
  public channelUp() {
    this.device.setChannel(this.device.getChannel() + 1);
  }
}

/**
 * 추상화 계층구조로부터 클래스들을 장치 클래스들과 독립적으로 확장할 수 있습니다.
 */
class AdvancedRemoteControlB extends RemoteControlB {
  // mute 기능 추가
  public mute(): string {
    return `mute execute!`;
  }
}

/**
 * Device 구현 레이어(플랫폼)
 */
interface Device {
  getVolume(): number;
  setVolume(vol: number): void;
  getChannel(): number;
  setChannel(channel: number): void;
}

/**
 * 모든 Device는 같은 인터페이스(구현 레이어)를 따릅니다.
 */
class TV implements Device {
  public volume: number;
  public channel: number;

  constructor(v: number, c: number) {
    this.volume = v;
    this.channel = c;
  }

  getVolume(): number {
    return this.volume;
  }
  setVolume(vol: number): void {
    this.volume = vol;
  }
  getChannel(): number {
    return this.channel;
  }
  setChannel(channel: number): void {
    this.channel = channel;
  }

  public TVOperation(): string {
    return "this is TVOperation";
  }
}

class Radio implements Device {
  public volume: number;
  public channel: number;

  constructor(v: number, c: number) {
    this.volume = v;
    this.channel = c;
  }

  getVolume(): number {
    return this.volume;
  }
  setVolume(vol: number): void {
    this.volume = vol;
  }
  getChannel(): number {
    return this.channel;
  }
  setChannel(channel: number): void {
    this.channel = channel;
  }

  public RadioOperation(): string {
    return "this is RadioOperation";
  }
}

// 클라이언트 코드는 볼륨을 높이고, 채널을 내린다.
function clientCode(rc: RemoteControlB) {
  rc.volumeUp();
  rc.channelDown();
}

const tv = new TV(10, 100);
const tvRemote = new RemoteControlB(tv);
clientCode(tvRemote);
console.log(
  `after client Code in tv, volume : ${tv.volume} channel : ${tv.channel} `
);

console.log("");

const radio = new Radio(20, 200);
const radioRemote = new AdvancedRemoteControlB(radio);
clientCode(radioRemote);
console.log(
  `after client Code in radio, volume : ${radio.volume} channel : ${radio.channel} `
);

결과

출처

https://refactoring.guru/ko/design-patterns/bridge