어댑터 패턴(Adapter Pattern) 예시 - 자바스크립트(JavaScript ES5 / ES6)

자바스크립트로 구현한 디자인패턴 중 어댑터 패턴을 번역하여 소개합니다. 

문제상황과 그에 대한 해결방법을 객체지향적인 디자인패턴과 다르게 자바스크립트스럽게(?) 구현된 예제입니다.

객체지향적으로 설계한 코드도 확인할 수 있습니다.  

자세한 내용은 아래 원문을 참고해주세요.

GitHub - Badacadabra/JavaScript-Design-Patterns: :paperclip: ES5 + ES6 + CoffeeScript + TypeScript design patterns with some the

---

개요 (Synopsis)

제 컴퓨터에는 어메이징한 사진들이 있습니다. 이 사진들을 제 고물 프로젝터에 연결해서 보고 싶습니다. 

그러나 컴퓨터는 HDMI를 사용하고 프로젝터에는 VGA를 사용합니다.

빔 프로젝터

---

문제 (Problem)

HDMI와 VGA는 호환되지 않는 인터페이스입니다. 

HDMI는 디지털 신호를 통해 이미지와 소리를 처리할 수 있지만, VGA는 아날로그 신호를 통해 이미지만 처리할 수 있습니다.

 

converter..

---

해결방법 (Solution)

이러한 상황을 잘 해결해주는 것이 어댑터입니다. 
몇가지만 있으면 됩니다.

• VGA 연결을 나타내는 객체(리터럴)
• HDMI에서 VGA로 연결하는 어댑터 객체(리터럴)

후자는 전자에 대한 참조를 가져야 하며 모듈의 진입점이어야 합니다.

그다음 어댑터의 메인 메서드는 VGA 연결의 메인 메서드로 일부 작업을 위임해야 합니다.

---

ES5 버전 

Client  코드 (client.js)

'use strict';

var hdmiToVgaAdapter = require('./API/connections');

// ==============================
// CLIENT CODE 
// ==============================

console.log(hdmiToVgaAdapter.handleDigitalSignal()); // Your computer uses HDMI and your projector uses VGA

 

API 코드 (connections.js)

'use strict';

// ==============================
// CONNECTIONS
// ==============================

// VGA는 아날로그 신호를 통해 이미지만 처리하는 고유한 인터페이스를 갖고 있습니다.
var vga = {
    name: "VGA",
    data: "images",
    signal: "analog",
    handleAnalogSignal: function () {
        return "Interface: " + this.name + "\nData: " + this.data + "\nSignal: " + this.signal;
    }
};

// 그러나 컴퓨터는 출력으로 HDMI를 사용하고 프로젝터는 입력으로 VGA를 사용합니다...
// 여기서 이미지를 표시하려면 어댑터가 필요합니다.
module.exports = {
    vga: vga,
    handleDigitalSignal: function () {
        return this.vga.handleAnalogSignal();
    }
};

---

ES6 버전 

Client  코드 (client.js)

import hdmiToVgaAdapter from './API/connections';

// ==============================
// TEST
// ==============================

console.log(hdmiToVgaAdapter.handleDigitalSignal()); // Your computer uses HDMI and your projector uses VGA

 

API 코드 (connections.js)

// ==============================
// CONNECTIONS
// ==============================

const vga = {
    name: "VGA",
    data: "images",
    signal: "analog",
    handleAnalogSignal() {
        return `Interface: ${this.name} Data: ${this.data} Signal: ${this.signal}`;
    }
};

export default {
    vga,
    handleDigitalSignal() {
        return this.vga.handleAnalogSignal();
    }
};