순환 참조 문제

hooks/common.ts 에 선언한 throttle 함수를 pinia stores/modules/api.ts 에서 호출하다가 throttle 함수를 찾지 못하는 에러가 발생했습니다. 이 원인을 모듈시스템의 순환참조 문제로 보고 접근했습니다.

Issue Check!

hooks/common.ts 에 선언한 throttle 함수를 pinia stores/modules/api.ts 에서 호출하다가 throttle 함수를 찾지 못하는 에러가 발생했습니다. 이 원인을 모듈시스템의 순환참조 문제로 보고 접근했습니다.

stores/api/review 평가 시작
stores/modules/api 평가 시작
hooks/common import 시도 (재평가 안됨)
throttle 미export 상태 → 에러

// hooks/common.ts
import { useReviewApiStore } from '@/stores/api/review';
import { ApiResponse } from '@/stores/modules/api';

export const getReviewData = async () => {
	await useReviewApiStore().getReviewData( /* 생략 */ ) as ApiResponse<any>;
}

export const throttle = () => { /* 생략 */ }

// stores/modules/api.ts
import { throttle } from '@/hooks/common';

export interface ApiResponse<T = any> { /* 생략 */ }

const useThrottle = throttle( /* 생략 */ );

천천히 뜯어보면 @/stores/api/review 평가를 먼저 시작하게되고, 마무리되면 @/stores/modules/api 평가를 시작합니다.

@/stores/modules/api 에서 @/hooks/common 을 import 하게 되는데 이 때는 @/hooks/common 을 재평가하지 않습니다.

throttle 을 호출하는 로직이 보이는데, 이 때 throttle은 @hooks/common 이 평가되고, throttle 함수를 내보내기 전이므로 throttle 함수가 존재하지 않아 에러가 발생합니다.

Trouble Shooting☀️

순환참조를 일으키는 @/hooks/common 의 throttle과 @/stores/modules/api 의 ApiResponse를 각각 @/utils , @/types/common.d.ts 로 옮겨 순환참조를 끊어 해결하였습니다.