웹 애플리케이션에서 자바스크립트 파일 업로드 및 다운로드는 중요한 기능 중 하나입니다. 이를 통해 사용자는 자바스크립트 파일을 서버에 업로드하고 필요한 경우에는 다운로드할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 파일을 업로드하고 다운로드하는 방법에 대해 알아보겠습니다.

파일 업로드

자바스크립트를 사용하여 파일을 업로드하려면 input 요소를 사용해야 합니다. 예를 들어, 다음과 같이 HTML 코드를 작성할 수 있습니다:

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

여기서 input 요소의 type 속성을 file로 설정하고 id 속성을 fileInput으로 지정했습니다. 또한 “파일 업로드” 버튼을 클릭하면 uploadFile 함수가 호출되도록 했습니다.

이제 자바스크립트에서 uploadFile 함수를 구현해 보겠습니다. 파일을 업로드하기 위해 FormData 객체를 사용할 수 있습니다. 다음은 예시 코드입니다:

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

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

  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    if (response.ok) {
      console.log('파일 업로드 성공');
    } else {
      console.error('파일 업로드 실패');
    }
  }).catch(error => {
    console.error('네트워크 오류:', error);
  });
}

위의 코드에서는 fetch 함수를 사용하여 파일을 업로드합니다. FormData 객체에 파일을 추가한 후, fetch 함수의 body 옵션으로 전달합니다. 이때 서버에 파일을 업로드하기 위해 /upload URL을 사용하였습니다.

파일 다운로드

파일 다운로드를 구현하기 위해서는 서버에서 파일을 제공하는 API가 필요합니다. 다운로드를 위한 자바스크립트 코드는 간단합니다. 예를 들어, 다음과 같이 버튼을 클릭하면 파일을 다운로드할 수 있습니다:

<button onclick="downloadFile()">파일 다운로드</button>

자바스크립트에서 downloadFile 함수를 구현합시다. 파일을 다운로드하기 위해 a 요소를 사용할 수 있습니다. 다음은 예시 코드입니다:

function downloadFile() {
  const link = document.createElement('a');
  link.href = '/download';
  link.download = 'file.js';
  link.click();
}

위의 코드에서는 a 요소를 동적으로 생성한 후, href 속성에 파일 다운로드를 위한 URL을, download 속성에 다운로드될 파일의 이름을 지정했습니다. 그리고 link.click() 메소드를 호출하여 파일을 다운로드합니다.

결론

이 블로그 포스트에서는 자바스크립트를 사용하여 파일을 업로드하고 다운로드하는 방법에 대해 알아보았습니다. 파일 업로드를 위해 FormData 객체와 fetch 함수를 사용하였으며, 파일 다운로드를 위해 a 요소를 활용했습니다. 이러한 자바스크립트 기능을 활용하여 사용자들에게 더 나은 웹 애플리케이션 경험을 제공할 수 있습니다.