[JavaScript 디자인 패턴] 어댑터 패턴이란 무엇인가? 어댑터 패턴 사용해 서로 다른 인터페이스 연결하기

어답터 패턴이란 무엇인가?

어댑터 패턴(Adapter Pattern)은 서로 다른 인터페이스를 가지는 두 객체를 연결하여 사용할 수 있도록 하는 구조적인 패턴입니다. 어댑터 패턴을 이용하면, 기존에 작성된 코드를 재사용할 수 있으며, 객체 간의 결합도를 낮출 수 있습니다.

 

어댑터 패턴은 서로 다른 인터페이스를 가지는 두 객체를 연결하여 사용할 수 있도록 하는 패턴입니다. 어댑터 패턴을 이용하면, 기존 코드를 재사용할 수 있으며, 객체 간의 결합도를 낮출 수 있습니다. 하지만, 어댑터 패턴 적용 시 추가적인 객체 생성이 필요하므로 메모리 사용량이 증가할 수 있으며, 기존 코드를 재사용하지만, 인터페이스를 변환하기 위한 코드가 추가됩니다. 따라서, 어댑터 패턴을 적용할 때에는, 상황에 맞게 적절한 패턴을 선택하여 사용해야 합니다.

어댑터 패턴의 예시로는, 원래 객체와 호환되지 않는 외부 라이브러리나 API를 사용해야 하는 경우가 있습니다. 이런 경우, 어댑터 패턴을 이용하여 기존 코드를 재사용하면서 외부 라이브러리나 API를 사용할 수 있습니다.

또한, 어댑터 패턴은 MVC 디자인 패턴에서도 사용됩니다. MVC 디자인 패턴에서 모델과 뷰 사이에 컨트롤러를 두어 모델과 뷰를 연결합니다. 이때, 어댑터 패턴을 이용하여 모델과 뷰의 인터페이스를 변환하면, 컨트롤러에서 모델과 뷰를 쉽게 연결할 수 있습니다.

어댑터 패턴은 다른 패턴들과 결합하여 사용될 수 있습니다. 예를 들어, 빌더 패턴과 어댑터 패턴을 결합하여, 새로운 객체를 생성하면서 외부 라이브러리나 API와 연결할 수 있습니다. 따라서, 어댑터 패턴은 다른 패턴들과 함께 사용하여 더욱 강력한 솔루션을 제공할 수 있습니다.

 

어댑터 패턴의 종류

어댑터 패턴은 크게 객체 어댑터 패턴과 클래스 어댑터 패턴으로 구분됩니다.

 

객체 어댑터 패턴(Object Adapter Pattern)

객체 어댑터 패턴은 객체를 이용하여 인터페이스를 연결하는 방식입니다. 어댑터 클래스는 두 개의 인터페이스를 구현하며, 하나의 인터페이스를 다른 인터페이스로 변환하는 역할을 합니다. 객체 어댑터 패턴을 이용하면, 기존 클래스의 코드 변경 없이도 인터페이스를 변환하여 사용할 수 있습니다.

 

클래스 어댑터 패턴(Class Adapter Pattern)

클래스 어댑터 패턴은 상속을 이용하여 인터페이스를 연결하는 방식입니다. 어댑터 클래스는 기존 클래스를 상속받아 새로운 클래스를 만들며, 상속을 통해 인터페이스를 연결합니다. 클래스 어댑터 패턴을 이용하면, 새로운 클래스를 만들어 사용해야 하므로, 객체 어댑터 패턴보다는 코드의 복잡도가 높아집니다.

 

 

JavaScript로 클래스 어댑터 패턴 만들어보기

해외의 많은 국가들에서는 화씨 온도계만 구현해놓고 섭씨 온도계는 구현해놓지 않습니다. 화씨 온도계를 섭씨 온도계로 변환 하는 어댑터를 만들어보도록 하겠습니다.

 

예를 들어 화씨 온도계 클래스를 다음과 같이 만들 수 있습니다.

// Adaptee (기존에 사용하던 객체)
class FahrenheitSensor {
  getFahrenheitTemp() {
    const temp = Math.floor(Math.random() * 100);
    console.log(`Current temperature is ${temp}°F`);
    return temp;
  }
}

이를 다음의 섭씨온도계로 변환해야 합니다.

// Target (새로운 인터페이스)
class CelsiusSensor {
  getCelsiusTemp() {}
}

 

그러면 다음과 같이 어댑터를 사용해 화씨 온도를 섭씨 온도로 변환해주는 어댑터를 만들 수 있습니다. FahrenheitToCelsiusAdapter에서는 getCelsiusTemp() 메소드를 이용하여 FahrenheitSensor에서 getFahrenheitTemp() 메소드를 호출하고, 이를 섭씨 온도로 변환합니다. 

// Adapter (FahrenheitSensor와 CelsiusSensor를 연결해주는 어댑터)
class FahrenheitToCelsiusAdapter extends CelsiusSensor {
  constructor(fahrenheitSensor) {
    super();
    this.fahrenheitSensor = fahrenheitSensor;
  }

  getCelsiusTemp() {
    const fahrenheitTemp = this.fahrenheitSensor.getFahrenheitTemp();
    const celsiusTemp = ((fahrenheitTemp - 32) * 5) / 9;
    console.log(`Current temperature is ${celsiusTemp}°C`);
    return celsiusTemp;
  }
}

 

한국 유저는 섭씨 온도를 사용하기 때문에 Client는 섭씨 온도계를 인자로 받습니다. Client에서는 logTemperature() 메소드를 이용하여 CelsiusSensor의 getCelsiusTemp() 메소드를 호출하여 변환된 섭씨 온도를 로깅합니다.

// Client (사용자)
class Client {
  constructor(celsiusSensor) {
    this.celsiusSensor = celsiusSensor;
  }

  logTemperature() {
    this.celsiusSensor.getCelsiusTemp();
  }
}

 

그러면  섭씨 온도계(CelsiusSensor)를 구현하는 어뎁터를 Client의 인자로 사용할 수 있게 됩니다.

const fahrenheitSensor = new FahrenheitSensor();
const adapter = new FahrenheitToCelsiusAdapter(fahrenheitSensor);
const client = new Client(adapter);

client.logTemperature();

 

정리하면 FahrenheitSensor를 사용하여 화씨 온도를 출력하고, 이를 CelsiusSensor로 변환하여 출력하는 어댑터 패턴을 구현했습니다. 이를 통해, FahrenheitSensor와 CelsiusSensor를 연결하여 코드의 재사용성과 유연성을 높일 수 있습니다.

 

 

어댑터 패턴의 정리하기

어댑터 패턴의 장단점을 정리하면 다음과 같습니다.

 

어댑터 패턴의 장점

어댑터 패턴의 장점은 다음과 같습니다.

• 기존 코드를 재사용할 수 있습니다.
• 객체 간의 결합도를 낮출 수 있습니다.
• 새로운 코드를 작성하지 않고도 인터페이스를 연결할 수 있습니다.

 

어댑터 패턴의 단점

어댑터 패턴의 단점은 다음과 같습니다.

• 어댑터 패턴을 적용하면, 추가적인 객체 생성이 필요하므로 메모리 사용량이 증가할 수 있습니다.
• 어댑터 패턴을 적용하면, 기존 코드를 재사용하지만, 인터페이스를 변환하기 위한 코드가 추가됩니다.