최근 사내 백오피스를 개발하면서 엑셀 다운로드, 엑셀 업로드 및 압축파일을 다루는 화면 개발을 작업했습니다. 기존의 이미지 업로드, 다운로드와 같은 간단한 미디어 작업은 다뤄봤지만 엑셀 작업을 진행하면서 Blob에 대해 처음 알게 되었습니다. 엑셀 관련 기능 구현은 하였지만 Blob에 대해서는 생소했던 터라 이번 포스팅을 통해 Blob에 대해 자세히 살펴보겠습니다.
Blob은 Binary Large Object의 약자로 말 그대로 커다란 이진 데이터의 집합체 입니다. 원시 데이터를 다양한 포맷으로 나타내거나 가공할때 사용되며 주로 이미지, 비디오, 영상 등의 미디어 데이터에서 활용됩니다. 미디어 뿐만 아니라 html, plain text 등 바이너리로 표현 가능한 많은 데이터에서 쓸 수 있습니다.
Blob은 모던 웹브라우저에서 지원되며 파일 처리, 데이터 가공 및 다양한 상황에서 유용하게 사용할 수 있습니다. 다음으로 예제 코드를 통해 Blob의 특성과 사용법에 대해 알아보겠습니다.
Blob 사용하기
Blob을 생성하기 위해 Blob()생성자를 통해 다음과 같이 초기화합니다.
new Blob(blobParts, options);
이번에는 문자열을 담은 Blob을 생성해보겠습니다. 첫번째 인자로는 Blob으로 변환할 데이터의 배열을 전달하고 두번째 인자에는 데이터의 종류를 MIME 타입으로 지정합니다. 타입의 종류는 굉장히 다양한데 다음 링크에서 확인할 수 있습니다. 예를 들어 엑셀 타입은 application/vnd.xlsxformats-officedocument.spreadsheetml.sheet을 지정합니다.
let blob = new Blob(["<html>…</html>"], {
type: 'text/html'
});
Blob은 또한 slice를 통해 일부분을 잘라낼 수도 있습니다.
blob.slice([byteStart], [byteEnd], [contentType]);
Array의 slice 문법과 동일하며 slice(-1)처럼 역으로도 추출이 가능합니다. 여기서 주의해야 할 점은 Blob은 immutable 하기 떄문에 직접적으로 수정할 수 없습니다. 단지 slice와 merge를 통해 Blob을 변경시킬 수 있습니다.
Blob으로 Excel 다운로드 하기
지금까지 Blob의 간단한 사용법에 알아봤습니다. 이번에는 Blob을 활용해 Excel을 다운로드 받는 예제를 알아보겠습니다. 서버로부터 엑셀 데이터를 내려받는 전제하에 진행하겠습니다.
서버로부터 받은 엑셀 데이터를 Blob에 배열로 저장하고 엑셀 type을 지정합니다. 만약 서버의 response header를 통해 파일명과 type을 받는다면 해당 데이터를 활용하고, 따로 없으면 직접 지정해줍니다.
new Blob(blobParts, options);엑셀 Blob이 생성되면 window.URL.createObjectURL()메서드를 활용해 URL을 생성합니다.
let blob = new Blob(["<html>…</html>"], {
type: 'text/html'
});해당 메소드는 매개 변수로 받은 객체를 지정하는 URL을 생성합니다. 해당 URL의 생명주기는 window의 객체의 document에서만 유효하고 영구적이지 않기때문에 재활용 할 수 없습니다. URL의 사용을 마쳤다면 메모리 관리를 위해 아래 메서드를 통해 해제해주는 게 좋습니다.
blob.slice([byteStart], [byteEnd], [contentType]);엑셀 Blob과 URL까지 준비된다면 a 태그를 생성해 link를 지정하여 엑셀을 다운로드 받을 수 있습니다. 전반적인 코드를 통해 살펴보겠습니다.
// 서버로부터 엑셀 관련 데이터를 내려받습니다.
((response)=>{
// Blob 객체를 만들고 url을 생성합니다.
const blob = new Blob([response.data], { type: type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet });
const url = window.URL.createObjectURL(blob);
// a 태그를 생성해 url 링크를 걸어줍니다.
const link = document.createElement("a");
link.href = url;
// 파일이름을 지정하고 (서버에서 내려주지 않을경우) click을 실행해 다운로드를 요청합니다.
const fileName = "파일이름.xlsx"
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
// 사용이 완료된 url은 메모리에서 할당해줍니다.
URL.revokeObjectURL(link);
})마치며
막연하게 사용하던 Blob에 대해 전반적으로 알아보는 과정을 가져봤습니다. 현업에서는 간단히 사용하는 Blob이지만 데이터가 중요한 도메인 혹은 서비스라면 더욱 잘 사용해야겠다는 생각이 들었습니다.
'💻 개발 > Frontend' 카테고리의 다른 글
| 직장인들의 IT 개발모임 직띵(Zicdding) FE 스터디 발표 후기 (0) | 2024.05.30 |
|---|---|
| 모듈 번들러의 탄생과 Rollup.js 파헤치기 (0) | 2024.05.27 |
| [Next.js] Turborepo의 캐싱 과정과 build시 적용되지 않았던 이슈 (0) | 2024.05.21 |
| AWSKRUG 프론트엔드 1월 Meepup 후기 (Cognito + Next-Auth) (1) | 2024.01.16 |
| [Storybook] Storybook MDX 마크다운으로 템플릿 작성하기 (0) | 2023.12.29 |
