/
https://42jerrykim.github.io/ _index.md
15편의 순수 Redux Counter/Todo 앱을 createSlice·configureStore·createAsyncThunk로 완전히 다시 작성합니다. 코드량 비교와 함께 Phase 4를 마무리하는 종합 실습입니다. 09편에서 간단히 본 미들웨어의 next(action) 체인 구조를 직접 손으로 만든 로깅·타이밍 미들웨어로 분해합니다. 미들웨어가 왜 Thunk·Saga·RTK Query 같은 비동기 도구의 공통 기반인지 설명합니다. 21편의 미들웨어 구조 위에서 redux-thunk가 정확히 무엇을 하는지 직접 구현해봅니다. thunk 함수가 action 대신 dispatch되는 원리, getState로 조건부 dispatch하는 패턴, extraArgument로 API 클라이언트를 주입하는 방법을 다룹니다. 제너레이터 함수와 yield로 사이드 이펙트를 선언적으로 기술하는 Redux Saga를 다룹니다. take·call·put·select 기본 이펙트와, all·race·fork·cancel로 동시 실행·경쟁·백그라운드 취소를 구현하는 방법을 코드로 다룹니다. 10편에서 언급한 서버 상태 전용 도구의 필요성을 RTK Query로 해결합니다. createApi로 캐싱·자동 재요청·뮤테이션을 다루고, keepUnusedDataFor·skip·useLazyQuery, React Query/SWR과의 관계까지 다룹니다. 게시글 목록·상세·댓글·좋아요 기능을 가진 블로그 앱을 RTK Query로 구현합니다. 세밀한 캐시 태그 설계, 낙관적 업데이트(optimistic update)까지 다루며 Phase 5를 마무리하는 종합 실습입니다. 15·20·25편에서 계속 써온 feature 폴더 구조가 왜 옳은 선택인지 근거를 정리하고, 파일 타입별 구조와의 비교, 배럴 파일의 함정, 공용 로직을 위한 app/shared 계층 분리 방법까지 자세히 다룹니다. 중첩된 게시글·댓글·작성자 데이터를 배열 그대로 저장할 때 생기는 중복 업데이트 문제를, ID를 키로 쓰는 정규화된 상태 구조와 createEntityAdapter로 해결합니다. selectId·sortComparer로 기본 동작을 바꾸는 법도 다룹니다. 05편의 TypeScript 기초를 Redux에 적용해 RootState·AppDispatch 타입을 추출하고, 타입 지정된 useSelector/useDispatch 훅, createSlice의 PayloadAction, createAsyncThunk의 rejectValue 타입까지 다룹니다. 13편의 컴포넌트 최적화를 넘어, Redux DevTools의 액션 필터·상태 diff·시간 여행 디버깅을 실전 워크플로로 정리합니다. 대규모 상태에서 리듀서 자체가 병목이 되는 경우와 그 진단법, 프로덕션 디버깅 전략까지 다룹니다.