4P by neo 1달전 | favorite | 댓글과 토론

웹 클립보드와 데이터 저장 방식

  • 웹 클립보드 API 사용

    • 웹사이트에서 복사한 내용을 Google Docs에 붙여넣으면 서식이 유지되지만, VS Code에 붙여넣으면 텍스트만 붙여넣어짐
    • 클립보드는 MIME 타입과 연관된 여러 표현으로 정보를 저장함
    • W3C 클립보드 사양은 text/plain, text/html, image/png 세 가지 데이터 타입을 지원해야 함
  • 비동기 클립보드 API 사용

    • 특정 표현을 읽는 방법:
      const items = await navigator.clipboard.read();
      for (const item of items) {
        if (item.types.includes("text/html")) {
          const blob = await item.getType("text/html");
          const html = await blob.text();
          // HTML 처리...
        }
      }
      
    • 여러 표현을 클립보드에 쓰는 방법:
      const textBlob = new Blob(["Hello, world"], { type: "text/plain" });
      const htmlBlob = new Blob(["Hello, <em>world<em>"], { type: "text/html" });
      const clipboardItem = new ClipboardItem({ [textBlob.type]: textBlob, [htmlBlob.type]: htmlBlob });
      await navigator.clipboard.write([clipboardItem]);
      
  • 다른 데이터 타입

    • JSON 데이터를 클립보드에 쓰려고 하면 오류 발생:
      const json = JSON.stringify({ message: "Hello" });
      const blob = new Blob([json], { type: "application/json" });
      const clipboardItem = new ClipboardItem({ [blob.type]: blob });
      await navigator.clipboard.write([clipboardItem]);
      
    • application/json 타입은 지원되지 않음
  • isTrusted 속성

    • isTrusted 속성은 이벤트가 사용자 에이전트에 의해 디스패치되었는지 여부를 나타냄
    • 신뢰할 수 있는 이벤트에서만 클립보드에 데이터를 쓸 수 있음
  • 클립보드 이벤트 API

    • copy, cut, paste 이벤트에서 clipboardData 속성을 사용하여 데이터 읽기/쓰기 가능
    • JSON 데이터를 클립보드에 쓰는 방법:
      document.addEventListener("copy", (e) => {
        e.preventDefault();
        const json = JSON.stringify({ message: "Hello" });
        e.clipboardData.setData("application/json", json);
      });
      
  • clipboardData의 역사

    • 비동기 클립보드 API는 2017년에 추가되었지만, clipboardData는 훨씬 오래된 기능
    • clipboardData는 1997년 Internet Explorer 4에서 처음 도입됨
  • 신뢰할 수 없는 스크립트

    • 신뢰할 수 없는 스크립트는 제한된 데이터 타입만 클립보드에 쓸 수 있음
    • 신뢰할 수 없는 이벤트에서 클립보드에 데이터를 쓰려고 하면 실패함
  • 복사 버튼 만들기

    • Google Docs와 같은 웹 애플리케이션은 document.execCommand("copy")를 사용하여 신뢰할 수 있는 복사 이벤트를 트리거함
    • 이 방법을 사용하면 클릭 이벤트에서도 임의의 데이터 타입을 클립보드에 쓸 수 있음
  • 붙여넣기 버튼 만들기

    • execCommand("paste")는 브라우저와 운영체제에 따라 다르게 동작함
    • Safari는 사용자의 확인을 요구하지만, Chrome과 Edge는 Windows에서만 지원함
  • Figma의 복사 및 붙여넣기

    • Figma는 HTML 표현을 사용하여 클립보드에 데이터를 저장함
    • HTML 표현에 base64로 인코딩된 데이터를 포함시켜 클립보드에 저장
  • 웹 커스텀 포맷 (Pickling)

    • 2022년부터 Chromium 기반 브라우저에서 지원
    • 웹 애플리케이션이 비동기 클립보드 API를 통해 커스텀 데이터 타입을 쓸 수 있게 함
    • 예시:
      const json = JSON.stringify({ message: "Hello, world" });
      const jsonBlob = new Blob([json], { type: "application/json" });
      const clipboardItem = new ClipboardItem({ [`web ${jsonBlob.type}`]: jsonBlob });
      navigator.clipboard.write([clipboardItem]);
      

GN⁺의 정리

  • 이 글은 웹 클립보드 API와 데이터 저장 방식을 탐구함
  • 비동기 클립보드 API와 클립보드 이벤트 API의 차이점을 설명함
  • Google Docs와 Figma의 복사/붙여넣기 구현 방식을 분석함
  • 웹 커스텀 포맷(Pickling) 제안이 소개됨
  • 웹 개발자에게 유용한 정보와 클립보드 API의 한계를 이해하는 데 도움을 줄 수 있음