JavaScript에서 루프를 사용한 이미지 비동기 로딩

이미지 경로가 배열에 저장되어 있다고 가정해 봅시다:

let arr = ['img1.png', 'img2.png', 'img3.png'];

우리는 이 이미지들을 루프에서 로드할 수 있습니다:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

코드는 깔끔하고 callback hell에 빠지지 않았지만, 우리의 두 가지 문제로 다시 돌아왔습니다: 이미지 순서가 보장되지 않고 모든 이미지의 로딩 시점을 잡아낼 수 없다는 점입니다.

그리고 이 상황에 대한 해결책은 없습니다: 루프를 시작하고, 그 안에서 비동기 함수를 사용한 다음, 루프의 모든 함수가 완료되는 시점을 잡아내는 것은 불가능합니다. 당신에게 위의 코드가 적합하다면(즉, 그 시점을 잡을 필요가 없다면) 그대로 사용하거나, 아니면 callback hell로 환영받게 될 것입니다.

하지만, 실망할 필요는 없습니다 - 이 문제는 다음 레슨에서 배울 프로미스를 통해 해결할 수 있습니다.