[책] 자바스크립트 코드 레시피 278 - 208일차

fetch()로 바이너리 데이터 읽어 오기

• 바이너리 파일을 읽어 오고 싶을 때
• 텍스트 파일이 아닌 형식을 다루고 싶을 때

실습

이미지와 3D 데이터의 대부분은 텍스트 파일이 아닌 포맷을 가지고 있으며, 이를 바이너리 형식이라고 합니다. 바이너리 형식은 blob()을 사용해서 처리하며, 웹의 경우 3D 데이터와 이미지 해석 분야 등에 사용됩니다.

Promise를 사용하는 방법

const btn = document.querySelector('.button');
btn.addEventListener('click', () => {
  fetch('img.jpg')
    .then((res) => res.blob())
    .then((blob) => {
    const image = new Image();
    image.src = URL.createObjectURL(blob);
    document.body.appendChild(image);
  });
});

await와 async를 사용하는 방법

const btn = document.querySelector('.button');
btn.addEventListener('click', () => {
  async function load() {
    const res = await fetch('img.jpg');
    const blob = await res.blob();
    const image = new Image();
    image.src = URL.createObjectURL(blob);
    document.querySelector('#log').appendChild(image);
  }
  load();
});