TypeScript로 상태 머신 구현

핵심 개념

유니온 타입과 switch문으로 타입 안전 상태 머신을 구현합니다. 각 상태와 전환을 타입으로 정의하여 잘못된 전환을 컴파일 시점에 방지합니다. 복잡한 UI 로직을 상태 머신으로 단순화합니다. 타입을 지우며 상태 안전성이 어떻게 사라지는지 확인하십시오.

코드 분석

TS📋 코드 (38줄)

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
<div style='color:#10b981; margin-bottom:12px;'>STATE MACHINE</div>
<div id='state-display' style='font-size:18px; margin-bottom:12px; color:#10b981;'>STANDBY</div>
<div id='state-log' style='font-size:11px; color:#555; margin-bottom:12px; min-height:40px;'></div>
<div style='display:flex; gap:8px; flex-wrap:wrap;'>
  <button onclick='transition("DEPLOY")' style='background:#10b981; color:#080808; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:10px;'>DEPLOY</button>
  <button onclick='transition("COMPLETE")' style='background:#22c55e; color:#080808; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:10px;'>COMPLETE</button>
  <button onclick='transition("FAIL")' style='background:#f59e0b; color:#080808; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:10px;'>FAIL</button>
  <button onclick='transition("RESET")' style='background:#333; color:#888; border:none; padding:6px 12px; cursor:pointer; font-family:monospace; font-size:10px;'>RESET</button>
</div>
<script>
  // type State = 'STANDBY' | 'ACTIVE' | 'SUCCESS' | 'FAILED'
  // type Action = 'DEPLOY' | 'COMPLETE' | 'FAIL' | 'RESET'
  let state = 'STANDBY';
  const transitions = {
    STANDBY: { DEPLOY: 'ACTIVE' },
    ACTIVE: { COMPLETE: 'SUCCESS', FAIL: 'FAILED' },
    SUCCESS: { RESET: 'STANDBY' },
    FAILED: { RESET: 'STANDBY' },
  };
  const colors = { STANDBY:'#888', ACTIVE:'#f59e0b', SUCCESS:'#22c55e', FAILED:'#10b981' };

  function transition(action) {
    const next = transitions[state]?.[action];
    if (!next) { addLog(`[INVALID] ${state} → ${action} 전환 불가`); return; }
    addLog(`[TRANSITION] ${state} → ${next}`);
    state = next;
    document.getElementById('state-display').textContent = state;
    document.getElementById('state-display').style.color = colors[state];
  }

  function addLog(msg) {
    const el = document.createElement('div');
    el.textContent = msg; el.style.color = '#555'; el.style.fontSize = '11px';
    document.getElementById('state-log').prepend(el);
  }
</script>
</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 TS '상태 머신' 코드에서
타입 에러·any 남용·타입 안전성 누락을 찾아
엄격한 타입으로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'상태 머신'를 실무에서 사용하는
패턴 3가지를 비교표로 보여주고
각각의 적합한 케이스를 알려줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 TS '상태 머신' 관련 코드 전체의 타입 구조를
분석하고 제네릭·유틸리티 타입으로
개선할 포인트를 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

TypeScript '상태 머신'를 꼭 써야 하는지
개발 속도 vs 안전성 관점에서
솔직하게 평가해줘.

⭐ 이것만 기억하세요

TypeScript로 상태 머신 구현은 이 3가지만 확실히 잡으세요

1.상태 전이를 문자열 비교로 관리하면 허용되지 않는 전이(예: 결제완료→장바구니)가 런타임에서야 발견됩니다

2.유니온 타입으로 상태를 정의하고, 조건부 타입으로 각 상태에서 가능한 전이만 허용하면 잘못된 전이를 컴파일 타임에 차단합니다

3.다음 챕터에서 타입 안전한 이벤트 시스템을 구현합니다

💬 이 챕터 질문 보기

TS · CH.21 — 질문하거나 답변을 확인하세요

→

진행도 21 / 34

← 커리큘럼으로 ← 목록으로 (TypeScript)