핵심 요약
너드팩토리의 React+TypeScript 프로젝트에 redux-saga를 도입해 비동기 흐름 관리와 타입 안전성을 강화했습니다.
구현 방법
- React, TypeScript, Redux, redux-saga, typesafe-actions를 조합하여 모듈형 Redux 아키텍처를 구축
- modules/test를 예시로 actions.ts, types.ts, reducer.ts, saga.ts, index.ts로 분리하고, configureStore.ts에서 Saga 미들웨어를 적용
- rootReducer와 rootSaga를 통해 saga를 중앙에서 관리하고, hooks 사용으로 컨테이너에서 간편하게 접근
- API 호출은 api.ts를 통해 axios로 처리하고, saga에서 getCheckSessionAsync의 흐름으로 비동기 로직을 관리
주요 결과
- 타임 안전성 및 디버깅 편의성 개선으로 개발 품질이 향상
- 비동기 흐름 관리가 명확해져 버그 가능성이 감소
