중복 구독 문제 해결 (Troubleshooting WebSocket Subscription Duplication)

문제 정의

🚨 발생한 문제

WebSocket을 통해 notification 및 error 메시지를 구독할 때, 재연결 시 동일한 구독이 여러 번 등록되는 문제가 발생했습니다. 이는 다음과 같은 현상으로 나타났습니다:

• 같은 구독 로그가 여러 번 출력됨
• 같은 메시지가 여러 번 수신됨 (불필요한 이벤트 중복 발생)
• pendingSubscriptions 배열에 동일한 구독 항목이 여러 개 삽입됨

🔍 원인 분석

1. 재연결 시 기존 구독 정보를 활용하여 다시 구독하도록 설계되었으나, pendingSubscriptions 배열이 초기화되지 않아 동일한 구독이 계속해서 추가됨.
2. 구독 추가 시 중복 여부를 확인하는 로직이 없었음
   • pendingSubscriptions 배열에서 type과 identifier가 동일한 구독을 중복 삽입하는 문제 발생.
   • 결과적으로, 재연결될 때마다 같은 구독이 여러 개 등록됨.

해결 방법

✅ 해결 방안

pendingSubscriptions 배열에 새로운 구독을 추가하기 전에, 이미 동일한 구독이 존재하는지 확인하는 로직을 추가하여 중복 구독을 방지함.

✍ 코드 개선 사항

addPendingSubscription: (subscription: PendingSubscription) => {
  set((state) => {
    // type과 identifier가 동일한 구독이 이미 존재하는지 확인
    const isDuplicate = state.pendingSubscriptions.some(
      (existing) =>
        existing.type === subscription.type &&
        existing.identifier === subscription.identifier
    );

    // 이미 존재하면 추가하지 않음
    if (isDuplicate) {
      return state;
    }

    // 중복되지 않는 경우에만 새로운 구독 추가
    return {
      pendingSubscriptions: [...state.pendingSubscriptions, subscription],
    };
  });
},

🛠 개선된 동작 방식

• pendingSubscriptions 배열을 확인하여 이미 같은 type과 identifier를 가진 구독이 존재하면 추가하지 않음
• 중복된 구독이 등록되지 않으므로 재연결 시 동일한 로그가 반복해서 찍히는 문제 해결