JS Clipboard API 클립보드 복사 (+ exeCommand)

 

거두절미하고 document.exeCommand() 방식은 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboard API 사용이 권장되고 있다.

그럼에도 불구하고 exeCommand를 사용해야했는데 이유는 http 사이트였기 때문이다.

Clipboard API는 https OR localhost인 사이트에서만 동작한다.

http 사이트에서는 복사가 안되는 문제가 발생하는 것이다.. 추후에 https로 변경될 가능성이 있으나 안전하게 가보기로 했다.

이 부분을 보완하기 위해 조건에 따라 실행하기로 결정했다.

if (navigator.clipboard !== undefined) {
  navigator.clipboard
    .writeText(window.location.href)
    .then(() => {
      // 성공시 보여줄 내용 ex) alert('링크 복사가 완료되었습니다.')
    })
    .catch((error) => console.log(error));
} else {
  const tempTextarea = document.createElement('textarea');
  document.body.appendChild(tempTextarea);
  tempTextarea.value = window.location.href;
  tempTextarea.select();
  tempTextarea.setSelectionRange(0, 99999);
  document.execCommand('copy');
  tempTextarea.setSelectionRange(0, 0);
  document.body.removeChild(tempTextarea);
}

그렇다고해서 exeCommand만 사용해 올리기엔 너무 구버전의 방식이고 웹 표준에서 Deprecated 되었기 때문에 가급적 피하고 싶었다.이런식으로 해서 http는 exeCommand를 사용할 것이고 그게 아니라 https 혹은 로컬 환경일 경우 clipboard를 사용할 것이다.

setSelectionRange를 사용한 이유는 IOS, Android 환경에서 실행되지 않는 문제를 해결하기 위해 작성한 코드다.

 

참고

• [JS] 텍스트 복사(Copy) 완전 쉬운 방법: Clipboard API
• [React] 문자열 클립보드 복사 기능 구현