JavaScript에서 비동기 코드의 프로미스화

프로미스가 JavaScript에 도입된 지 그리 오래되지 않았기 때문에, 일부 비동기 기능은 프로미스를 지원하지 않을 수 있습니다. 이런 경우, 프로미스를 사용하는 것이 훨씬 편리하므로 해당 코드 위에 프로미스 형태의 래퍼를 만드는 것이 유용합니다. 이러한 변환을 프로미스화라고 합니다.

프로미스를 지원하지 않는 기능의 예로는 이전 강의에서 이미 다뤘던 이미지 로딩이 있습니다:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('이미지 로드 에러');
});

이 코드를 프로미스를 반환하는 함수로 감싸 프로미스화를 수행해 보겠습니다:

function loadImage(path) {
	return new Promise(function(resolve, reject) {
		let image = document.createElement('img');
		image.src = path;
		
		image.addEventListener('load', function() {
			resolve(image);
		});
		image.addEventListener('error', function() {
			reject(new Error('이미지 "' + path + '" 로드 에러'));
		});
	});
}

우리는 다음과 같이 우리의 함수를 사용할 수 있습니다:

loadImage('img.png').then(function(image) {
	document.body.appendChild(image);
}).catch(function(error) {
	console.log(error);
});

제 코드를 보지 않고 스스로 이미지 로딩의 프로미스화를 수행해 보세요. 얻은 코드를 테스트해 보세요.

이미지 경로가 배열에 저장되어 있다고 가정합니다:

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

모든 이미지의 로딩이 끝날 때까지 기다린 다음, 반복문을 사용하여 body 끝에 추가하는 코드를 작성하세요.

다음 코드가 주어집니다:

window.addEventListener('DOMContentLoaded', function() {
	console.log('DOM 로드됨');
});

이것을 프로미스화하세요.