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

10 Sep 2023

javascript

웹 애플리케이션에서 파일을 업로드하고 관리하는 기능은 매우 중요합니다. 이를 위해 자바스크립트 fetch API를 사용하여 간단하면서도 강력한 웹 파일 관리 시스템을 구현할 수 있습니다. fetch API는 네트워크 요청을 보내고 응답을 처리하는 데 사용되는 기능을 제공하며, 이를 통해 파일 업로드와 다운로드를 관리할 수 있습니다.

필요한 라이브러리 설치

웹 파일 관리 시스템을 구현하기 위해 먼저 필요한 라이브러리를 설치해야 합니다. 이 예제에서는 자바스크립트의 fetch API만을 사용하므로 추가적인 라이브러리 설치는 필요하지 않습니다.

파일 업로드 구현

먼저 파일을 업로드하는 기능을 구현해 보겠습니다. 사용자가 파일을 선택하고 업로드 버튼을 누르면 선택한 파일을 서버로 전송합니다.

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

uploadButton.addEventListener('click', () => {
  const file = fileInput.files[0];
  
  if (file) {
    const formData = new FormData();
    formData.append('file', file);
    
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        console.log('File uploaded successfully');
      } else {
        console.error('Failed to upload file');
      }
    })
    .catch(error => {
      console.error('Error occurred while uploading file:', error);
    });
  } else {
    console.error('No file selected');
  }
});

위의 코드에서 file-input은 파일 선택을 담당하는 input 요소, upload-button은 파일을 업로드하는 버튼입니다. 사용자가 파일을 선택하고 버튼을 누르면 선택한 파일을 FormData 객체에 추가하고, fetch API를 사용하여 서버로 전송합니다. 서버에서는 해당 파일을 받아 처리할 수 있어야 합니다. 업로드가 성공적으로 완료되면 콘솔에 “File uploaded successfully”라는 메시지를 출력하고, 실패한 경우에는 “Failed to upload file”라는 메시지를 출력합니다.

파일 다운로드 구현

이제 파일 다운로드 기능을 구현해 보겠습니다. 서버에 저장된 파일을 다운로드하려면 해당 파일의 URL을 fetch API로 요청하면 됩니다.

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

downloadButton.addEventListener('click', () => {
  fetch('/download', {
    method: 'GET',
  })
  .then(response => {
    if (response.ok) {
      response.blob().then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'file.zip';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      });
    } else {
      console.error('Failed to download file');
    }
  })
  .catch(error => {
    console.error('Error occurred while downloading file:', error);
  });
});

위의 코드에서 download-button은 파일을 다운로드하는 버튼입니다. 사용자가 버튼을 클릭하면 서버로부터 파일의 URL을 받아와 해당 파일을 다운로드합니다. 다운로드가 성공적으로 완료되면 file.zip이라는 이름으로 파일이 저장됩니다. 실패한 경우에는 “Failed to download file”라는 메시지를 출력합니다.

결론

자바스크립트 fetch API를 사용하여 웹 파일 관리 시스템을 구현하는 방법을 알아보았습니다. 파일 업로드와 다운로드 기능을 간단한 예제 코드를 통해 구현하였으며, 이를 활용하여 실제 프로젝트에서 파일 관리 기능을 추가할 수 있습니다.

먼저 필요한 라이브러리를 설치하고, 파일 업로드와 다운로드 기능을 사용자 인터페이스에 맞게 구현해야 합니다. 이후 서버에서 해당 기능을 처리할 수 있도록 코드를 작성하여 웹 파일 관리 시스템을 완성할 수 있습니다.