퍼사드 패턴은 복잡한 코드를 메서드 뒤에 숨기는 데 사용하는 패턴입니다. 이를 통해 코드를 훨씬 깔끔하게 만들 수 있습니다.
집에서 영화를 보려고 합니다. 그런데 영화를 보려면 해야 할 일이 많습니다. 팝콘도 필요하고, 콜라도 필요하고, 조명도 어둡게 하고, TV와 영상도 준비해야 합니다.
이렇게 할 일이 꽤 많지만, 복잡한 코드를 그대로 노출하고 싶지는 않습니다. 그래서 퍼사드 패턴으로 코드를 작성해 보겠습니다.
typescript
서로 다른 인터페이스를 가진 클래스를 소스 변경 없이 함께 동작시키는 어댑터 패턴을 TypeScript 예제와 개방-폐쇄 원칙 관점에서 정리합니다.
2022. 7. 31.Frontend단계 쪼개기와 다형성으로 조건문을 대체해 계산 로직과 출력 로직을 분리하는 리팩터링을 다룹니다.
2022. 5. 7.Frontend타입스크립트에서 여러 객체를 동시에 상속받을 수 있게 해주는 Mixin 패턴을 알아봅니다.
2022. 4. 29.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 메서드만 호출하면, 그 메서드가 무슨 일을 하는지 이해하기 위해 복잡한 내부 코드를 일일이 알 필요가 없습니다. 또한 호출하는 쪽 코드가 매우 깔끔해서 나중에 리팩터링하기도 쉽습니다.