대용량 파일 업로드를 정신 놓지 않고 처리하는 방법

대용량 파일 업로드를 최적화해야 하는 이유

프론트엔드 개발에서 이미지, 비디오, 오디오 파일 등 파일 업로드가 필요한 시나리오를 자주 접하게 됩니다. 파일 업로드 중 파일이 너무 커서 다음과 같은 문제가 발생할 수 있습니다.

• 업로드 시간이 오래 걸리고 사용자 경험이 저하됩니다.
• 과도한 서버 부하 및 리소스 소모를 유발합니다.
• 불안정한 네트워크 환경에서 업로드 실패가 발생하여 재업로드가 필요하고 시간과 대역폭이 낭비됩니다.
• 높은 브라우저 메모리 사용량으로 인해 성능과 안정성에 영향을 미칩니다.

이러한 문제를 해결하려면 대용량 파일 업로드를 최적화해야 합니다.

최근 인터넷 애플리케이션에서 사용자는 파일 업로드에 대한 요구 사항이 점점 더 높아지고 있습니다. 예를 들면 다음과 같습니다.

• 소셜 플랫폼에서 고해상도 이미지 및 비디오 공유.
• 교육 플랫폼에서 과제 및 강의 자료 제출.
• 엔터프라이즈 플랫폼에서 프로젝트 문서 및 보고서 업로드.

이러한 시나리오에서 사용자가 업로드해야 하는 파일은 종종 매우 크며, 때로는 수백 메가바이트 또는 심지어 수 기가바이트에 달하기도 합니다. 기존 파일 업로드 방법을 사용하면 앞서 언급한 문제에 직면하게 됩니다.

기존 파일 업로드 방법은 전체 파일을 단일 요청 본문으로 서버에 보내는 것입니다. 이 접근 방식에는 다음과 같은 몇 가지 단점이 있습니다.

• 긴 업로드 시간: 파일 크기가 크기 때문에 데이터 전송에 오랜 시간이 걸리므로 사용자는 업로드 결과를 보기 위해 오랫동안 기다려야 합니다.
• 높은 서버 부하: 대용량 파일은 서버가 한 번에 많은 양의 데이터를 수신하고 처리해야 하므로 과도한 서버 메모리, CPU, 대역폭 및 기타 리소스를 소비할 수 있습니다.
• 불안정한 네트워크에서 실패하기 쉬움: 대용량 파일 전송은 연결 끊김, 시간 초과 또는 패킷 손실과 같은 네트워크 문제에 취약하여 업로드 실패로 이어지고 사용자가 전체 파일을 다시 업로드해야 합니다.
• 높은 브라우저 메모리 사용량: 대용량 파일은 브라우저가 전체 파일을 메모리에 읽어들이고 연결을 유지해야 하므로 높은 메모리 사용량으로 이어지고 다른 페이지의 성능에 영향을 미칠 수 있습니다.

이러한 문제를 해결하려면 대용량 파일 업로드를 최적화하는 것이 필수적입니다.

설계 접근 방식

대용량 파일 업로드를 최적화하는 주요 접근 방식은 다음과 같습니다.

1. 청크 분할

대용량 파일을 더 작은 청크로 나누고 각 청크를 서버에 대한 별도의 요청으로 보냅니다. 이렇게 하면 요청당 데이터 양이 줄어들고 업로드 시간이 단축되며 서버 부하가 줄어들고 재개 가능한 업로드가 가능해집니다.

function sliceFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const slices = Array.from({ length: chunks }, (_, index) => {
    const start = index * chunkSize;
    const end = start + chunkSize;
    return file.slice(start, end);
  });
  return slices;
}

2. 동시성

여러 청크 요청을 서버에 동시에 보내 네트워크 대역폭과 서버 리소스를 최대한 활용하여 사용자 경험을 개선합니다.

async function uploadChunks(fileChunks) {
  const uploadPromises = fileChunks.map((chunk) =>
    fetch('/upload', { method: 'POST', body: chunk })
  );
  const responses = await Promise.all(uploadPromises);
  return responses;
}

3. 압축

서버에 보내기 전에 각 청크를 압축하여 데이터 크기를 더욱 줄이고 전송 효율성을 높입니다.

async function compressChunk(chunk) {
  const compressedChunk = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const result = pako.deflate(event.target.result);
      resolve(result);
    };
    reader.onerror = (event) => reject(event.error);
    reader.readAsArrayBuffer(chunk);
  });
  return compressedChunk;
}

4. 유효성 검사

데이터 무결성 및 정확성을 보장하기 위해 전송 전후에 각 청크를 검증하여 중복되거나 잘못된 데이터 전송을 방지합니다.

async function verifyChunk(chunk) {
  const hash = await calculateHash(chunk);
  const response = await fetch(`/verify?hash=${hash}`);
  const result = await response.json();
  return result;
}

5. 재개 가능한 업로드

네트워크 오류가 발생한 경우 처음부터 다시 시작하는 대신 중단된 지점부터 계속 업로드하여 시간을 절약하고 속도를 향상시킵니다.

async function resumeUpload(file, resumeByte) {
  const blob = file.slice(resumeByte);
  const formData = new FormData();
  formData.append('file', blob);
  const response = await fetch('/upload', { method: 'POST', body: formData });
  const result = await response.json();
  return result;
}

6. 즉시 업로드

파일을 분할하여 업로드하기 전에 해당 해시를 계산하여 서버에 보냅니다. 서버가 동일한 파일을 찾으면 즉시 성공 응답을 반환하여 중복 업로드를 방지할 수 있습니다.

async function checkFileExists(file) {
  const hash = await calculateHash(file);
  const response = await fetch(`/check?hash=${hash}`);
  const result = await response.json();
  return result;
}

요약

이 문서에서는 대용량 파일 업로드를 최적화해야 하는 이유와 주요 최적화 전략을 소개합니다. 코드 예제를 통해 이러한 최적화 방법을 구현하는 방법을 보여줌으로써 독자가 대용량 파일 업로드 최적화를 위한 솔루션을 이해하고 적용할 수 있도록 하는 것을 목표로 합니다.

---

Leapcell은 백엔드 프로젝트 호스팅을 위한 최고의 선택입니다. 최대 100MB의 파일 업로드를 지원합니다!

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발하세요.

무제한 프로젝트를 무료로 배포하세요

• 사용량에 대해서만 지불하세요. 요청도 없고 요금도 없습니다.

탁월한 비용 효율성

• 사용한 만큼 지불하고 유휴 요금은 없습니다.
• 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

손쉬운 확장성 및 고성능

• 고도의 동시성을 쉽게 처리할 수 있는 자동 확장.
• 운영 오버헤드가 전혀 없으므로 구축에만 집중하세요.

설명서에서 자세히 알아보세요!

X에서 팔로우하세요: @LeapcellHQ