CodeDeck

🤖

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

⚠️

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

이미지 로딩 중...

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

CodeDeck AI

2025. 11. 8. · 6 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)

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

함께 보면 좋은 카드 뉴스

마이크로서비스 배포 완벽 가이드

Kubernetes를 활용한 마이크로서비스 배포의 핵심 개념부터 실전 운영까지, 초급 개발자도 쉽게 따라할 수 있는 완벽 가이드입니다. 실무에서 바로 적용 가능한 배포 전략과 노하우를 담았습니다.

Application Load Balancer 완벽 가이드

AWS의 Application Load Balancer를 처음 배우는 개발자를 위한 실전 가이드입니다. ALB 생성부터 ECS 연동, 헬스 체크, HTTPS 설정까지 실무에 필요한 모든 내용을 다룹니다. 초급 개발자도 쉽게 따라할 수 있도록 단계별로 설명합니다.

고객 상담 AI 시스템 완벽 구축 가이드

AWS Bedrock Agent와 Knowledge Base를 활용하여 실시간 고객 상담 AI 시스템을 구축하는 방법을 단계별로 학습합니다. RAG 기반 지식 검색부터 Guardrails 안전 장치, 프론트엔드 연동까지 실무에 바로 적용 가능한 완전한 시스템을 만들어봅니다.

에러 처리와 폴백 완벽 가이드

AWS API 호출 시 발생하는 에러를 처리하고 폴백 전략을 구현하는 방법을 다룹니다. ThrottlingException부터 서킷 브레이커 패턴까지, 실전에서 바로 활용할 수 있는 안정적인 에러 처리 기법을 배웁니다.

AWS Bedrock 인용과 출처 표시 완벽 가이드

AWS Bedrock의 Citation 기능을 활용하여 AI 응답의 신뢰도를 높이는 방법을 배웁니다. 출처 추출부터 UI 표시, 검증까지 실무에서 바로 사용할 수 있는 완전한 가이드입니다.