JavaScript에서 비동기 콜백을 통한 이미지 로딩

이미지를 로드하는 함수 loadImage를 구현해 봅시다. 이 함수는 첫 번째 매개변수로 이미지의 경로를 받고, 두 번째 매개변수로는 이미지가 로드되었을 때 실행될 콜백을 받도록 하겠습니다:

javascriptloadImage('img.png', function() {
  // 이미지 로드 시 실행됨
});

콜백의 첫 번째 매개변수에는 이미지 DOM 요소의 참조가 들어가고, 두 번째 매개변수에는 예외 상황이 발생한 경우 오류가 들어가도록 합시다:

javascriptloadImage('img.png', function(image, err) {
  console.log(image, err);
});

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

javascriptloadImage('image.png', function(image, err) {
  document.body.append(image); // 로드된 이미지를 배치함
});

또는 예외 상황 처리를 함께 할 수 있습니다:

javascriptloadImage('image.png', function(image, err) {
  if (!err) {
    document.body.append(image);
  } else {
    console.log('오류 발생: ' + err);
  }
});