Promise를 활용한 사진 업로드 기능 개발

13 Sep 2023

Promise

사진 업로드는 현대 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 사용자가 사진을 선택하고 서버로 업로드하는 과정은 비동기적으로 처리되어야 합니다. 이러한 비동기 작업을 효과적으로 다루기 위해 JavaScript의 Promise를 사용할 수 있습니다.

사진 선택

사용자가 업로드할 사진을 선택하는 과정은 별도의 UI 컴포넌트가 필요합니다. 예를 들어, <input type="file"> 엘리먼트를 사용하여 파일 선택 대화상자를 열 수 있습니다. 사용자가 사진을 선택하면 선택한 파일의 정보를 Promise로 반환하는 함수를 만들어야 합니다.

function selectPhoto() {
  return new Promise((resolve, reject) => {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];

      if (file) {
        resolve(file);
      } else {
        reject(new Error('No file selected'));
      }
    });

    fileInput.click();
  });
}

사진 업로드

사진을 선택하고 나면 선택한 사진을 서버로 업로드해야 합니다. 이를 위해 앞서 선택한 파일을 받아서 서버로 전송하는 Promise를 만들 수 있습니다. 서버로의 전송은 AJAX 요청을 사용할 수 있습니다.

function uploadPhoto(file) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('Photo upload failed'));
      }
    });

    xhr.upload.addEventListener('progress', (event) => {
      const percentComplete = event.loaded / event.total * 100;
      console.log(`Upload progress: ${percentComplete}%`);
    });

    xhr.send(file);
  });
}

사용 예제

위의 두 개의 Promise를 활용하여 실제 사진 업로드를 수행하는 예제 코드를 작성해보겠습니다.

selectPhoto()
  .then(uploadPhoto)
  .then((response) => {
    console.log(`Photo upload successful: ${response}`);
  })
  .catch((error) => {
    console.error(`Failed to upload photo: ${error}`);
  });

위의 코드에서 selectPhoto() 함수를 호출하여 사용자에게 사진 선택을 요청하고, 선택된 사진을 uploadPhoto() 함수를 이용하여 서버로 업로드합니다. 업로드가 성공하면 then() 메서드에서 처리하고, 업로드 도중 발생한 오류는 catch() 메서드에서 처리합니다.

Promise를 사용하면 사진 업로드와 같은 비동기 작업을 간편하게 처리할 수 있습니다. Callback 체인 대신 then()과 catch() 메서드를 사용하여 작업의 흐름을 더욱 명확하고 가독성 있게 표현할 수 있습니다.

#javascript #async #promise #사진업로드