랭킹 화면

메인 화면에서 게임 오버가 되면

팝업창이 뜸
랭킹 버튼을 누르면 랭킹화면으로 이동

점수 관련 타입 설정

interface ScoreType {
    uid?: string;
    scoreCount: number;
    nicName: string;
  }
  const initial: ScoreType[] = [
    {
      uid: "",
      scoreCount: 0,
      nicName:"",
    },
  ];
  
  const [rank, setRank] =  useState<ScoreType[]>(initial);
  
  
  
  const scoreDataList = async () => {
    try {
      const loginUserList = await getDocs(userCollection);

      // Promise.all을 사용하여 모든 프로미스가 해결될 때까지 기다림
      const updatedRank = await Promise.all(loginUserList.docs.map(async (item) => {
        const data = item.data();
        const loginUserDoc = doc(userCollection, data.uid);
        const loginUserScore = collection(loginUserDoc, "score");
        const loginUserScoreDoc = await getDocs(loginUserScore);

        // 프로미스 해결 후 반환하는 데이터
        return loginUserScoreDoc.docs.map((it) => it.data() as ScoreType);
      }));

      // updatedRank는 이제 Promise 배열이 아닌 ScoreType 배열
      setRank(updatedRank.flat());
    } catch (error) {
      console.error("Error fetching and updating data:", error);
    }
  };

Promise.all
모든 프로미스가 완료될 때까지 기다린 후에 하나의 프로미스로 결과를 반환하는 메서드
사용 이유 : 파이어베이스에서 데이터를 불러 와야하는데 지금 사용하는게 비동기 함수를 사용 하기 때문에 제대로 불러 오지를 못해서 모든 프로미스가 다 끝난 후 반환 되는 데이터를 얻기 위해서 알게 Promise.all를 알게 되어서 사용함

flat()
배열 내에 중첩된 배열이나 서브 배열들을 제거하여 하나의 단일 배열로
flat