파일 업로드는 웹 애플리케이션에서 흔히 발생하는 작업 중 하나입니다. 사용자가 웹 앱을 통해 파일을 업로드하면, 서버 측에서 파일을 처리하고 저장해야 합니다. 이때 프런트엔드에서 비동기 데이터 요청을 이용하여 파일 업로드를 처리하는 방법이 효과적입니다.

FormData 객체를 이용한 파일 업로드

JavaScript에서 FormData 객체를 사용하면 파일을 서버로 전송할 수 있습니다. 이 객체는 HTML form 요소에서 제공하는 데이터를 쉽게 구성하여 전송할 수 있습니다. 파일을 선택한 후 FormData 객체에 파일을 추가하고, XMLHttpRequest를 사용하여 서버로 전송합니다.

// HTML input 요소에서 파일 선택
const inputFile = document.getElementById('fileInput');

// FormData 객체 생성
const formData = new FormData();
formData.append('file', inputFile.files[0]);

// XMLHttpRequest를 사용한 파일 업로드
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);

파일 업로드 상태 처리

파일 업로드 요청을 보낸 후 서버는 파일을 받아 처리한 후 응답을 반환합니다. 이때 XMLHttpRequest 객체의 이벤트 리스너를 이용하여 업로드 상태를 감지하고, 상태에 따른 처리를 할 수 있습니다.

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('파일 업로드 성공');
  } else {
    console.error('파일 업로드 실패');
  }
};

결론

프런트엔드 개발에서 파일 업로드를 처리할 때, 비동기 데이터 요청을 이용하는 것이 효과적입니다. FormData 객체와 XMLHttpRequest를 활용하여 파일을 쉽게 서버로 전송할 수 있고, 업로드 상태를 실시간으로 처리할 수 있습니다.

이러한 방식을 이용하면 사용자 경험을 향상시키고, 웹 애플리케이션의 성능도 향상시킬 수 있습니다.

참고 문헌:

• FormData MDN 웹 문서
• XMLHttpRequest MDN 웹 문서