파일 업로드는 웹 애플리케이션에 매우 중요한 기능 중 하나입니다. 최근에는 자바스크립트에서 비동기 프로그래밍을 쉽게 다룰 수 있는 async/await 문법이 추가되어 파일 업로드의 구현이 더욱 간편해졌습니다. 이번 포스트에서는 자바스크립트의 async/await를 이용하여 파일 업로드를 구현하는 방법에 대해 알아보겠습니다.

HTML 파일 업로드 폼 생성하기

먼저, HTML에서 파일 업로드를 위한 폼을 생성해야 합니다. 아래 예제는 파일을 업로드할 수 있는 폼을 생성하는 간단한 HTML 코드입니다.

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="fileUpload" id="fileUpload" />
  <button type="submit">업로드</button>
</form>

위의 코드에서, input 태그의 type 속성이 file로 설정되어 있어 파일을 선택할 수 있는 버튼이 생성됩니다. 그리고 form 태그의 enctype 속성이 multipart/form-data로 설정되어 파일을 전송할 수 있도록 설정되었습니다.

파일 업로드 함수 작성하기

이제 파일 업로드를 처리하기 위한 함수를 작성해보겠습니다. 아래의 예제 코드는 fetch API를 이용하여 파일을 업로드하고 응답 결과를 반환하는 함수입니다.

async function uploadFile() {
  const fileInput = document.getElementById('fileUpload');
  const file = fileInput.files[0];

  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData,
  });

  const result = await response.json();
  return result;
}

위의 코드에서 uploadFile 함수는 async 키워드로 정의되어 있으며, await 키워드를 사용하여 비동기 작업의 완료를 기다립니다. fetch 함수를 이용하여 파일을 업로드하고 응답을 받아옵니다. 업로드할 파일은 FormData 객체에 추가되고 fetch 함수의 body 옵션에 전달됩니다.

파일 업로드 이벤트 처리하기

마지막으로, 파일 업로드 폼의 submit 이벤트를 처리하는 함수를 작성해야 합니다. 아래의 예제 코드는 파일 업로드 폼의 submit 이벤트를 처리하여 파일을 업로드하는 함수를 호출하는 방법을 보여줍니다.

const uploadForm = document.getElementById('uploadForm');
uploadForm.addEventListener('submit', async (event) => {
  event.preventDefault(); // 페이지 리로딩 방지

  const result = await uploadFile(); // 파일 업로드 함수 호출

  console.log(result); // 업로드 결과 출력
});

위의 코드에서는 폼의 submit 이벤트를 async 함수로 처리하고, preventDefault 함수를 호출하여 페이지가 리로딩되지 않도록 합니다. 그리고 uploadFile 함수를 호출하여 파일을 업로드하고, 업로드 결과를 콘솔에 출력합니다.

마무리

이번 포스트에서는 자바스크립트의 async/await를 이용하여 파일 업로드를 구현하는 방법에 대해 알아보았습니다. async/await 문법을 이용하면 비동기 작업을 간편하게 처리할 수 있으며, 파일 업로드와 같이 사용자 경험이 중요한 기능을 구현하는데 큰 도움이 됩니다. 이제 여러분은 자바스크립트에서 async/await를 이용하여 파일 업로드를 구현할 수 있게 되었습니다.