diff --git "a/ryongtai/07.\354\226\264\353\214\221\355\204\260_\355\215\274\354\202\254\353\223\234.md" "b/ryongtai/07.\354\226\264\353\214\221\355\204\260_\355\215\274\354\202\254\353\223\234.md"
new file mode 100644
index 0000000..d1c7a7f
--- /dev/null
+++ "b/ryongtai/07.\354\226\264\353\214\221\355\204\260_\355\215\274\354\202\254\353\223\234.md"
@@ -0,0 +1,1330 @@
+# 커맨드 패턴
+
+## 커맨드 패턴이란?
+
+### 1. 커맨트 패턴이 해결하려는 근본 문제 : “요청의 객체화”
+
+> 커맨드 패턴은 ***“요청(명령) 자체를 객체로 만듬”***
+> 
+
+보통 프로그래밍에서 “무언가를 실행한다”는 것은 메서드로 호출하는 것.
+→ 호출은 즉시 실행되고, 실행되면 끝.
+
+하지만 실무에서는 실행 자체를 나중으로 미루거나, 큐에 넣거나, 되돌리거나, 기록해야 하는 상황이 존재
+
+매서드 호출은 “행위”
+→ 저장할 수 없고, 큐에 넣을 수 없고, 되돌릴 수 없음
+
+하지만, 객체는 
+→ 저장할 수 있고, 전달할 수 있고, 큐에 넣을 수 있고, 로그로 남길 수 있음
+
+즉, 커맨드 패턴은 바로 이 ***“실행할 행위를 객체로 캡슐화 하는 것”***
+
+### 2. 커맨드 패턴이 없다면? : 호출자와 실행자의 강결합
+
+리모컨 예제
+
+```java
+class RemoteControl {
+  private light: Light;
+  private fan: CeilingFan;
+  private aircon: AirConditioner;
+  private audio: AudioSystem;
+
+  pressButton(slot: number) {
+    if (slot === 0) {
+      this.light.on();
+    } else if (slot === 1) {
+      this.fan.high();
+    } else if (slot === 2) {
+      this.aircon.setTemperature(24);
+      this.aircon.on();
+    } else if (slot === 3) {
+      this.audio.setVolume(50);
+      this.audio.play();
+    }
+    // ... 슬롯이 추가될 때마다 분기 추가
+  }
+}
+```
+
+문제는..
+
+1. 리모컨이 모든 가전제품의 구체적인 동작 방식을 알고 있음
+    1. 호출자(invoker)가 각 가전제품이라는 실행자(Receiver)의 세부 구현에 강하게 결합되어 있음.
+2. 새 가전제품을 추가할 때마다 리모컨 코드를 수정
+    1. 새 가전제품이 추가되면 분기를 추가 → 전략 패턴에서처럼 OCP 위반
+3. 실행 취소(Undo)가 극도로 어려움
+    1. 가전 제품마다 실행 취소 방식이 다름 → `if-else` 지옥
+4. 매크로(여러 동작을 한 번에 실행)를 구현하기 어려움
+
+> 즉, 문제는..
+→ *“무엇을 실행할 것인가”*라는 정보가 리모컨의 코드 안에 있다는 것
+→ 실행할 행위가 코드로만 존재한다는 것
+> 
+
+### 3. 커맨드 패턴의 핵심 통찰 : “행위를 객체로 만들자”
+
+> ***"메서드 호출을 객체로 감싸면, 그 호출을 저장하고, 전달하고, 큐에 넣고, 되돌릴 수 있다."***
+> 
+
+예시를 들면,
+
+- 직접 메서드 호출
+    - 손님이 직접 주방에 가서 “파스타 만들어주세요”라고 주문
+- 커맨드 객체 방식
+    - 주문서 작성 → 웨이터가 주문서를 주방에 전달
+    - 웨이터는 조리법을 모름, 주방장은 주문자를 모름
+    - 주문서가 둘 사이를 분리
+
+> 이 **주문서**가 바로 커맨드 객체!
+*→ 주문서는 물리적 객체이므로 순서대로 쌓을 수 있고 (큐)
+→ 취소 도장을 찍을 수 있고 (Undo)
+→ 기록으로 남길 수 있음 (로깅)*
+> 
+
+### 4. 커맨드 패턴의 구조적 해결
+
+**커맨드 패턴의 역할**
+
+- **Command(인터페이스)**
+    - “실행할 수 있는 것”이라는 계약
+    - `execute()`와 선택적으로 `undo()`를 정의
+- **ConcreteCommand(구현체)**
+    - 특정 Receiver의 특정 동작을 캡슐화한 객체
+    - “이 조명을 켜라”라는 구체적 명령
+- **Receiver(수신자)**
+    - 실제 작업을 수행하는 객체 (가전제품)
+- **Invoker(호출자)**
+    - 커맨드를 저장하고 실행을 촉발하는 객체 (리모컨)
+    - Receiver가 누군지 전혀 모름
+
+```java
+// Command 인터페이스
+interface Command {
+  execute(): void;
+  undo(): void;
+}
+
+// Receiver들 — 실제 동작을 수행하는 객체들
+class Light {
+  constructor(private location: string) {}
+  on() { console.log(`${this.location} 조명 켜짐`); }
+  off() { console.log(`${this.location} 조명 꺼짐`); }
+}
+
+class CeilingFan {
+  private speed = 0;
+
+  constructor(private location: string) {}
+
+  high() { this.speed = 3; console.log(`${this.location} 선풍기 강풍`); }
+  medium() { this.speed = 2; console.log(`${this.location} 선풍기 중풍`); }
+  low() { this.speed = 1; console.log(`${this.location} 선풍기 약풍`); }
+  off() { this.speed = 0; console.log(`${this.location} 선풍기 꺼짐`); }
+  getSpeed() { return this.speed; }
+}
+
+// ConcreteCommand들 — 행위를 객체로 캡슐화
+class LightOnCommand implements Command {
+  constructor(private light: Light) {}
+  execute() { this.light.on(); }
+  undo() { this.light.off(); }  // 켜기의 반대는 끄기
+}
+
+class LightOffCommand implements Command {
+  constructor(private light: Light) {}
+  execute() { this.light.off(); }
+  undo() { this.light.on(); }  // 끄기의 반대는 켜기
+}
+
+class CeilingFanHighCommand implements Command {
+  private prevSpeed = 0;
+
+  constructor(private fan: CeilingFan) {}
+
+  execute() {
+    this.prevSpeed = this.fan.getSpeed();  // 이전 상태 저장
+    this.fan.high();
+  }
+
+  undo() {
+    // 이전 속도로 복원 — 커맨드 객체가 상태를 기억
+    switch (this.prevSpeed) {
+      case 3: this.fan.high(); break;
+      case 2: this.fan.medium(); break;
+      case 1: this.fan.low(); break;
+      case 0: this.fan.off(); break;
+    }
+  }
+}
+
+// NoCommand — 널 객체 패턴 (빈 슬롯을 위한 기본 커맨드)
+class NoCommand implements Command {
+  execute() {}
+  undo() {}
+}
+
+// Invoker — 커맨드를 저장하고 실행만 촉발
+class RemoteControl {
+  private onCommands: Command[];
+  private offCommands: Command[];
+  private lastCommand: Command;
+
+  constructor(private slotCount: number) {
+    const noCommand = new NoCommand();
+    this.onCommands = Array(slotCount).fill(noCommand);
+    this.offCommands = Array(slotCount).fill(noCommand);
+    this.lastCommand = noCommand;
+  }
+
+  setCommand(slot: number, onCommand: Command, offCommand: Command) {
+    this.onCommands[slot] = onCommand;
+    this.offCommands[slot] = offCommand;
+  }
+
+  pressOn(slot: number) {
+    this.onCommands[slot].execute();
+    this.lastCommand = this.onCommands[slot];
+  }
+
+  pressOff(slot: number) {
+    this.offCommands[slot].execute();
+    this.lastCommand = this.offCommands[slot];
+  }
+
+  pressUndo() {
+    this.lastCommand.undo();
+  }
+}
+```
+
+- `RemoteControl`은
+    - `Light`도 `CeilingFan`도 전혀 모름
+    - `Command` 인터페이스만 앎
+    - `execute()`를 호출할 뿐, 그 안에서 무슨 일이 일어나는지 관심 x
+
+```java
+// 사용
+const remote = new RemoteControl(3);
+
+const livingRoomLight = new Light("거실");
+const bedroomFan = new CeilingFan("침실");
+
+remote.setCommand(0,
+  new LightOnCommand(livingRoomLight),
+  new LightOffCommand(livingRoomLight),
+);
+
+remote.setCommand(1,
+  new CeilingFanHighCommand(bedroomFan),
+  new CeilingFanOffCommand(bedroomFan),
+);
+
+remote.pressOn(0);    // "거실 조명 켜짐"
+remote.pressOn(1);    // "침실 선풍기 강풍"
+remote.pressUndo();   // 선풍기가 이전 상태로 복원
+```
+
+새 가전제품을 추가하려면?
+→ 새 Command 클래스를 만들고, `setCommand()`로 등록하면 된다
+→ `RemoteControl`은 한 글자도 수정하지 않음
+
+### 5. 매크로 커맨드 : 커맨드의 조합
+
+커맨드는 객체라서 여러 커맨드를 하나의 커맨드로 묶는 것이 가능
+
+```java
+class MacroCommand implements Command {
+  constructor(private commands: Command[]) {}
+
+  execute() {
+    this.commands.forEach(cmd => cmd.execute());
+  }
+
+  undo() {
+    // 역순으로 되돌림
+    [...this.commands].reverse().forEach(cmd => cmd.undo());
+  }
+}
+
+// "외출 모드" 매크로: 조명 끄기 + 선풍기 끄기 + 에어컨 끄기
+const goOutMacro = new MacroCommand([
+  new LightOffCommand(livingRoomLight),
+  new CeilingFanOffCommand(bedroomFan),
+  new AirconOffCommand(aircon),
+]);
+
+remote.setCommand(6, goInMacro, goOutMacro);
+remote.pressOff(6);  // 세 가지가 한꺼번에 실행
+remote.pressUndo();  // 세 가지가 역순으로 되돌려짐
+```
+
+<aside>
+💡
+
+이것은 **데코레이터** 패턴에서 본 “`is-a` 와 `has-a` 의 공존”과 비슷한 구조
+
+</aside>
+
+### 6. 커맨드 패턴이 열어주는 가능성들
+
+**큐잉(Queuing)**
+
+- 커맨드 객체를 큐에 넣으면 순서대로 실행 가능
+    - 작업 큐, 태스크 스케쥴러가 이 원리
+
+**로깅/감사(Logging/Audit)**
+
+- 커맨드 객체를 실행 전에 직렬화해서 저장하면, 시스템 장애 후 저장된 커맨드들을 순서대로 재실행하여 상태 복구 가능
+    - 데이터베이스 트랜잭션 로그
+
+**실행 취소/다시 실행(Undo/Redo)**
+
+- 실행한 커맨드를 스택에 쌓아두면, 스택을 pop하면서 `undo()`를 호출해서 되돌릴 수 있음.
+    - 텍스트 에디터의 `Ctrl + Z`
+
+**트랜잭션**
+
+- 여러 커맨드를 묶어서, 모두 성공하면 확정하고 하나라도 실패하면 전부 되돌리는 트랜잭션 구현 가능
+
+> 이 것들은 행위가 메서드 호출이라는 휘발적인 형태가 아니라, 
+**객체라는 지속적인 형태로 존재하기 때문에 가능**!
+> 
+
+### (부록) 전략 패턴과의 비교
+
+> 둘 다 인터페이스를 통해 행위를 캡슐화하고, 외부에서 주입
+→ 하지만 **의도와 사용 맥락이 다르다!**
+> 
+
+- 전략 패턴
+    - 같은 목적을 달성하는 여러 알고리즘 중 하나를 선택
+    - 정렬이라는 **“목적”**은 같지만 **“방법”**이 다름
+    - 전략은 보통 **교체**를 위해 존재
+- 커맨드 패턴
+    - ***실행할 작업 자체를 객체로 포장***
+    - 각 작업들은 목적도 방법도 전혀 다름 (조명켜기, 온도설정, 파일저장)
+    - 커맨드는 **저장, 큐잉, 되돌리기**를 위해 존재
+
+**전략 패턴**의 초점이 **“어떻게(how)”**라면, 
+**커맨드 패턴**의 초점은 **“무엇을(what)”**임
+
+**전략**은 *알고리즘의 교체 가능성*에 관심이 있고,
+**커맨드**는 ***작업 자체의 일급 객체화***에 관심이 있음
+
+### (부록) 앞선 패턴들과의 관계
+
+- 전략 패턴
+    - “행위의 캡슐화”라는 공통점은 있지만
+    - 전략은 교체를 위해,
+    - 커맨드는 객체화를 위해 캡슐화
+- 옵저버
+    - “분리”라는 공통점
+        - Subject/Observer vs Invoker/Receiver
+    - 옵저버의 분리는 1:N 통지를 위해,
+    - 커맨드는 행위의 지연/저장/되돌리기를 위해
+- 데코레이터
+    - 매크로 커맨드는 데코레이터의 중첩과 유사한 구조
+- 팩토리
+    - 둘이 결합해 커맨드 객체의 생성을 팩토리에 위임 가능
+
+### 마무리…
+
+> 커맨드 패턴은 *행위를 “일급 시민”으로 만든다*
+> 
+
+프로그래밍에서 “일급 시민”이란 
+
+- 변수에 할당할 수 있고,
+- 함수의 인자로 전달할 수 있고,
+- 함수의 반환값이 될 수 있음
+
+전통적인 OOP에서 “메서드 호출”은 일급 시민이 아님
+→ *커맨드 패턴은 **메서드 호출을 객체로 감싸서 일급 시민으로 승격** 시킴*
+
+JS에서는 함수 자체가 일급 시민이므로,
+이 “승격”이 언어 수준에서 이미 이루어져 있음
+
+→ *프론트엔드에서 커맨드 패턴이 전통적인 클래스 기반 형태 대신
+함수, 액션 객체, 이벤트라는 형태로 나타나는 이유*
+
+## 실무 적용 - 전통적 프로그래밍 관점
+
+### 커맨드 패턴이 없다면,,,? - Undo가 없다면..
+
+텍스트 에디터 예시
+
+```java
+class TextEditor {
+    private StringBuilder content = new StringBuilder();
+
+    void insertText(int position, String text) {
+        content.insert(position, text);
+    }
+
+    void deleteText(int position, int length) {
+        content.delete(position, position + length);
+    }
+
+    void replaceText(int position, int length, String newText) {
+        content.replace(position, position + length, newText);
+    }
+
+    // Undo를 구현하려면?
+    // 💣 "어떤 메서드가 어떤 인자로 호출됐는지"를 기억해야 함
+    // 💣 "되돌리려면 어떤 메서드를 어떤 인자로 호출해야 하는지"도 알아야 함
+    // 💣 삭제를 되돌리려면 삭제된 텍스트를 어딘가에 저장해두어야 함
+    // → 이 모든 것을 에디터 클래스 안에서 관리하면 폭발적으로 복잡해짐
+}
+```
+
+- Undo가 어려운 근본적 이유는, 
+→ 메서드 호출은 실행되면 사라지기 때문
+- `deleteText(5, 3)`이 호출되면 텍스트가 삭제되지만, “5번 위치에서 3글자를 삭제 했다”는 사실과 “삭제된 글자가 무엇이었는가”라는 정보는 어디에도 남지 않음
+
+### 1. 적용 : 모든 작업을 객체로 기록
+
+```java
+// Command 인터페이스
+interface EditorCommand {
+    void execute();
+    void undo();
+    String describe();  // 로깅/감사용
+}
+
+// Receiver — 실제 텍스트 조작을 수행
+class TextBuffer {
+    private StringBuilder content = new StringBuilder();
+
+    void insert(int position, String text) {
+        content.insert(position, text);
+    }
+
+    void delete(int position, int length) {
+        content.delete(position, position + length);
+    }
+
+    String getSubstring(int position, int length) {
+        return content.substring(position, position + length);
+    }
+
+    String getContent() { return content.toString(); }
+}
+
+// ConcreteCommand — 삽입 명령
+class InsertCommand implements EditorCommand {
+    private final TextBuffer buffer;
+    private final int position;
+    private final String text;
+
+    InsertCommand(TextBuffer buffer, int position, String text) {
+        this.buffer = buffer;
+        this.position = position;
+        this.text = text;
+    }
+
+    void execute() {
+        buffer.insert(position, text);
+    }
+
+    void undo() {
+        // 삽입의 반대는 삭제
+        buffer.delete(position, text.length());
+    }
+
+    String describe() {
+        return String.format("INSERT '%s' at position %d", text, position);
+    }
+}
+
+// ConcreteCommand — 삭제 명령
+class DeleteCommand implements EditorCommand {
+    private final TextBuffer buffer;
+    private final int position;
+    private final int length;
+    private String deletedText;  // 되돌리기 위해 삭제된 텍스트를 기억
+
+    DeleteCommand(TextBuffer buffer, int position, int length) {
+        this.buffer = buffer;
+        this.position = position;
+        this.length = length;
+    }
+
+    void execute() {
+        // 삭제 전에 텍스트를 저장해둠 — Undo의 핵심
+        this.deletedText = buffer.getSubstring(position, length);
+        buffer.delete(position, length);
+    }
+
+    void undo() {
+        // 저장해둔 텍스트를 원래 위치에 복원
+        buffer.insert(position, deletedText);
+    }
+
+    String describe() {
+        return String.format("DELETE %d chars '%s' at position %d",
+            length, deletedText, position);
+    }
+}
+
+// Invoker — 커맨드 실행과 히스토리 관리
+class EditorInvoker {
+    private final Deque<EditorCommand> undoStack = new ArrayDeque<>();
+    private final Deque<EditorCommand> redoStack = new ArrayDeque<>();
+
+    void executeCommand(EditorCommand command) {
+        command.execute();
+        undoStack.push(command);
+        redoStack.clear();  // 새 작업 실행 시 redo 히스토리 초기화
+    }
+
+    void undo() {
+        if (undoStack.isEmpty()) return;
+        EditorCommand command = undoStack.pop();
+        command.undo();
+        redoStack.push(command);  // redo를 위해 보관
+    }
+
+    void redo() {
+        if (redoStack.isEmpty()) return;
+        EditorCommand command = redoStack.pop();
+        command.execute();
+        undoStack.push(command);
+    }
+
+    List<String> getHistory() {
+        return undoStack.stream()
+            .map(EditorCommand::describe)
+            .collect(Collectors.toList());
+    }
+}
+```
+
+사용하면,
+
+```java
+TextBuffer buffer = new TextBuffer();
+EditorInvoker editor = new EditorInvoker();
+
+editor.executeCommand(new InsertCommand(buffer, 0, "Hello"));
+// buffer: "Hello"
+
+editor.executeCommand(new InsertCommand(buffer, 5, " World"));
+// buffer: "Hello World"
+
+editor.executeCommand(new DeleteCommand(buffer, 5, 6));
+// buffer: "Hello"
+
+editor.undo();   // DeleteCommand.undo() → "Hello World"
+editor.undo();   // InsertCommand.undo() → "Hello"
+editor.redo();   // InsertCommand.execute() → "Hello World"
+
+editor.getHistory();
+// ["INSERT 'Hello' at position 0"]
+```
+
+- `EditorInvoker`는 `TextBuffer`의 존재를 전혀 모름
+- `EditorCommand`라는 인터페이스만 알고, `execute()`와 `undo()`만 호출
+- 새로운 동작(치환, 서식 변경 등)을 추가해도 Invoker는 수정하지 않음
+
+### 2. 작업 큐 - 커맨드를 지연 실행
+
+생성 시점과 실행 시점을 분리
+→ **작업 큐(Job Queue)**의 핵심!
+
+```java
+interface Job extends Command {
+    String getJobId();
+    int getPriority();
+}
+
+class SendEmailJob implements Job {
+    private final EmailService emailService;
+    private final String to;
+    private final String subject;
+    private final String body;
+
+    // 생성 시점: 실행에 필요한 모든 정보를 캡슐화
+    SendEmailJob(EmailService emailService, String to, String subject, String body) {
+        this.emailService = emailService;
+        this.to = to;
+        this.subject = subject;
+        this.body = body;
+    }
+
+    public void execute() {
+        // 실행 시점: 나중에 워커가 꺼내서 실행
+        emailService.send(to, subject, body);
+    }
+
+    public String getJobId() { return "email-" + UUID.randomUUID(); }
+    public int getPriority() { return 5; }
+}
+
+class ResizeImageJob implements Job {
+    public void execute() {
+        // 이미지 리사이즈 — 이메일과 전혀 다른 작업
+    }
+    // ...
+}
+
+// 작업 큐 — 어떤 Job이든 상관없이 execute()만 호출
+class JobQueue {
+    private final PriorityQueue<Job> queue;
+    private final ExecutorService workers;
+
+    void enqueue(Job job) {
+        queue.offer(job);
+    }
+
+    void processNext() {
+        Job job = queue.poll();
+        if (job != null) {
+            workers.submit(() -> {
+                try {
+                    job.execute();  // 무슨 작업인지 모름, 그냥 실행
+                } catch (Exception e) {
+                    handleFailure(job, e);
+                }
+            });
+        }
+    }
+}
+```
+
+- `JobQueue` 는 이메일을 보내는 것인지, 이미지를 처리하는 것인지 전혀 모름
+- `execute()`를 호출할 수 있는 객체를 순서대로 처리할 뿐…
+- 새로운 종류의 작업이 추가되어도 큐 코드는 수정하지 않음
+
+### 3. 트랜잭션 - 전부 성공하거나 전부 되돌리거나
+
+```java
+class TransactionCommand implements Command {
+    private final List<Command> commands;
+    private final List<Command> executedCommands = new ArrayList<>();
+
+    TransactionCommand(List<Command> commands) {
+        this.commands = commands;
+    }
+
+    void execute() {
+        try {
+            for (Command cmd : commands) {
+                cmd.execute();
+                executedCommands.add(cmd);
+            }
+        } catch (Exception e) {
+            // 하나라도 실패하면 실행된 것들을 역순으로 되돌림
+            Collections.reverse(executedCommands);
+            for (Command cmd : executedCommands) {
+                cmd.undo();
+            }
+            throw new TransactionFailedException(e);
+        }
+    }
+
+    void undo() {
+        List<Command> reversed = new ArrayList<>(executedCommands);
+        Collections.reverse(reversed);
+        for (Command cmd : reversed) {
+            cmd.undo();
+        }
+    }
+}
+
+// 주문 처리 트랜잭션: 전부 성공하거나 전부 되돌리거나
+Command orderTransaction = new TransactionCommand(List.of(
+    new DeductInventoryCommand(inventory, items),
+    new ChargePaymentCommand(paymentGateway, amount),
+    new CreateOrderCommand(orderRepository, orderData),
+    new SendConfirmationCommand(emailService, userEmail),
+));
+
+orderTransaction.execute();
+// 결제 실패 시 → 재고 감소가 자동으로 되돌려짐
+```
+
+## 실무 적용 - 프론트엔드
+
+### 프론트엔드에서 커맨드 패턴..
+
+이미 JS 함수가 그 역할을 함..
+
+하지만, 함수만으로는 부족한 경우가 있음.
+*되돌리기 위한 상태 보존, 
+직렬화 가능한 형태의 작업 기술, 
+작업 히스토리의 추적이 필요할 때,*
+→ 단순한 함수 호출을 넘어서 **커맨드 패턴의 구조**가 필요!
+
+주로, Redux의 Action과 에디터의 Undo/Redo
+
+### 1. Redux Action
+
+Redux의 Action은 커맨드 패턴의 직접적인 구현
+→ 이것을 인식하면 Redux의 설계 철학이 훨씬 명확!
+
+```tsx
+// Action = Command 객체
+// "무엇을 할 것인가"를 객체로 기술
+type Action =
+  | { type: 'todo/added'; payload: { id: string; text: string } }
+  | { type: 'todo/toggled'; payload: { id: string } }
+  | { type: 'todo/deleted'; payload: { id: string } }
+  | { type: 'todo/reordered'; payload: { fromIndex: number; toIndex: number } };
+
+// Reducer = Receiver의 execute() 로직
+// Action을 받아서 실제 상태 변경을 수행
+function todoReducer(state: TodoState, action: Action): TodoState {
+  switch (action.type) {
+    case 'todo/added':
+      return {
+        ...state,
+        todos: [...state.todos, {
+          id: action.payload.id,
+          text: action.payload.text,
+          completed: false,
+        }],
+      };
+    case 'todo/toggled':
+      return {
+        ...state,
+        todos: state.todos.map(todo =>
+          todo.id === action.payload.id
+            ? { ...todo, completed: !todo.completed }
+            : todo
+        ),
+      };
+    case 'todo/deleted':
+      return {
+        ...state,
+        todos: state.todos.filter(todo => todo.id !== action.payload.id),
+      };
+    default:
+      return state;
+  }
+}
+
+// dispatch = Invoker의 executeCommand()
+// Action 객체를 받아서 실행을 촉발
+store.dispatch({ type: 'todo/added', payload: { id: '1', text: '우유 사기' } });
+store.dispatch({ type: 'todo/toggled', payload: { id: '1' } });
+```
+
+커맨드 패턴의 4요소에 대응시키면,,
+
+- Command
+    - Action 객체(`{ type, payload }`)
+    - 실행할 작업을 데이터로 기술
+- Receiver
+    - Reducer
+    - Action을 받아서 실제 상태 변경을 수행
+- Invoker
+    - `store.dispatch()`
+    - Action을 받아서 Reducer에 전달
+    - Action이 무엇인지 모르고, 그냥 전달만 함
+- Client
+    - 컴포넌트, Hook
+    - Action 객체를 생성해서 dispatch에 넘김
+
+> Redux가 Action을 **순수 객체(plain object)**로 설계한 이유!
+*→ 객체이기 때문에 직렬화할 수 있고(`JSON.stringify`),
+→ 기록할 수 있고 (Redux DevTools의 Action 히스토리)
+→ 네트워크를 통해 전송할 수 있고(서버에 Action 로그를 보내서 디버깅)
+→ 되돌릴 수 있음 (time-travel debugging)*
+> 
+
+```tsx
+// Redux DevTools가 가능한 이유 = Action이 직렬화 가능한 커맨드 객체이기 때문
+// 모든 Action이 순서대로 기록됨
+[
+  { type: 'todo/added', payload: { id: '1', text: '우유 사기' } },
+  { type: 'todo/toggled', payload: { id: '1' } },
+  { type: 'todo/added', payload: { id: '2', text: '빵 사기' } },
+]
+// → 이 목록을 역순으로 "되돌리면" 시간 여행 디버깅
+// → 이 목록을 저장하면 세션 복구
+// → 이 목록을 다른 클라이언트에 보내면 상태 동기화
+```
+
+### 2. Undo/Redo 시스템
+
+에디터, 디자인 툴, 스트레드 시트 등..
+
+```tsx
+// Command 인터페이스
+interface EditorCommand {
+  execute(): void;
+  undo(): void;
+  description: string;
+}
+
+// 커맨드 히스토리 매니저
+class CommandHistory {
+  private undoStack: EditorCommand[] = [];
+  private redoStack: EditorCommand[] = [];
+
+  execute(command: EditorCommand) {
+    command.execute();
+    this.undoStack.push(command);
+    this.redoStack = [];  // 새 작업 시 redo 초기화
+  }
+
+  undo(): string | null {
+    const command = this.undoStack.pop();
+    if (!command) return null;
+    command.undo();
+    this.redoStack.push(command);
+    return command.description;
+  }
+
+  redo(): string | null {
+    const command = this.redoStack.pop();
+    if (!command) return null;
+    command.execute();
+    this.undoStack.push(command);
+    return command.description;
+  }
+
+  get canUndo() { return this.undoStack.length > 0; }
+  get canRedo() { return this.redoStack.length > 0; }
+}
+
+// 캔버스 드로잉 앱의 구체적인 커맨드들
+interface Shape {
+  id: string;
+  type: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+}
+
+class CanvasState {
+  shapes: Shape[] = [];
+
+  addShape(shape: Shape) { this.shapes.push(shape); }
+  removeShape(id: string) { this.shapes = this.shapes.filter(s => s.id !== id); }
+  updateShape(id: string, updates: Partial<Shape>) {
+    this.shapes = this.shapes.map(s => s.id === id ? { ...s, ...updates } : s);
+  }
+  getShape(id: string) { return this.shapes.find(s => s.id === id); }
+}
+
+// 도형 추가 커맨드
+class AddShapeCommand implements EditorCommand {
+  description: string;
+
+  constructor(private canvas: CanvasState, private shape: Shape) {
+    this.description = `Add ${shape.type}`;
+  }
+
+  execute() { this.canvas.addShape(this.shape); }
+  undo() { this.canvas.removeShape(this.shape.id); }
+}
+
+// 도형 이동 커맨드 — 이전 위치를 기억해야 함
+class MoveShapeCommand implements EditorCommand {
+  description: string;
+  private previousX: number;
+  private previousY: number;
+
+  constructor(
+    private canvas: CanvasState,
+    private shapeId: string,
+    private newX: number,
+    private newY: number,
+  ) {
+    const shape = canvas.getShape(shapeId)!;
+    this.previousX = shape.x;
+    this.previousY = shape.y;
+    this.description = `Move ${shape.type} to (${newX}, ${newY})`;
+  }
+
+  execute() { this.canvas.updateShape(this.shapeId, { x: this.newX, y: this.newY }); }
+  undo() { this.canvas.updateShape(this.shapeId, { x: this.previousX, y: this.previousY }); }
+}
+
+// 색상 변경 커맨드
+class ChangeColorCommand implements EditorCommand {
+  description: string;
+  private previousColor: string;
+
+  constructor(
+    private canvas: CanvasState,
+    private shapeId: string,
+    private newColor: string,
+  ) {
+    const shape = canvas.getShape(shapeId)!;
+    this.previousColor = shape.color;
+    this.description = `Change color to ${newColor}`;
+  }
+
+  execute() { this.canvas.updateShape(this.shapeId, { color: this.newColor }); }
+  undo() { this.canvas.updateShape(this.shapeId, { color: this.previousColor }); }
+}
+```
+
+사용,
+
+```tsx
+function useCommandHistory() {
+  const historyRef = useRef(new CommandHistory());
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  const execute = useCallback((command: EditorCommand) => {
+    historyRef.current.execute(command);
+    forceUpdate();
+  }, []);
+
+  const undo = useCallback(() => {
+    historyRef.current.undo();
+    forceUpdate();
+  }, []);
+
+  const redo = useCallback(() => {
+    historyRef.current.redo();
+    forceUpdate();
+  }, []);
+
+  return {
+    execute,
+    undo,
+    redo,
+    canUndo: historyRef.current.canUndo,
+    canRedo: historyRef.current.canRedo,
+  };
+}
+
+// 컴포넌트에서 사용
+function DrawingApp() {
+  const canvasRef = useRef(new CanvasState());
+  const { execute, undo, redo, canUndo, canRedo } = useCommandHistory();
+
+  const addRectangle = () => {
+    const shape: Shape = {
+      id: crypto.randomUUID(),
+      type: 'rectangle',
+      x: 100, y: 100,
+      width: 200, height: 150,
+      color: '#6366f1',
+    };
+    execute(new AddShapeCommand(canvasRef.current, shape));
+  };
+
+  // Ctrl+Z / Ctrl+Shift+Z 단축키
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'z') {
+        e.shiftKey ? redo() : undo();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [undo, redo]);
+
+  return (
+    <div>
+      <button onClick={addRectangle}>사각형 추가</button>
+      <button onClick={undo} disabled={!canUndo}>되돌리기</button>
+      <button onClick={redo} disabled={!canRedo}>다시 실행</button>
+      <Canvas shapes={canvasRef.current.shapes} />
+    </div>
+  );
+}
+```
+
+### 3. 이벤트 소싱 패턴 - 확장
+
+이벤트 소싱은 커맨드 패턴의 아이디어를 극한까지 밀어 붙인 것
+
+상태를 직접 저장하는 대신, 
+→ **상태를 변경하는 모든 이벤트(커맨드)를 순서대로 저장**하고,
+→ 이벤트를 처음부터 재생해서 현재 상태를 도출
+
+```tsx
+// 이벤트(커맨드)를 순서대로 기록
+type CartEvent =
+  | { type: 'item_added'; payload: { productId: string; quantity: number; price: number }; timestamp: number }
+  | { type: 'item_removed'; payload: { productId: string }; timestamp: number }
+  | { type: 'quantity_changed'; payload: { productId: string; quantity: number }; timestamp: number }
+  | { type: 'coupon_applied'; payload: { code: string; discount: number }; timestamp: number };
+
+// 이벤트 스토어
+class CartEventStore {
+  private events: CartEvent[] = [];
+
+  append(event: CartEvent) {
+    this.events.push(event);
+    this.persist(event);  // DB나 localStorage에 저장
+  }
+
+  // 이벤트를 처음부터 재생해서 현재 상태 도출
+  getCurrentState(): CartState {
+    return this.events.reduce((state, event) => {
+      switch (event.type) {
+        case 'item_added':
+          return {
+            ...state,
+            items: [...state.items, {
+              productId: event.payload.productId,
+              quantity: event.payload.quantity,
+              price: event.payload.price,
+            }],
+          };
+        case 'item_removed':
+          return {
+            ...state,
+            items: state.items.filter(i => i.productId !== event.payload.productId),
+          };
+        case 'quantity_changed':
+          return {
+            ...state,
+            items: state.items.map(i =>
+              i.productId === event.payload.productId
+                ? { ...i, quantity: event.payload.quantity }
+                : i
+            ),
+          };
+        case 'coupon_applied':
+          return { ...state, discount: event.payload.discount };
+        default:
+          return state;
+      }
+    }, { items: [], discount: 0 } as CartState);
+  }
+
+  // 특정 시점의 상태를 복원 (시간 여행)
+  getStateAt(timestamp: number): CartState {
+    const eventsUntil = this.events.filter(e => e.timestamp <= timestamp);
+    return eventsUntil.reduce(/* 위와 동일한 리듀서 */, { items: [], discount: 0 });
+  }
+
+  // 모든 변경 이력을 완벽하게 추적
+  getHistory(): CartEvent[] {
+    return [...this.events];
+  }
+
+  private persist(event: CartEvent) {
+    // localStorage, IndexedDB, 또는 서버로 전송
+  }
+}
+```
+
+- Redux 자체가 이벤트 소싱의 단순화 버전
+    - Action 로그가 이벤트 로그
+    - Reducer가 이벤트를 상태로 변환하는 프로젝트
+    - Redux DevTools의 time-travel debugging이 가능한 이유
+
+### 4. 폼 작업의 커맨드화
+
+복잡한 폼(다단계 설문, 주문 양식 등)에서
+”이전 단계로 돌아가기”도 커맨드 패턴으로 깔끔하게 구현 가능
+
+```tsx
+interface FormCommand<T> {
+  execute(state: T): T;
+  undo(state: T): T;
+  description: string;
+}
+
+class SetFieldCommand<T> implements FormCommand<T> {
+  private previousValue: any;
+  description: string;
+
+  constructor(
+    private field: keyof T,
+    private value: any,
+  ) {
+    this.description = `Set ${String(field)} = ${value}`;
+  }
+
+  execute(state: T): T {
+    this.previousValue = state[this.field];
+    return { ...state, [this.field]: this.value };
+  }
+
+  undo(state: T): T {
+    return { ...state, [this.field]: this.previousValue };
+  }
+}
+
+class AddItemCommand<T extends { items: any[] }> implements FormCommand<T> {
+  description: string;
+
+  constructor(private item: any) {
+    this.description = `Add item: ${item.name}`;
+  }
+
+  execute(state: T): T {
+    return { ...state, items: [...state.items, this.item] } as T;
+  }
+
+  undo(state: T): T {
+    return { ...state, items: state.items.slice(0, -1) } as T;
+  }
+}
+
+// 훅으로 래핑
+function useFormWithHistory<T>(initialState: T) {
+  const [state, setState] = useState(initialState);
+  const undoStack = useRef<FormCommand<T>[]>([]);
+  const redoStack = useRef<FormCommand<T>[]>([]);
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  const execute = useCallback((command: FormCommand<T>) => {
+    setState(prev => {
+      const next = command.execute(prev);
+      undoStack.current.push(command);
+      redoStack.current = [];
+      return next;
+    });
+    forceUpdate();
+  }, []);
+
+  const undo = useCallback(() => {
+    const command = undoStack.current.pop();
+    if (!command) return;
+    setState(prev => {
+      const next = command.undo(prev);
+      redoStack.current.push(command);
+      return next;
+    });
+    forceUpdate();
+  }, []);
+
+  return {
+    state,
+    execute,
+    undo,
+    redo: /* ... */,
+    canUndo: undoStack.current.length > 0,
+    history: undoStack.current.map(c => c.description),
+  };
+}
+
+// 사용
+function OrderForm() {
+  const { state, execute, undo, canUndo, history } = useFormWithHistory({
+    name: '',
+    email: '',
+    items: [],
+    shippingMethod: 'standard',
+  });
+
+  return (
+    <div>
+      <input
+        value={state.name}
+        onChange={(e) => execute(new SetFieldCommand('name', e.target.value))}
+      />
+      <button onClick={undo} disabled={!canUndo}>되돌리기</button>
+
+      {/* 변경 히스토리 표시 */}
+      <ul>
+        {history.map((desc, i) => <li key={i}>{desc}</li>)}
+      </ul>
+    </div>
+  );
+}
+```
+
+### 5. 지연 실행과 큐잉 - API 요청의 커맨드화
+
+네트워크 요청을 커맨드로 만들면
+→ 오프라인 지원, 재시도, 배치 처리가 자연스러워짐
+
+```tsx
+interface ApiCommand {
+  execute(): Promise<any>;
+  rollback?(): Promise<void>;
+  description: string;
+  retryable: boolean;
+}
+
+class CreatePostCommand implements ApiCommand {
+  description: string;
+  retryable = true;
+  private createdId: string | null = null;
+
+  constructor(private postData: { title: string; content: string }) {
+    this.description = `Create post: ${postData.title}`;
+  }
+
+  async execute() {
+    const response = await api.post('/posts', this.postData);
+    this.createdId = response.data.id;
+    return response.data;
+  }
+
+  async rollback() {
+    if (this.createdId) {
+      await api.delete(`/posts/${this.createdId}`);
+    }
+  }
+}
+
+class UpdatePostCommand implements ApiCommand {
+  description: string;
+  retryable = true;
+  private previousData: any = null;
+
+  constructor(private postId: string, private updates: Partial<Post>) {
+    this.description = `Update post: ${postId}`;
+  }
+
+  async execute() {
+    // 변경 전 데이터를 저장 (rollback용)
+    const { data: current } = await api.get(`/posts/${this.postId}`);
+    this.previousData = current;
+    return api.patch(`/posts/${this.postId}`, this.updates);
+  }
+
+  async rollback() {
+    if (this.previousData) {
+      await api.put(`/posts/${this.postId}`, this.previousData);
+    }
+  }
+}
+
+// 오프라인 큐 — 네트워크 복구 시 순서대로 실행
+class OfflineCommandQueue {
+  private queue: ApiCommand[] = [];
+  private processing = false;
+
+  enqueue(command: ApiCommand) {
+    this.queue.push(command);
+    this.persist();  // IndexedDB에 저장
+
+    if (navigator.onLine) {
+      this.processQueue();
+    }
+  }
+
+  private async processQueue() {
+    if (this.processing || this.queue.length === 0) return;
+    this.processing = true;
+
+    while (this.queue.length > 0) {
+      const command = this.queue[0];
+      try {
+        await command.execute();
+        this.queue.shift();  // 성공 시 큐에서 제거
+        this.persist();
+      } catch (error) {
+        if (command.retryable) {
+          // 재시도 가능하면 잠시 후 다시 시도
+          await new Promise(r => setTimeout(r, 5000));
+        } else {
+          this.queue.shift();  // 재시도 불가능하면 건너뜀
+        }
+      }
+    }
+
+    this.processing = false;
+  }
+
+  // 온라인 복구 시 큐 처리 시작
+  constructor() {
+    window.addEventListener('online', () => this.processQueue());
+  }
+
+  private persist() {
+    // IndexedDB에 큐 저장 — 페이지 새로고침에도 유지
+  }
+}
+
+// 사용
+const offlineQueue = new OfflineCommandQueue();
+
+function handleCreatePost(data: PostData) {
+  // 오프라인이어도 커맨드를 큐에 넣음
+  // 온라인이 되면 자동으로 실행
+  offlineQueue.enqueue(new CreatePostCommand(data));
+
+  // 낙관적 업데이트: UI에서는 즉시 반영
+  addPostToLocalState(data);
+}
+```
+
+### 6. useReducer - React
+
+`useReducer`는 커맨드 패턴의 축소판
+
+- Action이 커맨드
+- dispatch가 Invoker
+- Reducer가 Receiver
+
+```tsx
+// Action = Command 객체
+type CounterAction =
+  | { type: 'increment' }
+  | { type: 'decrement' }
+  | { type: 'increment_by'; payload: number }
+  | { type: 'reset' };
+
+// Reducer = Receiver
+function counterReducer(state: number, action: CounterAction): number {
+  switch (action.type) {
+    case 'increment': return state + 1;
+    case 'decrement': return state - 1;
+    case 'increment_by': return state + action.payload;
+    case 'reset': return 0;
+  }
+}
+
+function Counter() {
+  // dispatch = Invoker
+  const [count, dispatch] = useReducer(counterReducer, 0);
+
+  return (
+    <div>
+      <span>{count}</span>
+      {/* 클릭 시 커맨드 객체를 생성해서 Invoker에 전달 */}
+      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
+      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
+      <button onClick={() => dispatch({ type: 'increment_by', payload: 10 })}>+10</button>
+      <button onClick={() => dispatch({ type: 'reset' })}>리셋</button>
+    </div>
+  );
+}
+```
+
+### 7. 이미 쓰고 있는 커맨드 패턴들
+
+```tsx
+// document.execCommand — 브라우저 내장 커맨드 (deprecated지만 개념적으로 정확)
+document.execCommand('bold');       // 커맨드 객체: "볼드 적용"
+document.execCommand('undo');       // 커맨드 객체: "되돌리기"
+document.execCommand('insertText', false, 'hello');
+
+// History API — 네비게이션을 커맨드로
+history.pushState(state, '', '/page');  // 커맨드: 이 페이지로 이동
+history.back();                         // Undo: 이전 페이지로
+
+// requestAnimationFrame — 실행할 작업을 큐에 등록
+const commands: (() => void)[] = [];
+commands.push(() => updatePosition(element, 100, 200));
+commands.push(() => updateOpacity(element, 0.5));
+requestAnimationFrame(() => commands.forEach(cmd => cmd()));
+
+// git — 커밋이 커맨드, revert가 Undo, cherry-pick이 커맨드 재실행
+// git commit  → 변경 사항을 커맨드 객체(커밋)로 저장
+// git revert  → 특정 커맨드를 되돌리는 새 커맨드 생성
+// git log     → 커맨드 히스토리 조회
+```
+
+### 정리하자면,,,
+
+커맨드 패턴의 요소는,,
+
+- Command 인터페이스
+- ConcreteCommand 클래스
+- Invoker
+- Receiver
+
+핵심은
+
+> ***“실행할 행위를 데이터(객체)로 표현하면, 그 행위를 저장하고, 전달하고, 되돌리고, 재생할 수 있다”***
+>
\ No newline at end of file