프런트엔드/디자인 패턴

[10일차] 탬플릿 메소드 | 행동 패턴 11일만에 끝내기 챌린지 - GoF 디자인 패턴

조드래곤나인 2023. 7. 16. 15:11

 

출처: 에릭 감마 , 리처드 헬름 , 랄프 존슨 , 존 블리시디스. 『Gof의 디자인 패턴』. 김정아(역). 프로텍미디어, 2015.

 

 

[10일차] 탬플릿 메소드(Template Method)
행동 패턴 11일만에 끝내기 챌린지 - GoF 디자인 패턴

타입스크립트로 설명하는 GoF 디자인 패턴의 행동 패턴 11일만에 끝내기 챌린지

 

 

탬플릿 메소드란?

객체의 연산에는 알고리즘의 뼈대만을 정의하고
각 단계에서 수행할 구체적 처리는 서브클래스쪽으로 미루는 패턴이다.
알고리즘의 구조 자체는 그대로 놔둔 채
알고리즘 각 단계의 처리를 서브클래스에서 재정의할 수 있게 한다.

 

 

활용성

1) 어떤 한 알고리즘을 이루는 부분 중 변하지 않는 부분을 한 번 정의해 놓고
다양해질 수 있는 부분은 서브클래스에서 정의할 수 있도록 남겨두고자 할 때

2) 서브클래스 사이의 공통적인 행동을 추출하여
하나의 공통 클래스에 몰아둠으로써 코드 중복을 피하고 싶을 때

3) 템플릿 메서드가 어떤 특정한 시점에 '훅' 연산을 호출하도록 정의함으로써
그 특정 시점에서만 서브클래스의 확장을 제어하고 싶을 때

 

 

구조 및 구현

abstract class AbstractClass {
    abstract primitiveOperation1(): void
    abstract primitiveOperation2(): void

    templateMethod() {
        this.primitiveOperation1()
        console.log('Something')
        this.primitiveOperation2()
    }
}

class ConcreteClass extends AbstractClass {
    primitiveOperation1() {
        console.log('primitiveOperation1')
    }
    primitiveOperation2() {
        console.log('primitiveOperation2')
    }
}
 
class Main {
    constructor() {
        const concreteClass = new ConcreteClass()
        concreteClass.templateMethod()

        // primitiveOperation1
        // Something
        // primitiveOperation2
    }
}
 

 


 

 

공식 기술블로그 링크

더넥스트웹리서치랩

웹 클라이언트 기술을 전문적으로 연구하고 자료를 발행하는 기술 블로그를 운영합니다.

the-next-web-research-lab.github.io

 

728x90