# 웹 클립보드와 다양한 유형의 데이터 저장 방식

> Clean Markdown view of GeekNews topic #16578. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16578](https://news.hada.io/topic?id=16578)
- GeekNews Markdown: [https://news.hada.io/topic/16578.md](https://news.hada.io/topic/16578.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2024-09-02T23:34:21+09:00
- Updated: 2024-09-02T23:34:21+09:00
- Original source: [alexharri.com](https://alexharri.com/blog/clipboard)
- Points: 4
- Comments: 0

## Topic Body

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

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

- **비동기 클립보드 API 사용**
  - 특정 표현을 읽는 방법:
    ```javascript
    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 처리...
      }
    }
    ```
  - 여러 표현을 클립보드에 쓰는 방법:
    ```javascript
    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 데이터를 클립보드에 쓰려고 하면 오류 발생:
    ```javascript
    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 데이터를 클립보드에 쓰는 방법:
    ```javascript
    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를 통해 커스텀 데이터 타입을 쓸 수 있게 함
  - 예시:
    ```javascript
    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의 한계를 이해하는 데 도움을 줄 수 있음

## Comments



_No public comments on this page._