Clipboard API 클립보드에 데이터 복사하기

선택 영역을 복사하는 방법으로 대부분의 브라우저에서 지원하는 document.exacCommand()를 사용했었다.

document.execCommand(aCommandName [, aShowDefaultUI, aValueArgument] )

그러나...
execCommand 기반 복사 및 붙여넣기는 동기적 특성(브라우저가 페이지를 차단함)으로 인해
현재 웹표준에서 삭제되어 Deprecated 되었다는 것

📌Clipboard API

아직 호환이 안되는 몇몇 브라우저가 있지만 공식문서에서도 Clipboard API 사용을 권장하고 있다.

사용 예시

<textarea id="textArea">
	JavaScript 클립보드 복사하는 방법(Clipboard API, clipboard.js)
</textarea>
  <button onclick="copyToClipBoard()">Copy</button>

function copyToClipBoard(){
    var content = document.getElementById('textArea').innerHTML;

    navigator.clipboard.writeText(content)
        .then(() => {
        console.log("Text copied to clipboard...")
    })
        .catch(err => {
        console.log('Something went wrong', err);
    })
   }

.innerHTML 속성을 통해 textarea 내부에 있는 텍스트를 가져오고, 해당 텍스트를 content에 저장한다.
복사 기능에서는 navigator.clipboard.writeText() 함수를 사용하고,
붙여넣기 기능에서는 navigator.clipboard.readText() 함수를 사용한다.

(Clipboard API는 Safari 13.1 버전부터 https 환경에서만 지원되기 때문에 인증서가 설치되지 않은 사이트의 경우 사용하기 적합하지 않을 수도 있습니다.)

공식 홈페이지 clipboard.js
참고문서