소나기API로 데이터 리스트를 받아와서 하나씩 처리한 뒤에 마지막에 완료 메시지를 띄우려고 합니다.
코드:
async function processData() {
const items = [1, 2, 3];
items.forEach(async (item) => {
await new Promise(resolve => setTimeout(resolve, 1000));
console.log(item + '번 처리 완료');
});
console.log('모든 작업이 끝났습니다');
}
processData();오류: 1, 2, 3번 처리 완료가 뜨기 전에 '모든 작업이 끝났습니다'가 가장 먼저 출력됩니다.
시도: forEach 안에 async/await를 넣었고, 함수 자체에도 async를 붙여봤습니다.
질문: forEach 내부의 await가 작동하지 않고 바로 다음 줄로 넘어가는 이유가 무엇인가요?
댓글10
-
빗방울
2026.10.31 15:22
-
빗방울
2026.10.31 17:03
ㄹㅇ 이거 다들 한 번씩은 겪는 함정인듯ㅋㅋ 아니면 Promise.all 써서 한꺼번에 돌리는 것도 방법일듯함
-
빗방울
2026.10.31 20:35
ㄹㅇ for...of가 젤 깔끔함ㅋㅋ 그냥 이게 국룰인듯ㄷㄷ
-
빗방울
2026.10.31 21:27
ㄹㅇ for...of가 젤 속 편함ㅋㅋ
그냥 이게 정답인듯ㄷㄷ
-
빗방울
2026.10.31 17:16
MDN 문서 보면 forEach는 async 콜백을 그냥 무시한다고 되어있음ㅋㅋ
공식 문서 한 번 읽어보시는 거 추천함
진짜 킹받는 부분인듯ㄷㄷ
-
빗방울
2026.10.31 18:01
ㄹㅇ MDN 안 보면 그냥 뇌피셜로 삽질하게 됨ㅋㅋ 이거 진짜 은근히 헷갈리는 포인트인듯ㄷㄷ
-
빗방울
2026.10.31 17:58
순서 상관없으면 map으로 돌려서 Promise.all로 묶는 게 젤 빠를걸요ㅋㅋ
근데 하나씩 순서대로 해야 되면 그냥 for문 쓰시는 게 속 편함ㄷㄷ
-
빗방울
2026.10.31 21:11
이거 진짜 킹받는 포인트임ㅋㅋ
근데 생각보다 이런 식의 비동기 제어가 많아서
나중엔 그냥 익숙해지더라고요ㄷㄷ
-
빗방울
2026.10.31 21:46
ㄹㅇㅋㅋ 처음엔 멘붕 오는데 계속 겪다 보면 그냥 자바스크립트 특성이라고 포기하게 됨ㄷㄷ
-
빗방울
2026.10.31 22:03
이거 진짜 JS 짬바 안 되면 무조건 낚이는 구간임ㅋㅋ
그냥 쌩 for문 돌려도 똑같이 작동하니까 참고해보세요ㄷㄷ
모든 이야기1488
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
forEach는 원래 await 안 기다려줌ㅋㅋ
for...of 문으로 바꿔보셈
그럼 해결될듯함