Javascript의 Promise 객체를 직접 만들어 본 경험이 있나요? 경험이 없다면 직접 만들 수 있나요? 타입스크립트의 제네릭을 학습하면서 Promise 객체를 직접 만들어보는 경험을 했고 이에 대한 기초 지식으로 '커맨드 패턴'이라는 개념을 알게 되었습니다.

이후에 'Javascript Promise 객체를 직접 만들어보기'라는 주제로 글을 쓸 예정인데, 이에 대한 선행 개념 정리 차원에서 커맨드 패턴에 대해 간단히 정리하고 console.log() 메서드를 먼저 만들어 보려고 합니다.

커맨드 패턴이란?

가볍게 개념부터 알아보겠습니다. 번역이 애매해서 원문을 첨부했습니다.

Command is a behavioral design pattern that turns a request into a stand-alone object that contains all information about the request. This transformation lets you pass requests as a method arguments, delay or queue a request’s execution, and support undoable operations.

출처: https://refactoring.guru/design-patterns/command

번역본을 조금 더 풀어서 설명하자면 다음과 같습니다.

커맨드 패턴은 요청을 객체의 형태로 캡슐화하여 서로 다른 요청을 매개변수화할 수 있게 해주는 행위 소프트웨어 디자인 패턴입니다. 이 패턴을 사용하면 요청 자체를 객체로 만들어 큐에 저장하거나 로그로 기록하고, 나중에 재사용할 수 있습니다.

이 글에서는 커맨드 패턴의 장점 중 "요청 자체를 객체로 표현하고, 이 객체를 별도의 호출자 객체에서 실행하므로 값(요청 객체)과 실행기(호출자)를 분리할 수 있다"는 개념에 집중합니다. '값'과 '실행기' 두 개념을 중점으로 알아보겠습니다.

console.log()를 커맨드 패턴으로 직접 만들어보기

Javascript의 console.log()는 웹 콘솔에 메시지를 출력하는 Console 객체의 내장 메서드입니다.

이 메서드를 값과 실행기를 정의하여 커맨드 패턴으로 만들어보겠습니다.

값(객체)

실행(execute) 메서드를 내장하는 커맨드 인터페이스를 선언합니다. 해당 인터페이스를 실행(implements)하여 MyConsoleLog 클래스를 선언합니다. 이 클래스의 execute() 메서드는 console.log() 메서드를 실행합니다.

// 커맨드 인터페이스
interface Command {
  execute(): void
}

// 값과 실행기를 분리하는 커맨드 클래스
class MyConsoleLog implements Command {
  constructor(private message: string) {}

  execute(): void {
    console.log(this.message)
  }
}

실행기

명령을 실행하는 클래스를 선언합니다. 커맨드를 여러 개 실행할 수 있도록 큐에 커맨드를 추가하는 addCommand() 메서드와 커맨드를 실행하는 executeCommands() 메서드를 내장하는 클래스입니다.

// 명령을 실행하는 클래스
class CommandExecutor {
  private commands: Command[] = []

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

  executeCommands(): void {
    this.commands.forEach((command) => {
      command.execute()
    })
  }
}

테스트

실행기 인스턴스를 생성하고 로그 명령을 추가한 후에 실행 메서드로 원하는 문자열을 출력합니다.

// 실행기 인스턴스 생성
const commandExecutor = new CommandExecutor()

// 로그 명령 추가
commandExecutor.addCommand(new MyConsoleLog('Hello, World!'))

// 명령 실행
commandExecutor.executeCommands()

결과(로그)

"Hello, World!"

커맨드 패턴에 대해 간단히 알아보았는데요, 다음 글에서는 커맨드 패턴을 사용해서 Promise를 구현해보도록 하겠습니다. 읽어주셔서 감사합니다!