[Javascript] Clipboard API

Clipboard API?

Clipboard API는 클립보드 명령(복사, 잘라내기, 붙여넣기)에 응답하거나 시스템 클립보드에 비동기적으로 접근하고 쓸 수 있는 기능을 제공한다.

사용동기

설문조사를 생성하고 링크 생성하기를 눌렀을때, 사용자에게 링크를 보여준다. 링크 복사 버튼을 눌렀을때, 링크가 자동으로 복사되면 좋을 것 같다는 생각에 Clipboard API를 사용하게 되었다.

사용방법

const copyUrl = async () => {
    await navigator.clipboard.writeText({복사하고싶은 내용});
  };

...

// 온클릭 이벤트로 copyUrl 함수 실행
<img src={"/copy.png"} alt="공유하기" onClick={copyUrl} />

• 비동기로 진행되어 Promise를 반환하기에 async, await, then 사용 할 수 있다.

navigater 객체란?

• navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체입니다.
• 이 객체의 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래되었습니다.