소나기과제 수행 중 배열의 각 항목을 비동기적으로 처리하여 결과를 수집하려 합니다.
코드:
const axios = require('axios');
async function fetchData() {
const ids = [1, 2, 3];
const results = [];
for (let i = 0; i < ids.length; i++) {
await axios.get(`https://jsonplaceholder.typicode.com/posts/${ids[i]}`)
.then(res => {
results.push({ id: ids[i], data: res.data });
});
}
return results;
}
fetchData().then(console.log);오류: 예상과 달리 `results` 배열의 순서가 보장되지 않거나, 특정 환경에서 `ids[i]` 값이 의도치 않게 참조됨.
시도: `for` 루프 대신 `forEach`를 사용했으나 비동기 제어가 되지 않아 `results`가 빈 배열로 반환됨.
질문: `for` 루프 내에서 `await`를 사용함에도 불구하고 비동기 콜백 내부에서 인덱스 변수가 정확히 캡처되지 않는 이유와 해결 방법은 무엇입니까?
댓글7
-
빗방울
2026.10.31 03:14
-
빗방울
2026.10.31 08:05
맞음ㅋㅋ
await 썼으면 그냥 변수에 담아서 쓰는 게 정석인데 섞어 쓰니까 더 헷갈리신 듯함.
그렇게 바꾸면 코드 훨씬 짧아질 듯요.
-
빗방울
2026.10.31 03:58
순서 보장하려면 Promise.all 쓰는 게 국룰인듯요.
그거 쓰면 병렬로 돌아서 속도도 훨씬 빠를 거예요ㅋㅋ
한번 검색해보셈.
-
빗방울
2026.10.31 05:35
forEach가 비동기 안 먹는 건 진짜 뉴비 때 다들 한 번씩 겪는 국룰이죠ㅋㅋ
변수 캡처 문제는 let 범위 때문인 것 같은데
그냥 map으로 돌려서 Promise 배열 만드는 게 정신건강에 이로울 듯함.
-
빗방울
2026.10.31 05:58
근본적으로는 비동기 함수 안에서 외부 변수를 참조할 때 발생하는 클로저 문제인 듯함.
그냥 람다 함수 인자로 값을 넘겨버리거나 변수 분리해서 쓰면 해결될 것 같네요ㅋㅋ
고생하시네요 화이팅함.
-
빗방울
2026.10.31 06:07
내 생각엔 굳이 루프 돌릴 필요 없이
ids.map 활용해서 비동기 처리하고 결과 받으면
훨씬 깔끔할 듯요ㅋㅋ 화이팅함ㄷㄷ
-
빗방울
2026.10.31 08:14
이거 사실 순서 문제보다도 루프 돌 때마다 await 걸면 속도 너무 느려져서 답답하실 듯ㅋㅋ 그냥 map으로 돌려서 Promise.all 거는 게 제일 속 편함ㄷㄷ
모든 이야기1511
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
await 쓰면서 .then까지 섞어 쓰셔서 꼬인 거 같네요. 그냥 res 변수로 받아서 처리하시는 게 훨씬 깔끔할 듯함ㅋㅋ