[수정] panelQueueMiddleware 등록 및 문서 업데이트

## 코드 수정
- store.js에 panelQueueMiddleware import 및 등록
  - 큐 기반 패널 액션 시스템이 작동하기 위해 필수
  - applyMiddleware에 panelQueueMiddleware 추가

## 문서 수정
1. README.md
   - "설치 및 설정" 섹션 추가
   - panelQueueMiddleware 등록 필수 사항 명시

2. 04-solution-queue-system.md
   - "사전 요구사항" 섹션 추가
   - 미들웨어 등록 코드 예제 포함

3. 05-usage-patterns.md
   - "초기 설정 확인사항" 체크리스트 추가
   - panelQueueMiddleware 등록 여부 확인 항목 추가

## 이유
- panelQueueMiddleware가 등록되지 않으면 큐 시스템이 작동하지 않음
- ENQUEUE_PANEL_ACTION dispatch 시 자동으로 PROCESS_PANEL_QUEUE가 실행되지 않음
- 문서에 설정 방법이 명확하지 않아 사용자가 놓칠 수 있음

## 관련 파일
- src/store/store.js (수정)
- .docs/dispatch-async/README.md (수정)
- .docs/dispatch-async/04-solution-queue-system.md (수정)
- .docs/dispatch-async/05-usage-patterns.md (수정)
This commit is contained in:
Claude
2025-11-10 09:30:22 +00:00
parent f75860c8dd
commit c12cc91a39
4 changed files with 64 additions and 1 deletions

View File

@@ -6,6 +6,7 @@
- `src/actions/queuedPanelActions.js`
- `src/middleware/panelQueueMiddleware.js`
- `src/reducers/panelReducer.js`
- `src/store/store.js` (미들웨어 등록 필요)
**작성일**: 2025-11-06
**커밋**:
@@ -14,6 +15,23 @@
미들웨어 기반의 **액션 큐 처리 시스템**으로, 패널 액션들을 순차적으로 실행합니다.
## ⚠️ 사전 요구사항
큐 시스템을 사용하려면 **반드시** store에 panelQueueMiddleware를 등록해야 합니다.
**파일**: `src/store/store.js`
```javascript
import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
export const store = createStore(
rootReducer,
applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
);
```
미들웨어를 등록하지 않으면 큐에 액션이 추가되어도 자동으로 처리되지 않습니다!
## 🎯 핵심 개념
### 왜 큐 시스템이 필요한가?

View File

@@ -767,6 +767,20 @@ dispatch(fetchDataWithLoading(URLS.GET_CART, types.GET_CART));
## 체크리스트
### 초기 설정 확인사항
- [ ] **panelQueueMiddleware가 store.js에 등록되어 있는가?** (큐 시스템 사용 시 필수!)
```javascript
// src/store/store.js
import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
export const store = createStore(
rootReducer,
applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
);
```
- [ ] TAxiosPromise가 import되어 있는가? (withLoadingState 사용 시)
### 기능 구현 전 확인사항
- [ ] 패널 관련 액션인가? → 큐 시스템 사용

View File

@@ -12,6 +12,36 @@
이 문서는 Redux-thunk 환경에서 여러 개의 dispatch를 순차적으로 실행할 때 순서가 보장되지 않는 문제를 해결하기 위해 구현된 솔루션들을 정리한 문서입니다.
## ⚙️ 설치 및 설정
### 필수: panelQueueMiddleware 등록
큐 기반 패널 액션 시스템을 사용하려면 **반드시** store에 미들웨어를 등록해야 합니다.
**파일**: `src/store/store.js`
```javascript
import { applyMiddleware, combineReducers, createStore } from 'redux';
import thunk from 'redux-thunk';
import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
import panelQueueMiddleware from '../middleware/panelQueueMiddleware'; // ← 추가
// ... reducers ...
export const store = createStore(
rootReducer,
applyMiddleware(
thunk,
panelHistoryMiddleware,
autoCloseMiddleware,
panelQueueMiddleware // ← 추가 (맨 마지막에 위치)
)
);
```
**⚠️ 중요**: panelQueueMiddleware를 등록하지 않으면 큐 시스템이 작동하지 않습니다!
## 🚀 주요 솔루션
### 1. dispatchHelper.js (2025-11-05)

View File

@@ -3,6 +3,7 @@ import thunk from 'redux-thunk';
import { autoCloseMiddleware } from '../middleware/autoCloseMiddleware';
import { panelHistoryMiddleware } from '../middleware/panelHistoryMiddleware';
import panelQueueMiddleware from '../middleware/panelQueueMiddleware';
import { appDataReducer } from '../reducers/appDataReducer';
import { billingReducer } from '../reducers/billingReducer';
import { brandReducer } from '../reducers/brandReducer';
@@ -75,5 +76,5 @@ const rootReducer = combineReducers({
export const store = createStore(
rootReducer,
applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware)
applyMiddleware(thunk, panelHistoryMiddleware, autoCloseMiddleware, panelQueueMiddleware)
);