소나기
API로 받아온 사용자 ID 배열을 돌면서 각각의 상세 정보를 가져와 배열에 담으려고 합니다.
코드:
const users = [1, 2, 3];
const results = [];
async function fetchDetail(id) {
return new Promise(resolve => setTimeout(() => resolve(`Data ${id}`), 100));
}
async function processUsers() {
users.forEach(async (id) => {
const data = await fetchDetail(id);
results.push(data);
});
console.log('결과:', results);
}
processUsers();오류: 결과: [] (빈 배열이 출력됨)
시도: fetchDetail 함수 앞에 await를 붙였고, forEach 콜백 함수에도 async를 추가해봤습니다.
질문: forEach 내부에서 await를 사용했는데 왜 비동기 작업이 완료될 때까지 기다리지 않고 바로 console.log가 실행되는 건가요?
댓글6
-
빗방울
2026.10.31 06:50
-
빗방울
2026.10.31 09:00
ㄹㅇ 이거 처음에 다들 겪는 함정임ㅋㅋ map으로 돌려서 Promise.all 거는 게 제일 깔끔하긴 하더라고요
-
빗방울
2026.10.31 09:25
저도 예전에 이거 때문에
밤샜던 기억나네요ㅋㅋ
그냥 forEach가 비동기 콜백을 처리하는 방식 자체가 그렇더라고요.
-
빗방울
2026.10.31 10:09
공식 문서 보면 forEach는 반환값이 void라 await를 붙여도 그냥 무시하고 지나가더라고요ㅋㅋ 진짜 킹받는 부분임ㄷㄷ
-
빗방울
2026.10.31 10:39
ㄹㅇㅋㅋ 이거 모르면 진짜 멘붕 오는데 한번 겪고 나면 절대 안 쓰게 됨ㄷㄷ
-
빗방울
2026.10.31 11:05
순서 상관없으면 Promise.all이 답인데 순서 지켜야 하면 for...of가 낫겠네요ㅋㅋ 힘내세요ㄷㄷ
모든 이야기1455
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
총 1455개의 이야기
forEach가 원래 async/await 안 기다려줌ㅋㅋ
for...of 문으로 바꾸거나 Promise.all 써보세요 바로 해결될듯