Command Pattern 디자인 패턴 완벽 가이드

실행될 기능을 캡슐화하여 재사용성과 확장성을 높이는 Command Pattern의 핵심 개념을 초급 개발자도 쉽게 이해할 수 있도록 실전 예제와 함께 설명합니다.

---

---

들어가며

이 글에서는 Command Pattern 디자인 패턴 완벽 가이드에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Command_인터페이스_기본_구조
2. 구체적인_Command_클래스_구현
3. Invoker_리모컨_구현
4. Command_Pattern_사용_예제
5. 여러_명령_관리하기
6. Undo_기능_구현
7. 복합_명령_MacroCommand
8. 실전_예제_텍스트_에디터
9. 텍스트_명령_구현
10. Command_Pattern_장점

---

1. Command 인터페이스 기본 구조

개요

Command Pattern의 핵심은 명령을 객체로 캡슐화하는 것입니다. 모든 명령은 execute 메서드를 구현해야 합니다.

코드 예제

interface Command {
  execute(): void;
  undo(): void;
}

class Light {
  on() { console.log('불이 켜졌습니다'); }
  off() { console.log('불이 꺼졌습니다'); }
}

설명

Command 인터페이스는 실행(execute)과 취소(undo) 메서드를 정의하며, 모든 구체적인 명령 클래스는 이를 구현합니다.

---

2. 구체적인 Command 클래스 구현

개요

Command 인터페이스를 구현하는 구체적인 명령 클래스를 만듭니다. 실제 작업을 수행할 객체(Receiver)를 참조합니다.

코드 예제

class LightOnCommand implements Command {
  constructor(private light: Light) {}

  execute(): void {
    this.light.on();
  }

  undo(): void {
    this.light.off();
  }
}

설명

LightOnCommand는 Light 객체를 받아서 불을 켜는 명령을 캡슐화합니다. undo 메서드로 작업을 되돌릴 수 있습니다.

---

3. Invoker 리모컨 구현

개요

Invoker는 명령을 실행하는 주체입니다. 어떤 명령인지 알 필요 없이 execute 메서드만 호출하면 됩니다.

코드 예제

class RemoteControl {
  private command?: Command;

  setCommand(command: Command) {
    this.command = command;
  }

  pressButton() {
    this.command?.execute();
  }
}

설명

RemoteControl은 Command 객체를 설정받아 버튼을 누르면 해당 명령을 실행합니다. 명령의 구체적인 내용은 알 필요가 없습니다.

---

4. Command Pattern 사용 예제

개요

실제로 Command Pattern을 사용하여 리모컨으로 불을 제어하는 예제입니다.

코드 예제

const light = new Light();
const lightOn = new LightOnCommand(light);

const remote = new RemoteControl();
remote.setCommand(lightOn);
remote.pressButton(); // "불이 켜졌습니다"

설명

명령 객체를 생성하고 리모컨에 설정한 후, 버튼을 누르면 명령이 실행됩니다. 명령과 실행 로직이 분리되어 있습니다.

---

5. 여러 명령 관리하기

개요

여러 개의 명령을 관리하고 실행할 수 있습니다. 각 버튼마다 다른 명령을 할당할 수 있습니다.

코드 예제

class MultiRemote {
  private commands: Command[] = [];

  addCommand(command: Command) {
    this.commands.push(command);
  }

  executeAll() {
    this.commands.forEach(cmd => cmd.execute());
  }
}

설명

여러 명령을 배열로 관리하고 한 번에 모두 실행할 수 있습니다. 매크로 기능처럼 여러 작업을 순서대로 실행합니다.

---

6. Undo 기능 구현

개요

Command Pattern의 강력한 기능 중 하나는 실행 취소(Undo)입니다. 명령 히스토리를 관리하여 되돌리기가 가능합니다.

코드 예제

class UndoableRemote {
  private history: Command[] = [];

  execute(command: Command) {
    command.execute();
    this.history.push(command);
  }

  undo() {
    this.history.pop()?.undo();
  }
}

설명

실행한 명령을 히스토리에 저장하고, undo 호출 시 마지막 명령의 undo 메서드를 실행하여 작업을 되돌립니다.

---

7. 복합 명령 MacroCommand

개요

여러 개의 명령을 하나의 명령으로 묶어서 실행하는 매크로 명령입니다.

코드 예제

class MacroCommand implements Command {
  constructor(private commands: Command[]) {}

  execute(): void {
    this.commands.forEach(cmd => cmd.execute());
  }

  undo(): void {
    this.commands.reverse().forEach(cmd => cmd.undo());
  }
}

설명

여러 명령을 배열로 받아 순서대로 실행하고, undo 시에는 역순으로 되돌립니다. 복잡한 작업을 하나의 명령으로 관리할 수 있습니다.

---

8. 실전 예제 텍스트 에디터

개요

텍스트 에디터의 입력, 삭제 기능을 Command Pattern으로 구현한 실전 예제입니다.

코드 예제

class TextEditor {
  private text = '';

  insert(str: string) { this.text += str; }
  delete(length: number) {
    this.text = this.text.slice(0, -length);
  }
  getText() { return this.text; }
}

설명

TextEditor는 실제 작업을 수행하는 Receiver 역할을 합니다. 텍스트 삽입과 삭제 기능을 제공합니다.

---

9. 텍스트 명령 구현

개요

텍스트 에디터의 삽입과 삭제 작업을 Command 객체로 캡슐화합니다.

코드 예제

class InsertCommand implements Command {
  constructor(
    private editor: TextEditor,
    private text: string
  ) {}

  execute() { this.editor.insert(this.text); }
  undo() { this.editor.delete(this.text.length); }
}

설명

삽입할 텍스트와 에디터를 받아서 실행 시 텍스트를 추가하고, undo 시 해당 길이만큼 삭제합니다.

---

10. Command Pattern 장점

개요

Command Pattern을 사용하면 얻을 수 있는 주요 이점들입니다.

코드 예제

// 1. 명령과 실행 로직 분리
// 2. Undo/Redo 기능 쉽게 구현
// 3. 명령 큐잉, 로깅 가능
// 4. 새로운 명령 추가 시 기존 코드 수정 불필요

const editor = new TextEditor();
const cmd = new InsertCommand(editor, 'Hello');

설명

요청을 객체로 캡슐화하여 유연성을 높이고, 작업 취소/재실행, 로깅 등 다양한 기능을 쉽게 구현할 수 있습니다.

---

마치며

이번 글에서는 Command Pattern 디자인 패턴 완벽 가이드에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#TypeScript #CommandPattern #DesignPattern #OOP #SoftwareArchitecture