Promise.all()과 비동기 처리 - 콘솔 로그만 추가했는데 버그가 고쳐졌다?

🤔 문제 상황

제일 첫 댓글의 유저 닉네임을 못불러오는 상황

React 프로젝트에서 Firebase Firestore를 사용하여 사용자 정보를 가져오는 과정에서 재미있는 현상을 발견했습니다. 시를 완료한 사용자들의 닉네임을 표시하는 기능을 구현하던 중, 몇몇 시에서 첫 번째 사용자의 닉네임이 표시되지 않는 문제가 있었습니다. 

문제 해결을 위해 콘솔 로그를 추가했는데, 놀랍게도 로그를 추가하는 것만으로 문제가 해결되었습니다!

 

 

🔍 원인 분석

원래 코드는 다음과 같았습니다:

const fetchUserNicknames = async (userIds: string\[\]) => {  
  if (!userIds.length) return;  

  try {  
    const nicknames: { \[key: string\]: string } = {};  

    for (const userId of userIds) {  
      if (nicknames\[userId\]) continue;  

      const userDoc = await getDoc(doc(db, 'users', userId));  
      if (userDoc.exists()) {  
        const userData = userDoc.data();  
        nicknames\[userId\] = userData.nickname || userData.displayName || userId.substring(0, 8);  
      } else {  
        nicknames\[userId\] = userId.substring(0, 8);  
      }  
    }  

    setCompletedUserNames(nicknames);  
  } catch (error) {  
    console.error('사용자 닉네임 가져오기 오류:', error);  
  }  
};  

 

이 코드의 문제점은:

1. 순차적으로 비동기 요청을 처리하면서 각 요청 사이의 타이밍 이슈가 발생할 수 있었습니다.
2. 콘솔 로그를 추가했을 때 문제가 해결된 것은, 로그 출력으로 인해 각 비동기 작업 사이에 미세한 시간 간격이 생겼기 때문입니다.

 

사실 예전에도 종종 겪었지만 문제가 해결되면 바로 넘기곤 했는데,

조금 검색해서 찾아보니 이를 "Heisenbug"라고 불리는 걸 알았습니다.

 

https://en.wikipedia.org/wiki/Heisenbug

Heisenbug - Wikipedia

 

Heisenbug : 버그를 관찰하려는 행위(로그 추가)가 버그의 동작을 변경시키는 현상

 

✨ 해결 방법

더 안정적인 해결을 위해 `Promise.all()`을 사용하여 모든 비동기 요청을 병렬로 처리하도록 수정했습니다:

const fetchUserNicknames = async (userIds: string\[\]) => {  
if (!userIds.length) return;

try {  
const nicknames: { \[key: string\]: string } = {};


// Promise.all을 사용하여 모든 요청을 병렬로 처리  
await Promise.all(  
  userIds.map(async (userId) => {  
    if (nicknames\[userId\]) return;  

    const userDoc = await getDoc(doc(db, 'users', userId));  
    if (userDoc.exists()) {  
      const userData = userDoc.data();  
      nicknames\[userId\] = userData.nickname || userData.displayName || userId.substring(0, 8);  
    } else {  
      nicknames\[userId\] = userId.substring(0, 8);  
    }  
  })  
);  

setCompletedUserNames(nicknames);  


} catch (error) {  
console.error('사용자 닉네임 가져오기 오류:', error);  
}  
};  

 

수정 후에는,

1. 모든 사용자 정보 요청이 병렬로 처리됩니다.
2. 각 요청이 독립적으로 처리되어 한 요청의 지연이 다른 요청에 영향을 미치지 않습니다.
3. 모든 요청이 완료된 후에 한 번에 상태를 업데이트합니다.

 

💡 교훈

1. 비동기 작업을 다룰 때는 순차 처리와 병렬 처리의 차이를 이해하고 상황에 맞게 사용하기
2. 콘솔 로그로 문제가 해결되는 것처럼 보인다면, 그것은 타이밍 이슈일 가능성이 높음!
3. `Promise.all()` 여러 비동기 작업할 때 사용하기 
4. "Heisenbug" 현상이라는 게  있을 수 있다 ~~