최근 웹 애플리케이션에서 파일 업로드는 필수적인 요소입니다. 자바스크립트를 사용하여 비동기 코드를 작성할 때는 Promise를 사용하는 것이 일반적이었습니다. 그러나 ES2017에서 소개된 async/await 문법을 통해 비동기 코드를 보다 간편하게 작성할 수 있습니다. 이번 블로그에서는 자바스크립트의 async/await를 사용하여 파일 업로드하는 방법을 알아보겠습니다.

HTML 파일 업로드 폼 생성하기

먼저, 파일을 업로드할 HTML 폼을 생성해야 합니다. 다음은 파일 업로드를 위한 기본 폼입니다.

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

파일 선택을 위해 <input type="file"> 요소를 사용하고, 업로드 버튼을 클릭했을 때 uploadFile 함수가 호출되도록 설정했습니다.

자바스크립트로 파일 업로드 로직 작성하기

이제 자바스크립트 코드를 작성해보겠습니다. async 키워드로 정의된 uploadFile 함수 내에서 파일 업로드 로직을 작성하겠습니다.

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

  try {
    const response = await fetch('https://example.com/upload', {
      method: 'POST',
      body: file
    });

    if (response.ok) {
      alert('파일 업로드 성공!');
    } else {
      alert('파일 업로드 실패!');
    }
  } catch (error) {
    console.error('파일 업로드 오류:', error);
  }
}

uploadFile 함수는 async 함수로 정의되어 있습니다. 그리고 파일 입력 요소를 document.getElementById를 통해 가져온 후, 선택된 파일을 변수에 할당합니다.

파일을 업로드하기 위해 fetch를 사용합니다. fetch 함수는 Promise를 반환하지만, async/await를 사용하면 Promise 체인을 작성하는 것보다 직관적이고 간단한 구문을 작성할 수 있습니다. fetch 함수의 두 번째 매개변수에는 업로드할 서버의 URL과 함께 업로드 방식(POST)과 업로드할 파일을 지정합니다.

서버로부터 응답을 받으면, response.ok를 확인하여 파일 업로드가 성공했는지 여부를 판단합니다. 업로드가 성공했으면 성공 메시지를, 실패했으면 실패 메시지를 알림창으로 보여줍니다.

에러가 발생하지 않는다면, 오류가 발생했을 때 콘솔에 에러 메시지를 출력합니다.

정리

자바스크립트의 async/await를 이용한 파일 업로드를 살펴보았습니다. async/await를 사용하면 비동기 코드를 동기적으로 작성할 수 있어 가독성이 좋아지고 오류 처리가 간편해집니다. 파일 업로드 외에도 다양한 비동기 작업에 async/await를 활용할 수 있으니, 이번 포스트를 기반으로 실제 프로젝트에서 활용해보시기 바랍니다.