shoptime/com.twin.app.shoptime/.docs/dispatch-async/07-changelog.md

변경 이력 (Changelog)

[2025-11-10] - 미들웨어 등록 및 문서 개선

🔧 수정 (Fixed)

store.js - panelQueueMiddleware 등록

커밋: c12cc91 [수정] panelQueueMiddleware 등록 및 문서 업데이트

문제:

• panelQueueMiddleware가 store.js에 등록되어 있지 않았음
• 큐 시스템이 작동하지 않는 치명적인 문제
• ENQUEUE_PANEL_ACTION dispatch 시 자동으로 PROCESS_PANEL_QUEUE가 실행되지 않음

해결:

// src/store/store.js
import panelQueueMiddleware from '../middleware/panelQueueMiddleware';

export const store = createStore(
  rootReducer,
  applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
);

영향:

• ✅ 큐 기반 패널 액션 시스템이 정상 작동
• ✅ 패널 액션 순서 보장
• ✅ 비동기 패널 액션 자동 처리

📝 문서 (Documentation)

README.md

• "설치 및 설정" 섹션 추가
• panelQueueMiddleware 등록 필수 사항 강조
• 등록하지 않으면 큐 시스템이 작동하지 않는다는 경고 추가

04-solution-queue-system.md

• "사전 요구사항" 섹션 추가
• 미들웨어 등록 코드 예제 포함
• src/store/store.js를 관련 파일에 추가

05-usage-patterns.md

• "초기 설정 확인사항" 체크리스트 추가
• panelQueueMiddleware 등록 여부를 최우선 확인 항목으로 배치

---

[2025-11-10] - 초기 문서 작성

✨ 추가 (Added)

문서 작성

커밋: f75860c [문서화] Dispatch 비동기 처리 순서 보장 솔루션 문서 작성

dispatch 비동기 처리 순서 보장 문제와 해결 방법을 체계적으로 정리한 문서 세트:

1. README.md

   • 전체 개요 및 목차
   • 주요 솔루션 요약
   • 관련 파일 목록
   • 커밋 히스토리

2. 01-problem.md

   • 문제 상황 및 원인 분석
   • Redux-thunk에서 dispatch 순서가 보장되지 않는 이유
   • 실제 발생 가능한 버그 시나리오
   • 기존 해결 방법의 한계

3. 02-solution-dispatch-helper.md

   • dispatchHelper.js 솔루션 설명
   • 5가지 헬퍼 함수 상세 설명:
     • createSequentialDispatch
     • createApiThunkWithChain
     • withLoadingState
     • createConditionalDispatch
     • createParallelDispatch
   • Before/After 코드 비교
   • 실제 사용 예제

4. 03-solution-async-utils.md

   • asyncActionUtils.js 솔루션 설명
   • API 성공 기준 명확화 (HTTP 200-299 + retCode 0/'0')
   • Promise 체인 보장 방법 (reject 없이 resolve만 사용)
   • 주요 함수 설명:
     • isApiSuccess
     • fetchApi
     • tAxiosToPromise
     • wrapAsyncAction
     • withTimeout
     • executeParallelAsyncActions

5. 04-solution-queue-system.md

   • 큐 기반 패널 액션 시스템 설명
   • 기본 패널 액션 (pushPanelQueued, popPanelQueued 등)
   • 비동기 패널 액션 (enqueueAsyncPanelAction)
   • API 호출 후 패널 액션 (createApiWithPanelActions)
   • 비동기 액션 시퀀스 (createAsyncPanelSequence)
   • panelQueueMiddleware 동작 원리
   • 리듀서 상태 구조

6. 05-usage-patterns.md

   • 솔루션 선택 가이드 (의사결정 플로우차트)
   • 솔루션 비교표
   • 공통 패턴 Before/After 비교
   • 실전 예제 5가지:
     • 검색 기능
     • 장바구니 추가
     • 로그인 플로우
     • 다단계 폼 제출
     • 병렬 데이터 로딩
   • 마이그레이션 가이드
   • Best Practices
   • 체크리스트

문서 통계:

• 총 6개 마크다운 파일
• 약 3,000줄
• 50개 이상의 코드 예제
• Before/After 비교 20개 이상

---

[2025-11-06] - 큐 시스템 구현

✨ 추가 (Added)

Dispatch Queue Implementation

커밋: f9290a1 [251106] fix: Dispatch Queue implementation

• asyncActionUtils.js 추가

  • Promise 기반 비동기 액션 처리
  • API 성공 기준 명확화
  • 타임아웃 지원

• queuedPanelActions.js 확장

  • 비동기 패널 액션 지원
  • API 호출 후 패널 액션 자동 실행
  • 비동기 액션 시퀀스

• panelReducer.js 확장

  • 큐 상태 관리
  • 비동기 액션 상태 추적
  • 큐 처리 통계

Queued Panel Functions

커밋: 5bd2774 [251106] feat: Queued Panel functions

• queuedPanelActions.js 초기 구현

  • 기본 큐 액션 (pushPanelQueued, popPanelQueued 등)
  • 여러 액션 일괄 큐 추가
  • 패널 시퀀스 생성

• panelQueueMiddleware.js 추가

  • 큐 액션 자동 감지
  • 순차 처리 자동 시작
  • 연속 처리 지원

• panelReducer.js 큐 기능 추가

  • 큐 상태 관리
  • 큐 처리 로직
  • 큐 통계 수집

---

[2025-11-05] - dispatch 헬퍼 함수

✨ 추가 (Added)

dispatchHelper.js

커밋: 9490d72 [251105] feat: dispatchHelper.js

Promise 체인 기반의 dispatch 순차 실행 헬퍼 함수 모음:

• createSequentialDispatch

  • 여러 dispatch를 순차적으로 실행
  • Promise 체인으로 순서 보장
  • delay 옵션 지원
  • stopOnError 옵션 지원

• createApiThunkWithChain

  • API 호출 후 dispatch 자동 체이닝
  • TAxios onSuccess/onFail 패턴 호환
  • response를 각 action에 전달
  • 에러 처리 action 지원

• withLoadingState

  • 로딩 상태 자동 관리
  • changeAppStatus 자동 on/off
  • 성공/에러 시 추가 dispatch 지원
  • loadingType 옵션

• createConditionalDispatch

  • 조건에 따라 다른 dispatch 실행
  • getState() 결과 기반 분기
  • 배열 또는 단일 action 지원

• createParallelDispatch

  • 여러 API를 병렬로 실행
  • Promise.all 사용
  • 로딩 상태 관리 옵션

---

관련 커밋 전체 목록

c12cc91 [수정] panelQueueMiddleware 등록 및 문서 업데이트
f75860c [문서화] Dispatch 비동기 처리 순서 보장 솔루션 문서 작성
f9290a1 [251106] fix: Dispatch Queue implementation
5bd2774 [251106] feat: Queued Panel functions
9490d72 [251105] feat: dispatchHelper.js

---

마이그레이션 가이드

기존 코드에서 새 솔루션으로 전환

1단계: setTimeout 패턴 제거

// Before
dispatch(action1());
setTimeout(() => {
  dispatch(action2());
}, 0);

// After
dispatch(createSequentialDispatch([action1(), action2()]));

2단계: API 패턴 개선

// Before
const onSuccess = (response) => {
  dispatch({ type: types.ACTION_1, payload: response.data });
  dispatch(action2());
};
TAxios(..., onSuccess, onFail);

// After
dispatch(createApiThunkWithChain(
  (d, gs, onS, onF) => TAxios(d, gs, ..., onS, onF),
  [
    (response) => ({ type: types.ACTION_1, payload: response.data }),
    action2()
  ]
));

3단계: 패널 액션을 큐 버전으로 전환

// Before
dispatch(pushPanel({ name: panel_names.SEARCH }));

// After
dispatch(pushPanelQueued({ name: panel_names.SEARCH }));

---

Breaking Changes

없음

모든 새로운 기능은 기존 코드와 완전히 호환됩니다:

• 기존 pushPanel, popPanel 등은 그대로 동작
• 새로운 큐 버전은 선택적으로 사용 가능
• 점진적 마이그레이션 가능

---

알려진 이슈

해결됨

1. panelQueueMiddleware 미등록 문제 (2025-11-10 해결)
   • 문제: 큐 시스템이 작동하지 않음
   • 해결: store.js에 미들웨어 등록

현재 이슈

없음

---

향후 계획

예정된 개선사항

1. 성능 최적화

   • 큐 처리 성능 모니터링
   • 대량 액션 처리 최적화

2. 에러 처리 강화

   • 더 상세한 에러 메시지
   • 에러 복구 전략

3. 개발자 도구

   • 큐 상태 시각화
   • 디버깅 도구

4. 테스트 코드

   • 단위 테스트 추가
   • 통합 테스트 추가

---

작성일: 2025-11-10 최종 수정일: 2025-11-10