TemplateMethod 완벽 마스터

TemplateMethod의 핵심 개념과 실전 활용법

TypeScript중급
6시간
3개 항목
학습 진행률0 / 3 (0%)

학습 항목

1. TypeScript
초급
Template|Method|Pattern|기초부터|심화까지
퀴즈튜토리얼
2. TypeScript
고급
Template|Method|Pattern|디자인|패턴|마스터
퀴즈튜토리얼
3. TypeScript
고급
Template|Method|Pattern|최신|기능
퀴즈튜토리얼
1 / 3

이미지 로딩 중...

Template Method Pattern 기초부터 심화까지 - 슬라이드 1/13

Template Method Pattern 기초부터 심화까지

템플릿 메서드 패턴은 알고리즘의 구조를 정의하고 일부 단계를 서브클래스에서 구현하도록 하는 디자인 패턴입니다. 코드 재사용성을 높이고 일관된 알고리즘 구조를 유지할 수 있습니다.


카테고리:TypeScript
언어:TypeScript
난이도:beginner
메인 태그:#TypeScript
서브 태그:
#DesignPattern#TemplateMethod#OOP#AbstractClass

들어가며

이 글에서는 Template Method Pattern 기초부터 심화까지에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

  1. 템플릿_메서드_패턴_기본_구조
  2. CSV_데이터_처리_구현
  3. JSON_데이터_처리_구현
  4. 훅_메서드_활용
  5. 로깅_기능이_추가된_프로세서
  6. 조건부_실행_템플릿
  7. 게임_캐릭터_행동_패턴
  8. 전사_캐릭터_구현
  9. 마법사_캐릭터_구현
  10. 데이터_검증_파이프라인
  11. 이메일_검증기_구현
  12. 템플릿_메서드_패턴의_장점

1. 템플릿_메서드_패턴_기본_구조

개요

추상 클래스에서 알고리즘의 뼈대를 정의하고, 구체적인 단계는 추상 메서드로 선언합니다.

코드 예제

abstract class DataProcessor {
  process(): void {
    this.readData();
    this.processData();
    this.saveData();
  }

  abstract readData(): void;
  abstract processData(): void;
  abstract saveData(): void;
}

설명

process() 메서드가 템플릿 메서드로, 알고리즘의 전체 흐름을 정의합니다. 각 단계는 서브클래스에서 구현합니다.


2. CSV_데이터_처리_구현

개요

DataProcessor를 상속받아 CSV 파일을 처리하는 구체적인 클래스를 만듭니다.

코드 예제

class CSVProcessor extends DataProcessor {
  readData(): void {
    console.log('CSV 파일 읽기');
  }

  processData(): void {
    console.log('CSV 데이터 파싱');
  }

  saveData(): void {
    console.log('CSV 결과 저장');
  }
}

설명

추상 클래스의 각 단계를 CSV 파일에 맞게 구체적으로 구현합니다.


3. JSON_데이터_처리_구현

개요

같은 템플릿을 사용하면서 JSON 데이터 처리에 맞게 구현합니다.

코드 예제

class JSONProcessor extends DataProcessor {
  readData(): void {
    console.log('JSON 파일 읽기');
  }

  processData(): void {
    console.log('JSON 데이터 파싱');
  }

  saveData(): void {
    console.log('JSON 결과 저장');
  }
}

설명

동일한 알고리즘 구조를 유지하면서 JSON 처리 방식만 변경할 수 있습니다.


4. 훅_메서드_활용

개요

선택적으로 오버라이드할 수 있는 훅 메서드를 추가하여 유연성을 높입니다.

코드 예제

abstract class FlexibleProcessor {
  process(): void {
    this.beforeProcess();
    this.readData();
    this.processData();
    this.afterProcess();
  }

  beforeProcess(): void {}
  afterProcess(): void {}
  abstract readData(): void;
  abstract processData(): void;
}

설명

빈 구현을 제공하는 훅 메서드로 필요한 경우에만 오버라이드하여 사용할 수 있습니다.


5. 로깅_기능이_추가된_프로세서

개요

훅 메서드를 활용하여 전처리와 후처리 로직을 추가합니다.

코드 예제

class LoggedCSVProcessor extends FlexibleProcessor {
  beforeProcess(): void {
    console.log('처리 시작:', new Date());
  }

  readData(): void { console.log('CSV 읽기'); }
  processData(): void { console.log('CSV 처리'); }

  afterProcess(): void {
    console.log('처리 완료:', new Date());
  }
}

설명

필수 메서드는 구현하고, 훅 메서드는 필요에 따라 선택적으로 구현합니다.


6. 조건부_실행_템플릿

개요

템플릿 메서드 내에서 조건에 따라 실행 흐름을 제어할 수 있습니다.

코드 예제

abstract class ConditionalProcessor {
  process(): void {
    this.readData();
    if (this.shouldValidate()) {
      this.validate();
    }
    this.processData();
  }

  shouldValidate(): boolean { return true; }
  validate(): void { console.log('검증 수행'); }
  abstract readData(): void;
  abstract processData(): void;
}

설명

훅 메서드가 boolean을 반환하여 특정 단계의 실행 여부를 제어합니다.


7. 게임_캐릭터_행동_패턴

개요

게임에서 캐릭터의 공격 패턴을 템플릿 메서드로 구현하는 실용적인 예제입니다.

코드 예제

abstract class Character {
  attack(): void {
    this.prepareWeapon();
    this.performAttack();
    this.cooldown();
  }

  abstract prepareWeapon(): void;
  abstract performAttack(): void;
  cooldown(): void { console.log('재사용 대기'); }
}

설명

모든 캐릭터가 공통적으로 따르는 공격 순서를 정의하되, 무기 준비와 공격 방식은 각자 다르게 구현합니다.


8. 전사_캐릭터_구현

개요

Character 템플릿을 상속받아 전사의 공격 패턴을 구현합니다.

코드 예제

class Warrior extends Character {
  prepareWeapon(): void {
    console.log('검을 휘두를 준비');
  }

  performAttack(): void {
    console.log('강력한 검 공격!');
  }
}

const warrior = new Warrior();
warrior.attack();

설명

전사만의 특징적인 공격 방식을 구현하면서 전체 공격 흐름은 부모 클래스의 템플릿을 따릅니다.


9. 마법사_캐릭터_구현

개요

같은 템플릿으로 마법사의 다른 공격 스타일을 구현합니다.

코드 예제

class Mage extends Character {
  prepareWeapon(): void {
    console.log('마나 집중');
  }

  performAttack(): void {
    console.log('파이어볼 발사!');
  }
}

const mage = new Mage();
mage.attack();

설명

마법사는 전사와 다른 방식으로 공격하지만, 준비-공격-쿨다운의 흐름은 동일하게 유지됩니다.


10. 데이터_검증_파이프라인

개요

여러 단계의 검증 과정을 템플릿 메서드로 구조화합니다.

코드 예제

abstract class Validator<T> {
  validate(data: T): boolean {
    if (!this.checkFormat(data)) return false;
    if (!this.checkBusiness(data)) return false;
    this.log(data);
    return true;
  }

  abstract checkFormat(data: T): boolean;
  abstract checkBusiness(data: T): boolean;
  log(data: T): void { console.log('검증 완료'); }
}

설명

형식 검증, 비즈니스 규칙 검증, 로깅의 순서를 템플릿으로 정의하여 일관된 검증 프로세스를 보장합니다.


11. 이메일_검증기_구현

개요

Validator 템플릿을 사용하여 이메일 검증 로직을 구현합니다.

코드 예제

class EmailValidator extends Validator<string> {
  checkFormat(email: string): boolean {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  checkBusiness(email: string): boolean {
    return !email.endsWith('@temp.com');
  }
}

console.log(new EmailValidator().validate('test@example.com'));

설명

이메일의 형식과 비즈니스 규칙을 각각 검증하며, 전체 검증 흐름은 부모 클래스가 관리합니다.


12. 템플릿_메서드_패턴의_장점

개요

코드 재사용과 확장성을 높이는 템플릿 메서드 패턴의 핵심 이점을 정리합니다.

코드 예제

// ✅ 장점:
// 1. 중복 코드 제거 (알고리즘 구조는 한 곳에)
// 2. 확장에 열려있고 수정에 닫혀있음 (OCP 원칙)
// 3. 일관된 알고리즘 실행 보장
// 4. 서브클래스는 세부사항만 구현

abstract class BaseClass {
  templateMethod(): void { /* 재사용 가능한 구조 */ }
  abstract customStep(): void; /* 확장 포인트 */
}

설명

템플릿 메서드 패턴은 변하지 않는 부분과 변하는 부분을 분리하여 코드의 유지보수성과 확장성을 높입니다.


마치며

이번 글에서는 Template Method Pattern 기초부터 심화까지에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#TypeScript #DesignPattern #TemplateMethod #OOP #AbstractClass

#TypeScript#DesignPattern#TemplateMethod#OOP#AbstractClass