자바스크립트 fetch API를 사용한 웹 파일 관리 시스템 구현

10 Sep 2023

javascript

웹 파일 관리 시스템은 파일을 업로드하고 다운로드할 수 있는 기능을 제공하는 웹 애플리케이션입니다. 이번 블로그 포스트에서는 자바스크립트의 fetch API를 사용하여 웹 파일 관리 시스템을 구현하는 방법에 대해 알아보겠습니다.

fetch API란?

fetch API는 웹 브라우저에서 HTTP 요청을 보내고 응답을 받는 기능을 제공하는 자바스크립트 API입니다. 기존의 XMLHttpRequest보다 간편하고 직관적인 인터페이스를 제공하며, Promise를 활용한 비동기 처리가 가능합니다.

파일 업로드하기

먼저, 파일을 업로드하는 기능을 구현해보겠습니다. 이를 위해 HTML에서 파일 선택을 위한 <input> 요소를 생성하고, 선택한 파일을 서버로 보내는 기능을 구현합니다.

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 업로드 완료 후 동작
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });
});

위 코드에서는 파일 선택 이벤트('change')가 발생하면 선택한 파일을 FormData 객체에 담고, fetch 함수를 사용하여 서버로 업로드 요청을 보냅니다. 업로드 요청은 HTTP 메소드 POST를 사용하며, 요청 본문에는 FormData 객체를 전달합니다. 업로드가 완료되면 서버에서 반환하는 응답을 JSON 형태로 파싱하여 사용할 수 있습니다.

파일 다운로드하기

이번에는 파일을 다운로드하는 기능을 구현해보겠습니다. 서버에서 제공되는 파일 URL을 받아와 fetch 함수를 이용하여 파일을 다운로드합니다.

const downloadButton = document.getElementById('download-button');

downloadButton.addEventListener('click', () => {
  fetch('/download', {
    method: 'GET'
  })
  .then(response => response.blob())
  .then(blob => {
    // 파일 다운로드
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.txt';
    a.click();
    
    // 오브젝트 URL 해제
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    // 에러 처리
    console.error(error);
  });
});

위 코드에서는 파일 다운로드 버튼(download-button) 클릭 이벤트가 발생하면 fetch 함수를 이용하여 서버에서 파일을 가져옵니다. 응답으로 받은 파일 데이터는 blob 형태로 전달되며, 이를 이용하여 파일을 다운로드할 수 있습니다. 다운로드가 완료된 후에는 생성한 오브젝트 URL을 해제해주어 메모리 누수를 방지합니다.

결론

이렇게 자바스크립트의 fetch API를 활용하여 자체적인 웹 파일 관리 시스템을 구현할 수 있습니다. 파일 업로드와 다운로드 기능을 통해 사용자는 웹 애플리케이션에서 파일을 손쉽게 관리할 수 있습니다. fetch API를 사용하면 비동기 HTTP 요청을 보내고 응답을 처리하는 작업이 간편해지므로, 웹 애플리케이션 개발에 유용한 기술이 될 것입니다.

참고 자료:

MDN Web Docs - Fetch API