핵심 객체 개요

ArrayBuffer

ArrayBuffer는 고정 길이의 원시 바이너리 데이터 버퍼를 나타내는 JavaScript 객체입니다. 메모리에 저장된 바이너리 데이터를 직접 조작할 수 없으며, TypedArray나 DataView를 통해 접근해야 합니다.

// 8바이트 버퍼 생성
const dataBuffer = new ArrayBuffer(8);

// Int32Array로 데이터 조작
const intView = new Int32Array(dataBuffer);
intView[0] = 456;
console.log(intView); // Int32Array(2) [ 456, 0 ]

Blob

Blob(Binary Large Object)은 파일이나 데이터 조각을 표현하는 객체로, 텍스트, 이미지 등 다양한 형식의 데이터를 포함할 수 있습니다.

File

File은 Blob의 확장으로 사용자가 선택한 실제 파일 정보를 담고 있으며, 파일명, 크기, MIME 타입 등의 메타데이터를 제공합니다.

FileReader

FileReader는 Blob이나 File 객체의 내용을 비동기적으로 읽어들이며, 문자열이나 ArrayBuffer 형태로 변환해줍니다.

// Blob 생성 및 FileReader로 읽기
const contentBlob = new Blob(['안녕하세요!'], { type: 'text/plain' });

const fileReader = new FileReader();
fileReader.onload = function(e) {
  console.log(e.target.result); // 안녕하세요!
};
fileReader.readAsText(contentBlob);

ReadableStream

ReadableStream은 네트워크 요청이나 파일과 같은 소스로부터 데이터를 순차적으로 읽을 수 있는 스트림 인터페이스입니다.

async function fetchDataStream() {
  const response = await fetch('https://example.com/data');
  const streamReader = response.body.getReader();
  
  const chunks = [];
  
  while(true) {
    const { done, value } = await streamReader.read();
    if(done) break;
    chunks.push(value);
  }
  
  // 청크들을 하나의 문자열로 병합
  const mergedBlob = new Blob(chunks, { type: 'text/plain' });
  return await mergedBlob.text();
}

Response

Fetch API의 Response 객체는 HTTP 응답을 표현하며 상태 코드, 헤더, 본문 등을 포함합니다.

변환 예제

파일 입력 처리

<input type="file" id="fileSelector">
<script>
document.getElementById('fileSelector').addEventListener('change', async (e) => {
  const selectedFile = e.target.files[0];
  console.log(`선택된 파일: ${selectedFile.name}`);
  
  const reader = new FileReader();
  reader.onload = (event) => {
    console.log('파일 내용:', event.target.result);
  };
  reader.readAsText(selectedFile);
});
</script>

스트림 데이터 처리

async function processStream() {
  const httpResponse = await fetch('/api/data');
  const inputStream = httpResponse.body;
  
  const processedStream = new ReadableStream({
    async start(controller) {
      const reader = inputStream.getReader();
      
      try {
        while(true) {
          const { done, value } = await reader.read();
          if(done) break;
          
          // 데이터 처리 로직
          controller.enqueue(value);
        }
        controller.close();
      } finally {
        reader.releaseLock();
      }
    }
  });
  
  return new Response(processedStream, {
    headers: { 'Content-Type': 'application/octet-stream' }
  });
}

Response 객체 활용

const imageElement = document.querySelector('#targetImage');

// Request 생성 및 처리
const imageRequest = new Request('sample.png');

fetch(imageRequest)
  .then(response => response.blob())
  .then(imageBlob => {
    const imageUrl = URL.createObjectURL(imageBlob);
    imageElement.src = imageUrl;
  });

Response 생성자 사용

// 다양한 방식으로 Response 생성
const emptyResponse = new Response();
const textResponse = new Response('응답 데이터');
const jsonResponse = new Response(
  JSON.stringify({ message: '성공' }),
  {
    status: 200,
    statusText: 'OK',
    headers: {
      'Content-Type': 'application/json'
    }
  }
);