RPG처럼 웹 개발하기

Blob으로 이미지 업로드 훑어보기 본문

웹 개발

Blob으로 이미지 업로드 훑어보기

RPG 마니아 2022. 10. 2. 14:17

들어가기 전 용어 정리!

 

  1. Blob → ( Binary Large OBject ) 의 앞 단어들을 따와서 만든 축약어 입니다.
  2. Binary → 이진법을 의미합니다. ( 1010011 )
  3. Object → 말 그대로 객체입니다.
  4. 청크 → 데이터 덩어리입니다.

Blob이란?

 

Binary Large Object.

단어 그대로 이진수로 이루어진 큰 객체라는 뜻 입니다.

JS 에서 Blob이 사용되는 이유?

 

이미지, 동영상, 등 멀티미디어 데이터를 다룰때 사용합니다.

 

프론트엔드에서 Blob은 보통 서버에 이미지, 동영상을 올리거나,

서버에서 Blob 형태의 이미지 파일을 받아와서 사용하는 형태로 사용이 되고 있습니다.

 

그리고 이미지를 업로드 하기전, 미리보기를 보여주는 형태로도 사용되고 있습니다.

 

저는 이번 글에서 서버에 이미지를 전송하기 위해서 사용해보겠습니다.

 

그리고 Blob 형태의 이미지를 미리볼 수 있도록 만들어 보겠습니다.

 

그럼 이제 Blob을 이해하기 쉽게 작성해보겠습니다.

 

이미지를 Blob으로 만들기!

아래 코드들은 비효율적이며, 좋은 코드가 아닙니다.

Blob을 설명하기 위한 코드들 입니다.

 

 

저는 이미지를 가지고 Blob 을 만들것이기 때문에,

이미지 파일을 만질 수 있도록 html을 작성해보겠습니다.

 

<body>
	<input type="file" accept="image/*" >
<body/>

 

JS를 통해서 만들 수 있기 때문에 위에 작성한 input을 만질 수 있는 코드를 작성해보겠습니다.

 

const inputFileTag = document.querySelector('input');

const changeFileHandle = (e) => {
  const file = e.target.files[0];
  const blob = new Blob([file], { type: 'image/png' });
	console.log(blob);
};

inputFileTag.addEventListener('change', changeFileHandle);

위 코드로 아주 간단하게 이미지를 Blob으로 만들 수 있습니다.

 

그러면 왜 Blob으로 만드는걸까요?

 

Blob 을 사용하는 이유?

 

  1. 브라우저에 Blob으로 저장된 파일이 있을때, 서버에 추가요청 없이 파일을 보여줄 수 있습니다.
  2. URL.createObjectURL(blob) 을 사용해서 URL 을 사용할 수 있어서, 미리보기처럼 보여줄 수 있습니다.

위 두가지를 할 수 있는 이유는

변수에 이미지의 경로를 저장하는 것이 아니라,  변수에 이미지 파일을 담을 수 있기 때문입니다.

 

변수에 이미지 파일이 담겼으면 이제 이미지를 기존보다 더 정교하게 만질 수 있다는 뜻입니다.

base64, ArrayBuffer, FileRead 등을 통해서 여러가지 작업을 할 수 있습니다.

 

사진 업로드 전 미리보기

 

위에서 적었던 URL.createObjectURL(blob) 을 사용해서 URL 을 생성할 수 있습니다.

 

const inputFileTag = document.querySelector('input');

const changeFileHandle = (e) => {
  const file = e.target.files[0];
	const url = URL.createObjectURL(blob);
  console.log(url);
};

inputFileTag.addEventListener('change', changeFileHandle);

<body>
	<input type="file" accept="image/*" >
	<img src="" />
<body/>

const inputFileTag = document.querySelector('input');
const imgTag = document.querySelector('img');

const changeFileHandle = (e) => {
  const file = e.target.files[0];
	const url = URL.createObjectURL(blob);
	imgTag.src = url;
  console.log(url);
};

inputFileTag.addEventListener('change', changeFileHandle);

위 코드처럼 미리보기를 보여줄 수 있습니다.

 

해당 URL을 사용하고 난 뒤, 필요 없어졌을때 URL.revokeObjectURL(url) 을 통해서 생성한 URL을 제거해주는것이 좋습니다.

 

문서가 언로드될 때 객체 URL을 자동으로 해제하지만,

최적의 성능과 메모리 사용을 위해 명시적으로 언로드할 수 있는 안전한 시간이 있다면

URL.revokeObjectURL(url) 코드를 통해 언로드 해야 합니다.

 

그럼 서버로 데이터를 보낼때는 기존 방식과 어떻게 다를까요?

 

기존에 이미지를 서버에 보내는 방법

 

보통은 Blob 으로 만들어서 서버에 보내는 형태가 아니라

new FormData() 를 만든 뒤, Input 태그에 files을 FormData에 넣어주고,

그 FormData를 서버에 보내는 형태로 작성을 합니다.

 

const inputFileTag = document.querySelector('input');

const changeFileHandle = (e) => {
	// 하나의 이미지만 넣어줄거라 files[0]으로 고정했습니다.
  const file = e.target.files[0];
	const formData = new FormData();
	formData.append('file', file);
	// fetch!
};

inputFileTag.addEventListener('change', changeFileHandle);

 

const file = e.target.files[0]; 코드가 실행되면 file 변수에 사용자가 넣어준 File이 들어가게 됩니다.

이 file 변수에는 파일의 최종 수정일, 이름, 크기, 타입 등의 데이터가 들어가 있습니다.

 

Blob을 서버에 보내는 방법

 

위에서 보내는 방식과 거의 동일합니다.

 

다른점은 FormData를 만들지만 이번에는 File이 아니라 Blob으로 변환해서 넣어주는것 입니다.

 

const inputFileTag = document.querySelector('input');

const changeFileHandle = (e) => {
	// 하나의 이미지만 넣어줄거라 files[0]으로 고정했습니다.
  const file = e.target.files[0];
  const blob = new Blob([file], { type: 'image/png' });
	const formData = new FormData();
	formData.append('blob', blob);
	// fetch!
};

inputFileTag.addEventListener('change', changeFileHandle);

 

결론적으로 제 생각은…

특별한 상황이 없이, 멀티미디어 데이터를 서버에 보내주는 입장이라면

Blob을 만들어서 보내줄 필요 없이, 그냥 FormData 에 File 을 담아서 보내주면 된다고 생각합니다.

 

서버에서 받는 입장일때도 보통은, 서버가 AWS S3의 이미지 주소를 보내주면

그 주소를 img 태그의 src로 적어주면 된다고 생각합니다.

 

결론적으로 필요한 상황에만 Blob을 사용하는게 좋다고 생각합니다.

 

그렇다면 Blob은 어떤 상황에 사용했을때 장점을 발휘할 수 있을까요?

 

 

바로 파일이 너무 큰 경우라고 생각합니다.

 

파일이 너무 큰경우, slice를 사용해서 파일을 나누어서 서버에 전달할 수 있기 때문입니다.

청크로 업로드하는것 이지요.

 

주로 파일이 크거나, 다른 특정한 이유가 있을때 Blob을 사용한다고 생각했습니다.

 

큰 멀티미디오 파일을 다룰때 더 자세하게 Blob을 알아보도록 하겠습니다 ^^

 

 

 

제가 이해한 정보가 잘못되었거나 틀린부분이 있으다면 댓글로 알려주신다면 언제나 오예입니다 ^__^

 

 

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

'웹 개발' 카테고리의 다른 글

Null vs Undefind  (0) 2022.11.24
Interface VS Type alias 비교하기  (0) 2022.11.20
PWA 푸시알림 어떻게 구현하지?  (0) 2022.09.05
시멘틱 태그( Sematic Tag )를 잘 사용하는 방법?  (0) 2022.08.24
웹 성능을 최적화하는 쉽고 간단한 방법? ( feat. 이미지 )  (0) 2022.08.09
'웹 개발' Related Articles more
Comments