CodeDeck

🤖

본 콘텐츠의 이미지 및 내용은 AI로 생성되었습니다.

⚠️

본 콘텐츠의 이미지 및 내용을 무단으로 복제, 배포, 수정하여 사용할 경우 저작권법에 의해 법적 제재를 받을 수 있습니다.

이미지 로딩 중...

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

CodeDeck AI

2025. 11. 8. · 26 Views

Template Method Pattern 기초부터 심화까지

객체지향 디자인 패턴 중 하나인 Template Method Pattern의 핵심 개념부터 실무 활용까지 단계별로 학습합니다. 알고리즘의 골격을 정의하고 세부 구현을 서브클래스에 위임하는 강력한 패턴입니다.

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

들어가며

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

목차

  1. Template_Method_패턴_기본_구조
  2. 구체적인_구현_클래스
  3. 다양한_구현체_활용
  4. Hook_메서드_활용
  5. 실전_예제_보고서_생성기
  6. HTML_보고서_구현
  7. Markdown_보고서_구현
  8. 템플릿_메서드_with_Validation
  9. 결제_처리_시스템_예제
  10. 신용카드_결제_구현
  11. 전략_패턴과의_비교
  12. 실무_활용_팁

1. Template Method 패턴 기본 구조

개요

Template Method Pattern은 추상 클래스에서 알고리즘의 골격을 정의하고, 일부 단계를 서브클래스에서 구현하도록 하는 패턴입니다.

코드 예제

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

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

설명

추상 클래스에서 process() 메서드가 알고리즘의 전체 흐름을 정의하고, 구체적인 단계들은 서브클래스에서 구현합니다.

2. 구체적인 구현 클래스

개요

추상 클래스를 상속받아 각 단계의 구체적인 구현을 제공합니다. CSV와 JSON 데이터를 처리하는 두 가지 구현체를 만들어봅니다.

코드 예제

class CSVProcessor extends DataProcessor {
  readData(): void {
    console.log('Reading CSV file...');
  }
  processData(): void {
    console.log('Processing CSV data...');
  }
  saveData(): void {
    console.log('Saving to CSV...');
  }
}

설명

DataProcessor를 상속받아 CSV 파일 처리에 특화된 구체적인 구현을 제공합니다.

3. 다양한 구현체 활용

개요

동일한 템플릿 메서드를 사용하지만 다른 방식으로 데이터를 처리하는 또 다른 구현체를 만들 수 있습니다.

코드 예제

class JSONProcessor extends DataProcessor {
  readData(): void {
    console.log('Reading JSON file...');
  }
  processData(): void {
    console.log('Parsing JSON data...');
  }
  saveData(): void {
    console.log('Saving to JSON...');
  }
}

설명

같은 인터페이스를 유지하면서 JSON 처리 방식으로 각 단계를 다르게 구현할 수 있습니다.

4. Hook 메서드 활용

개요

Hook 메서드는 선택적으로 오버라이드할 수 있는 메서드로, 기본 구현을 제공하지만 필요시 서브클래스에서 재정의할 수 있습니다.

코드 예제

abstract class Game {
  play(): void {
    this.initialize();
    this.startPlay();
    if (this.shouldShowScore()) {
      this.showScore();
    }
  }

  abstract initialize(): void;
  abstract startPlay(): void;
  shouldShowScore(): boolean { return true; }
  showScore(): void { console.log('Score displayed'); }
}

설명

shouldShowScore()는 Hook 메서드로 기본값을 제공하지만, 서브클래스에서 선택적으로 오버라이드할 수 있습니다.

5. 실전 예제 보고서 생성기

개요

다양한 형식의 보고서를 생성하는 실무 예제입니다. 헤더, 본문, 푸터의 구조는 동일하지만 내용은 다르게 구성됩니다.

코드 예제

abstract class ReportGenerator {
  generateReport(): string {
    return `${this.header()}\n${this.body()}\n${this.footer()}`;
  }

  protected abstract header(): string;
  protected abstract body(): string;
  protected footer(): string {
    return '--- End of Report ---';
  }
}

설명

보고서 생성의 전체 흐름은 고정하고, 각 섹션의 내용만 서브클래스에서 커스터마이징합니다.

6. HTML 보고서 구현

개요

ReportGenerator를 상속받아 HTML 형식의 보고서를 생성하는 구체적인 클래스를 구현합니다.

코드 예제

class HTMLReport extends ReportGenerator {
  protected header(): string {
    return '<html><head><title>Report</title></head>';
  }

  protected body(): string {
    return '<body><h1>Sales Data</h1><p>Content</p></body>';
  }

  protected footer(): string {
    return '</html>';
  }
}

설명

HTML 태그를 사용하여 각 섹션을 구현하며, footer는 오버라이드하여 HTML 닫기 태그를 추가합니다.

7. Markdown 보고서 구현

개요

동일한 템플릿을 사용하되 Markdown 형식으로 출력하는 또 다른 구현체입니다.

코드 예제

class MarkdownReport extends ReportGenerator {
  protected header(): string {
    return '# Monthly Report\n';
  }

  protected body(): string {
    return '## Sales Summary\n- Item 1\n- Item 2\n';
  }
}

const report = new MarkdownReport();
console.log(report.generateReport());

설명

Markdown 문법을 사용하여 보고서를 생성하며, footer는 기본 구현을 그대로 사용합니다.

8. 템플릿 메서드 with Validation

개요

템플릿 메서드에 검증 로직을 추가하여 더 안전한 처리 흐름을 만들 수 있습니다.

코드 예제

abstract class SecureProcessor {
  execute(): void {
    if (!this.validate()) {
      throw new Error('Validation failed');
    }
    this.preProcess();
    this.process();
    this.postProcess();
  }

  abstract validate(): boolean;
  abstract process(): void;
  preProcess(): void {}
  postProcess(): void {}
}

설명

실행 전 검증 단계를 추가하고, 전처리/후처리를 위한 Hook 메서드를 제공하여 확장성을 높입니다.

9. 결제 처리 시스템 예제

개요

실무에서 자주 사용되는 결제 처리 시스템을 Template Method Pattern으로 구현한 예제입니다.

코드 예제

abstract class PaymentProcessor {
  processPayment(amount: number): void {
    this.validateAmount(amount);
    this.authenticate();
    this.charge(amount);
    this.sendReceipt();
  }

  protected validateAmount(amount: number): void {
    if (amount <= 0) throw new Error('Invalid amount');
  }
  protected abstract authenticate(): void;
  protected abstract charge(amount: number): void;
  protected abstract sendReceipt(): void;
}

설명

결제 흐름의 공통 구조를 정의하고, 결제 수단별로 인증, 청구, 영수증 발송을 다르게 구현할 수 있습니다.

10. 신용카드 결제 구현

개요

PaymentProcessor를 상속받아 신용카드 결제 방식을 구현합니다.

코드 예제

class CreditCardPayment extends PaymentProcessor {
  protected authenticate(): void {
    console.log('Verifying card details...');
  }

  protected charge(amount: number): void {
    console.log(`Charging $${amount} to credit card`);
  }

  protected sendReceipt(): void {
    console.log('Email receipt sent');
  }
}

설명

신용카드 특유의 검증, 청구, 영수증 발송 로직을 구현하여 완전한 결제 프로세서를 만듭니다.

11. 전략 패턴과의 비교

개요

Template Method Pattern은 상속 기반이고, Strategy Pattern은 조합 기반입니다. 두 패턴의 차이점을 이해하는 것이 중요합니다.

코드 예제

// Template Method: 상속 기반
abstract class SortAlgorithm {
  sort(data: number[]): void {
    this.preProcess(data);
    this.doSort(data);
    this.postProcess(data);
  }
  abstract doSort(data: number[]): void;
  preProcess(data: number[]): void {}
  postProcess(data: number[]): void {}
}

설명

Template Method는 클래스 상속을 통해 알고리즘의 일부를 재정의하며, 컴파일 타임에 구조가 결정됩니다.

12. 실무 활용 팁

개요

Template Method Pattern을 실무에서 효과적으로 사용하기 위한 베스트 프랙티스입니다.

코드 예제

abstract class APIClient {
  async request<T>(url: string): Promise<T> {
    this.setHeaders();
    const response = await this.fetch(url);
    this.logRequest(url, response);
    return this.parse<T>(response);
  }

  protected abstract setHeaders(): void;
  protected abstract fetch(url: string): Promise<any>;
  protected abstract parse<T>(response: any): T;
  protected logRequest(url: string, response: any): void {}
}

설명

API 클라이언트처럼 공통 흐름이 있지만 세부 구현이 다른 경우에 Template Method Pattern을 활용하면 코드 재사용성과 유지보수성이 향상됩니다.

마치며

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

관련 태그

#TypeScript #DesignPattern #TemplateMethod #AbstractClass #OOP

#TypeScript#DesignPattern#TemplateMethod#AbstractClass#OOP

댓글 (0)

댓글을 작성하려면 로그인이 필요합니다.

함께 보면 좋은 카드 뉴스

UX와 협업 패턴 완벽 가이드

AI 에이전트와 사용자 간의 효과적인 협업을 위한 UX 패턴을 다룹니다. 프롬프트 핸드오프부터 인터럽트 처리까지, 현대적인 에이전트 시스템 설계의 핵심을 배웁니다.

자가 치유 및 재시도 패턴 완벽 가이드

AI 에이전트와 분산 시스템에서 필수적인 자가 치유 패턴을 다룹니다. 에러 감지부터 서킷 브레이커까지, 시스템을 스스로 복구하는 탄력적인 코드 작성법을 배워봅니다.

Feedback Loops 컴파일러와 CI/CD 완벽 가이드

컴파일러 피드백 루프부터 CI/CD 파이프라인, 테스트 자동화, 자가 치유 빌드까지 현대 개발 워크플로우의 핵심을 다룹니다. 초급 개발자도 쉽게 이해할 수 있도록 실무 예제와 함께 설명합니다.

AI 에이전트 패턴 완벽 가이드

LLM 기반 AI 에이전트를 프로덕션 환경에서 성공적으로 구축하기 위한 핵심 패턴들을 소개합니다. 튜토리얼과 실제 제품 사이의 간극을 메우고, 8가지 카테고리로 정리된 패턴들을 통해 실무에서 바로 적용할 수 있는 지식을 전달합니다.

실전 MCP 통합 프로젝트 완벽 가이드

Model Context Protocol을 활용한 실전 통합 프로젝트를 처음부터 끝까지 구축하는 방법을 다룹니다. 아키텍처 설계부터 멀티 서버 통합, 모니터링, 배포까지 운영 레벨의 MCP 시스템을 구축하는 노하우를 담았습니다.