[javascript] 자바스크립트로 파일 업로드 및 다운로드 중 대용량 파일 처리하기

14 Dec 2023

javascript

파일 처리는 웹 애플리케이션에서 중요한 부분이다. 특히 대용량 파일의 업로드 및 다운로드는 사용자 경험을 보장하는 것이 중요하다. 이번 글에서는 자바스크립트를 사용하여 대용량 파일을 업로드하고 다운로드하는 기술에 대해 알아보겠다.

파일 업로드

대용량 파일을 업로드할 때, 일반적으로 chunked transfer encoding을 사용하여 파일을 조각 내서 전송한다. 여기에는 FileReader API를 사용하여 파일을 조각내고 fetch API를 사용하여 서버에 업로드하는 방법이 있다. 아래는 예시 코드이다.

// 파일을 조각내기
function uploadFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  let offset = 0;

  function readAndUpload() {
    const reader = new FileReader();
    const blob = file.slice(offset, offset + chunkSize);

    reader.onload = function(e) {
      const chunk = e.target.result;
      uploadChunk(chunk, offset, file.size);
      offset += chunk.byteLength;
      if (offset < file.size) {
        readAndUpload();
      } else {
        console.log('Upload complete');
      }
    };

    reader.readAsArrayBuffer(blob);
  }

  readAndUpload();
}

// 파일 조각을 서버에 업로드
function uploadChunk(chunk, start, totalSize) {
  // 서버에 조각 데이터를 업로드하는 로직 작성
  // fetch API를 사용하여 조각 데이터를 서버에 업로드
}

이 예시 코드에서 uploadFile 함수는 파일을 조각내서 uploadChunk 함수를 호출하여 서버에 업로드한다.

파일 다운로드

클라이언트 측에서 대용량 파일을 다운로드할 때도 비슷한 방식으로 chunked transfer encoding을 사용할 수 있다. 이를 위해 fetch API를 사용하여 서버에서 파일을 받아 조각내고, 조각을 합쳐서 파일을 다운로드하는 방식을 사용할 수 있다. 아래는 예시 코드이다.

// 파일을 조각내어 다운로드
async function downloadFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  async function readAndDownload() {
    const { done, value } = await reader.read();
    if (done) {
      console.log('Download complete');
      return;
    }

    // value에는 조각 데이터가 들어있음
    // 파일을 조각내어 로컬에 저장하는 로직 작성

    readAndDownload(); // 다음 조각을 읽음
  }

  readAndDownload();
}

이 예시 코드에서 downloadFile 함수는 fetch API를 사용하여 서버에서 파일을 받아 조각내어 로컬에 저장한다.

대용량 파일의 업로드와 다운로드는 사용자 경험을 향상시키는 중요한 기능이다. 자바스크립트를 사용하여 이러한 기능을 구현하고 관리하는 것은 웹 애플리케이션의 성능과 안정성을 유지하는 데 도움이 된다.

이상으로 대용량 파일 처리에 대한 자바스크립트 기술에 대해 알아보았다. 감사합니다!

파일 업로드

파일 다운로드

레퍼런스