PROGRAM STUCK(또는 비동기 함수를 중첩시키려는 방법)

이제 저는 univ 프로젝트의 데모로 작성한 웹사이트를 다시 작성합니다(원래는 PHP에 있었고 지금은 Firebase와 함께 Next.js에 있음). Firebase 저장소 이미지의 다운로드 링크를 얻으려고 한동안 막혔지만 항상 아무것도 반환하지 않는 함수. 참조 목록을 가져오기 위해 listAll()를 사용하고 이러한 참조에서 URL을 가져오기 위해 getDownloadURL()를 사용했습니다. 이 함수는 약속을 반환하는데 문제는 약속이 어떻게 작동하는지 거의 전혀 이해하지 못한다는 것입니다. 나는 처음에 모든 데이터를 가져와야 할 때 async와 await를 사용해야 한다는 것을 알고 있습니다. 하지만 getDownloadURL()와 작업하려면 어떻게든 listAll()가 필요했고 나는 내가 생각할 수 밖에 없는 미친 어리석은 방법을 너무 많이 시도해 보았습니다.
그러나 아무것도 도움이 되지 않았습니다. 항상 URL을 반환하지 않았습니다. console.log 가지고 놀기 폴더 디렉토리가 올바르게 작성되었고 함수가 제대로 작동하고 비동기 함수에 중첩된 비동기 함수도 제대로 작동하지 않는다는 것을 알았습니다.

내가 온 코드

...
export const getImages = async (dir) => {
  let data = []
  const storage = getStorage()
  const listRef = ref(storage, dir)
  await listAll(listRef)
    .then(res => {
      res.items.forEach(itemRef => {
        getDownloadURL(itemRef)
          .then(url => {
            data.push(url)
          })
      })
    })
  return data
}

그래서 방금 StackOverflow에 질문을 했는데 어떤 친절한 사람이 나를 도와줬을 때 누군가가 대답할 것이라고는 생각하지 못했습니다. 정답의 핵심은 promise chaining 이었습니다.

해결책

export const getImages = async (dir) => {
  let data = []
  const storage = getStorage()
  const listRef = ref(storage, dir)
  const res = await listAll(listRef)

  const promises = res.items.map((itemRef) => getDownloadURL(itemRef))
  const data = await Promise.all(promises)
  console.log(data)

  return data
}

드디어 일하러 돌아왔으니 나중에 만나요!