HTML5 Blob.slice() 메서드란? 역할과 활용 예제 총정리

HTML5 Blob.slice() 메서드의 역할

HTML5에서 제공하는 Blob.slice() 메서드는 원본 Blob 객체 내에서 지정된 바이트 범위에 해당하는 데이터만 잘라내어, 그 데이터를 담은 새로운 Blob 객체를 생성하는 기능을 합니다. 즉, 대용량 파일이나 이진(binary) 데이터를 원하는 구간별로 분할할 때 매우 유용하게 사용됩니다.

메서드의 기본 형태는 다음과 같습니다.

blob.slice(start, end, contentType)

• start: 추출을 시작할 바이트 위치 (기본값 0)
• end: 추출을 종료할 바이트 위치 (기본값은 Blob의 마지막까지)
• contentType: 새롭게 생성되는 Blob의 MIME 타입 (기본값은 빈 문자열)

slice()를 활용한 이진 데이터 송수신 예제

다음 예제는 slice()를 통해 생성한 Blob 객체를 XMLHttpRequest의 POST 방식으로 서버에 전송하는 과정을 보여줍니다.

var val = new XMLHttpRequest();
val.open("POST", url, true);
val.onload = function (event) {
  // 서버 응답 처리 로직 작성
};
var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

위 코드에서는 먼저 'demo'라는 텍스트 데이터를 담은 Blob 객체를 생성한 뒤, 이를 요청 본문(body)에 담아 서버로 전송합니다. 서버는 받은 데이터를 파일 형태로 처리할 수 있습니다.

slice() 메서드의 주요 활용 사례

Blob.slice()는 특히 다음과 같은 상황에서 강력한 힘을 발휘합니다.

• 대용량 파일 청크 업로드: 큰 파일을 여러 개의 작은 조각으로 나누어 순차적으로 업로드하면 네트워크 오류 시 재전송 부담을 줄일 수 있습니다.
• 파일 미리보기: 전체 파일을 다루지 않고 일부 구간만 잘라내어 빠르게 미리보기를 제공할 수 있습니다.
• 부분 데이터 처리: 파일의 특정 영역만 읽어와 클라이언트 측에서 가볍게 처리할 수 있습니다.

이처럼 File.slice() 및 Blob.slice() 메서드는 브라우저 환경에서 파일과 이진 데이터를 효율적으로 다루기 위한 핵심 도구입니다.