파일 업로드는 현대 웹 애플리케이션에서 매우 중요한 기능 중 하나입니다. 사용자가 파일을 선택하고 서버에 업로드하는 과정은 사용자 경험과 데이터 처리에 큰 영향을 미칩니다. 이번 기사에서는 JavaScript의 Promise를 사용하여 파일 업로드 기능을 개발하는 방법에 대해 알아보겠습니다.

1. HTML 파일 입력

파일 업로드를 위해 우선 HTML 파일에서 <input type="file">을 사용하여 파일 입력 필드를 생성합니다.

<input type="file" id="fileInput">
<button onclick="uploadFile()">업로드</button>

2. JavaScript 파일 업로드 함수 작성

JavaScript로 파일 업로드를 구현할 때, Promise를 사용하여 비동기적으로 파일을 서버에 업로드하는 것이 좋습니다. 아래는 파일 업로드를 위한 JavaScript 함수의 예입니다.

function uploadFile() {
  return new Promise((resolve, reject) => {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
  
    const formData = new FormData();
    formData.append('file', file);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('파일 업로드 실패'));
      }
    };

    xhr.onerror = function() {
      reject(new Error('파일 업로드 실패'));
    };

    xhr.send(formData);
  });
}

위의 코드는 선택한 파일을 FormData로 래핑하고, XMLHttpRequest를 사용하여 서버에 업로드 요청을 보내는 함수입니다. 성공적으로 업로드되면 Promise는 resolve되고, 업로드가 실패하면 reject됩니다.

3. 파일 업로드 결과 처리

파일 업로드 함수를 호출하고 결과를 처리하는 방법은 다양합니다. 일반적으로는 .then() 및 .catch() 메소드를 사용하여 성공과 실패에 대한 처리를 합니다.

uploadFile()
  .then(response => {
    console.log('파일 업로드 성공:', response);
  })
  .catch(error => {
    console.error('파일 업로드 실패:', error);
  });

위의 코드에서는 파일 업로드가 성공하면 response 변수에 응답이 저장되고, 실패하면 error 변수에 오류 객체가 저장됩니다. 이를 콘솔에 출력하거나, UI를 업데이트하는 등의 작업을 수행할 수 있습니다.

마무리

JavaScript의 Promise를 사용하여 파일 업로드 기능을 개발하는 방법에 대해 알아보았습니다. Promise를 사용하면 비동기 작업을 더욱 편리하게 처리할 수 있으며, 파일 업로드와 같이 오랜 시간이 걸릴 수 있는 작업에 특히 유용합니다. 이를 바탕으로 웹 애플리케이션에서 안정적이고 사용자 친화적인 파일 업로드 기능을 구현해보세요.

#webdevelopment #javascript