JavaScript에서의 콜백 헬 문제

함수 loadImage를 사용하여 세 장의 이미지를 로드하려 한다고 가정해 봅시다:

loadImage('img1.png', function(image, err) {
	document.body.append(image);
});
loadImage('img2.png', function(image, err) {
	document.body.append(image);
});
loadImage('img3.png', function(image, err) {
	document.body.append(image);
});

이 코드에는 문제가 있습니다. 사실은, 이미지들이 로드되는 대로 body에 추가될 것입니다. 즉, 이미지들이 우리가 원하는 순서대로 정확히 추가될 것이라는 보장이 없습니다.

또 다른 문제가 있습니다. 세 장의 이미지가 모두 로드된 후에 어떤 작업을 수행하고 싶다고 가정해 봅시다. 우리 코드에서는 이 순간을 포착할 수 없습니다. 왜냐하면 세 이미지 모두 독립적으로 로드되기 때문입니다.

좋습니다, 코드를 수정해 보겠습니다:

loadImage('img1.png', function(image1, err1) {
	document.body.append(image1);
	
	loadImage('img2.png', function(image2, err2) {
		document.body.append(image2);
		
		loadImage('img3.png', function(image3, err3) {
			document.body.append(image3);
			console.log('모든 이미지가 로드되었습니다');
		});
	});
});

우리는 설명된 두 가지 문제를 해결했습니다. 그러나, 그 대가로 다른 문제를 얻었습니다. 아직은 그 문제가 크게 보이지 않지만, 코드에서 세 장이 아니라 10장의 이미지를 로드하고, 예외 처리까지 추가된다면 코드가 어떻게 보일지 상상해 보세요. 결과적으로 코드는 극도로 가독성이 떨어지게 될 것입니다: 콜백이 서로 중첩될수록 코드 복잡도가 눈사태처럼 증가합니다. 이러한 상황을 callback hell 이라고 부릅니다.

주어진 코드를 10장의 이미지를 로드하고 예외 처리까지 포함하도록 다시 작성해 보세요. 콜백 헬 상황이 발생하는지 확인하세요.