혼란의 고리 깨기: Redux 순환 의존성 여정

최근 Redux 코드베이스에서 우연히 발견한 버그로 인해 머리가 긁힐 정도였습니다. 테스트 스위트에서 말도 안 되는 오류가 발생했을 때 갑작스러운 혼란의 물결을 느낀 적이 있다면 그 느낌을 아실 것입니다. 발생한 상황과 최종적으로 문제를 발견하고 해결한 방법은 다음과 같습니다.

도대체 순환 종속성이 무엇인가요?

순환 종속성은 두 개 이상의 모듈이 직접 또는 간접적으로 서로 종속되어 종속성 체인에 무한 루프를 생성할 때 발생합니다. 즉, 두 친구가 "네가 먼저 가세요"라고 말했지만 아무도 움직이지 않는 것과 같습니다. JavaScript에서는 이로 인해 정의되지 않은 모듈이나 불완전한 데이터가 발생하여 추적하기 매우 어려운 버그가 발생할 수 있습니다.

범인: 예

두 개의 JavaScript 파일 moduleA.js 및 moduleB.js를 상상해 보십시오.

// moduleA.js
import { functionB } from './moduleB.js';
export function functionA() {
  console.log('functionA called');
  functionB();
}

// moduleB.js
import { functionA } from './moduleA.js';
export function functionB() {
  console.log('functionB called');
  functionA();
}

여기서 두 모듈은 서로 의존합니다. JavaScript가 이를 로드하려고 하면 다른 하나가 먼저 준비되지 않으면 어느 것도 완전히 로드될 수 없기 때문에 혼란스러워집니다. 이로 인해 정의되지 않은 함수나 불완전한 모듈과 같은 문제가 발생합니다. 기본적으로는 엉망입니다.

그렇다면 순환 종속성을 어떻게 찾았습니까?

아, 이 모험을 시작한 무서운 오류:

Error: `reducer` is a required argument, and must be a function or an object of functions that can be passed to combineReducers.
 ❯ Module.configureStore node_modules/@reduxjs/toolkit/src/configureStore.ts:98:11

내 첫 반응은? "잠깐만요, 뭐요?!" — 내 최고의 순간은 아닙니다. 나는 리듀서가 제자리에 있다고 확신했기 때문에 이 오류는 갑자기 발생한 것처럼 보였습니다. 약간의 조사 끝에 나는 이것이 누락된 리듀서 문제가 아니라 내 Redux 설정에 몰래 들어가는 순환 종속성이라는 것을 깨달았습니다. 물론 그것을 알아내는 것은 쉽지 않았습니다!

진짜 영웅: dpdm

그때 나는 구세주를 찾았습니다: npm 패키지 dpdm. 이 보석은 종속성 트리를 분석하고 교활한 순환 종속성이 어디에 있는지 보여줍니다. 다음 명령을 실행하면 명확한 보기가 제공됩니다.

dpdm --no-warning --no-tree ./src/index.tsx

그리고 짜잔! 내 프로젝트에서 찾은 내용은 다음과 같습니다.

• Circular Dependencies
  01) src/stores/store.ts -> src/stores/rootReducer.ts -> src/stores/slice/authSlice.ts -> src/utilities/api.ts
  02) src/stores/rootReducer.ts -> src/stores/slice/bookingSlice.ts -> src/hooks/redux.tsx -> src/stores/types.ts -> src/stores/setUpStore.ts
  03) src/stores/types.ts -> src/stores/setUpStore.ts
  ...

수정 사항: 리팩토링 시간!

보고서는 명확했습니다. 내 Redux 파일에는 주로 store.ts, rootReducer.ts 및 일부 슬라이스에 순환 종속성이 많이 있었습니다. 일부 로직을 분할하고, 불필요한 종속성을 분해하고, 코드를 리팩터링한 후 마침내 모든 것이 다시 순서대로 돌아왔습니다.

배운 교훈

• 순환 종속성은 교활합니다: 런타임이나 단위 테스트 중에 표시되지 않는 경우가 많아 추적하기 어렵습니다.
• dpdm과 같은 도구는 생명의 은인입니다: 가져오기를 수동으로 검색하는 데 시간을 낭비하지 마세요. 어려운 작업은 도구에 맡기세요.
• 리팩토링은 당신의 친구입니다: 때때로 순환 종속성은 잘못된 아키텍처의 신호입니다. 좋은 리팩터링은 즉각적인 문제를 해결할 뿐만 아니라 코드베이스를 더 깔끔하고 유지 관리하기 쉽게 만듭니다.

그러니 다음에 이 성가신 벌레를 만나면 커피를 마시고 웃으며 그 고리를 끊으세요!

즐거운 디버깅을 즐겨보세요! ?