TypeScript로 리액티브 스토어 구현

핵심 개념

제네릭 스토어 패턴으로 상태를 중앙 관리합니다. 구독/발행 패턴으로 상태 변화를 전파합니다. 불변 업데이트 패턴으로 예측 가능한 상태 관리를 구현합니다. 스토어를 지우며 반응형 시스템이 어떻게 사라지는지 확인하십시오.

코드 분석

TS📋 코드 (6줄)

REACTIVE STORE
STANDBY · 0 UNITS

  ADD T-800
  ADD T-1000
  CLEAR

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.전역 상태를 일반 객체로 관리하면 값이 바뀌어도 UI가 자동으로 업데이트되지 않습니다

2.Proxy로 상태 접근을 가로채고, 구독 패턴으로 변경을 통지하면 프레임워크 없이도 반응형 상태 관리가 됩니다

3.다음 챕터에서 실행 취소·재실행을 가능하게 하는 커맨드 패턴을 구현합니다

진행도 32 / 34