Compression (CompressionStream API)

#8PerformanceMedium

Compression (CompressionStream API)

Compression — CompressionStream API

브라우저 내장 CompressionStream / DecompressionStream API 를 사용해 클라이언트에서 직접 gzip 압축/해제를 수행하는 헬퍼를 만드세요. localStorage/IndexedDB 저장 전 압축, 큰 텍스트를 서버로 전송하기 전 압축 등에 실제로 쓰는 패턴입니다.

요구사항

compressText(text: string): Promise<Uint8Array> — UTF-8 인코딩 후 gzip 압축
decompressText(bytes: Uint8Array): Promise<string> — gzip 해제 후 UTF-8 디코딩
라운드 트립 보장: decompressText(await compressText(s)) === s 모든 문자열에 대해
반복 텍스트는 의미 있게 줄어듦: 같은 문자열을 1000번 반복한 입력은 압축 후 원본보다 훨씬 작음
빈 문자열, 멀티바이트(한글/이모지) 등 다양한 입력 정상 처리

힌트

const stream = new Blob([data]).stream().pipeThrough(new CompressionStream('gzip'));
const buffer = await new Response(stream).arrayBuffer();
return new Uint8Array(buffer);

해제는 같은 패턴으로 DecompressionStream('gzip') 사용.

학습 포인트

CompressionStream / DecompressionStream Web API 의 실제 사용
ReadableStream → pipeThrough → Response 패턴 (Web Streams)
클라이언트 측 압축의 실용적 시나리오 (네트워크 전송 + 로컬 저장)

export async function compressText(_text: string): Promise<Uint8Array> {
  // TODO:
  //   1) TextEncoder로 text → Uint8Array (UTF-8)
  //   2) Blob 또는 ReadableStream으로 만들어서 CompressionStream('gzip')으로 pipe
  //   3) 결과를 Response로 받아 arrayBuffer() → Uint8Array 반환
  throw new Error('Not implemented');
}

export async function decompressText(_bytes: Uint8Array): Promise<string> {
  // TODO:
  //   1) Blob([bytes]).stream() → pipeThrough(DecompressionStream('gzip'))
  //   2) Response.text() 로 문자열 얻기
  throw new Error('Not implemented');
}

// 데모용 React 컴포넌트
import { useState } from 'react';

export function CompressionDemo() {
  const [text, setText] = useState('hello hello hello hello hello world! '.repeat(50));
  const [stats, setStats] = useState<{ orig: number; compressed: number } | null>(null);

  async function run() {
    const compressed = await compressText(text);
    const restored = await decompressText(compressed);
    setStats({
      orig: new TextEncoder().encode(text).byteLength,
      compressed: compressed.byteLength,
    });
    if (restored !== text) console.error('Round-trip failed');
  }

  return (
    <div>
      <textarea
        data-testid="input"
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={6}
        cols={60}
      />
      <button data-testid="compress" onClick={run}>
        Compress
      </button>
      {stats && (
        <p data-testid="stats">
          {stats.orig} bytes → {stats.compressed} bytes ({Math.round((stats.compressed / stats.orig) * 100)}%)
        </p>
      )}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

export async function compressText(_text: string): Promise<Uint8Array> {
  // TODO:
  //   1) TextEncoder로 text → Uint8Array (UTF-8)
  //   2) Blob 또는 ReadableStream으로 만들어서 CompressionStream('gzip')으로 pipe
  //   3) 결과를 Response로 받아 arrayBuffer() → Uint8Array 반환
  throw new Error('Not implemented');
}

export async function decompressText(_bytes: Uint8Array): Promise<string> {
  // TODO:
  //   1) Blob([bytes]).stream() → pipeThrough(DecompressionStream('gzip'))
  //   2) Response.text() 로 문자열 얻기
  throw new Error('Not implemented');
}

// 데모용 React 컴포넌트
import { useState } from 'react';

export function CompressionDemo() {
  const [text, setText] = useState('hello hello hello hello hello world! '.repeat(50));
  const [stats, setStats] = useState<{ orig: number; compressed: number } | null>(null);

  async function run() {
    const compressed = await compressText(text);
    const restored = await decompressText(compressed);
    setStats({
      orig: new TextEncoder().encode(text).byteLength,
      compressed: compressed.byteLength,
    });
    if (restored !== text) console.error('Round-trip failed');
  }

  return (
    <div>
      <textarea
        data-testid="input"
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={6}
        cols={60}
      />
      <button data-testid="compress" onClick={run}>
        Compress
      </button>
      {stats && (
        <p data-testid="stats">
          {stats.orig} bytes → {stats.compressed} bytes ({Math.round((stats.compressed / stats.orig) * 100)}%)
        </p>
      )}
    </div>
  );
}

Open Sandbox