퍼사드 패턴(Facade Pattern)이란? TypeScript 예제로 이해하기

TL;DR#

• 퍼사드 패턴(Facade Pattern)은 복잡한 코드를 하나의 메서드 뒤에 숨기는 디자인 패턴입니다.
• 여러 객체에 흩어진 호출을 단일 진입점으로 묶어, 호출하는 쪽 코드를 깔끔하게 유지합니다.
• 아래에서는 "집에서 영화 보기" 예제를 TypeScript로 구현해 퍼사드 패턴을 설명합니다.

퍼사드 패턴이란#

퍼사드 패턴은 복잡한 코드를 메서드 뒤에 숨기는 데 사용하는 패턴입니다. 이를 통해 코드를 훨씬 깔끔하게 만들 수 있습니다.

예제: 집에서 영화 보기#

집에서 영화를 보려고 합니다. 그런데 영화를 보려면 해야 할 일이 많습니다. 팝콘도 필요하고, 콜라도 필요하고, 조명도 어둡게 하고, TV와 영상도 준비해야 합니다.

이렇게 할 일이 꽤 많지만, 복잡한 코드를 그대로 노출하고 싶지는 않습니다. 그래서 퍼사드 패턴으로 코드를 작성해 보겠습니다.

typescript
복사
class PopcornMaker {
    turnOn() {
        console.log("Turn on popcorn maker");
    }

    pop() {
        console.log("Popping")
    }
}

class Beverage {
    getCoke() {
        console.log('Getting a cup of coke');
    }
}

class Light {
    dim() {
        console.log("Lights are dimming")
    }
}

class TV {
    turnOn() {
        console.log("Turn on TV");
    }
}

class Video {
    play() {
        console.log("Playing a video")
    }
}

class HomeTheaterFacade {
    private popconMaker:PopcornMaker;
    private beverage:Beverage;
    private light:Light;
    private tv:TV;
    private video:Video;

    constructor(popconMaker:PopcornMaker,beverage:Beverage, light:Light,tv:TV,video:Video) {
        this.popconMaker = popconMaker;
        this.beverage = beverage;
        this.light = light;
        this.tv = tv;
        this.video = video
    }

    watchMovie() {
        this.popconMaker.turnOn();
        this.popconMaker.pop();

        this.beverage.getCoke();

        this.light.dim();

        this.tv.turnOn();

        this.video.play();
    }
}

const popconMaker = new PopcornMaker();
const beverage = new Beverage();
const light = new Light();
const tv = new TV();
const video = new Video();

const homeTheater = new HomeTheater(popconMaker,beverage,light,tv,video);
homeTheater.watchMovie();

결론#

HomeTheaterFacade의 watchMovie 메서드만 호출하면, 그 메서드가 무슨 일을 하는지 이해하기 위해 복잡한 내부 코드를 일일이 알 필요가 없습니다. 또한 호출하는 쪽 코드가 매우 깔끔해서 나중에 리팩터링하기도 쉽습니다.