이미지 로딩 중...
CodeDeck AI
2025. 11. 8. · 1 Views
Template Method Pattern 기초부터 심화까지
객체지향 디자인 패턴 중 하나인 Template Method Pattern의 핵심 개념부터 실무 활용까지 단계별로 학습합니다. 알고리즘의 골격을 정의하고 세부 구현을 서브클래스에 위임하는 강력한 패턴입니다.
들어가며
이 글에서는 Template Method Pattern 기초부터 심화까지에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.
목차
- Template_Method_패턴_기본_구조
- 구체적인_구현_클래스
- 다양한_구현체_활용
- Hook_메서드_활용
- 실전_예제_보고서_생성기
- HTML_보고서_구현
- Markdown_보고서_구현
- 템플릿_메서드_with_Validation
- 결제_처리_시스템_예제
- 신용카드_결제_구현
- 전략_패턴과의_비교
- 실무_활용_팁
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