[TIL] Clipboard API

📠 Clipboard API

---

Clipboard API를 사용해서 클립보드에 문자열 복사하기 기능을 만들어보기!

Clipboard API 문서

🚨🚨🚨 localhost, HTTPS 에서만 사용할 수 있다 (※ HTTP 사용 X ※) 🚨🚨🚨

비동기로 작동하며, Promise를 반환하여 async await나 .then을 사용하면 된다.

📝 navigator.clipboard.writeText()

navigator.clipboard.writeText()를 사용하면 괄호 안에 내용을 복사할 수 있다.

const handleCopyClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    alert('클립보드에 복사되었습니다.');
  } catch (error) {
    console.log(error, '복사 실패');
  }
}

<button onClick={() => handleCopyClipboard('복사할 텍스트')}>복사하기</button>