웹/앱 클립보드 복사기능

회사 채널계[금융]에서 일을 받아 진행하던 중 클라이언트가 계좌를 클릭하면 자동으로 복사되는 기능을 구현할 일이 생겼다.
금융 IT 앱들을 살펴보면 흔하게 발견할 수 있고 편리하게 사용한 경험이 있어 기능구현할 생각에 간만에 기부니가 좋다.

복사기능은 당연하게도 보안 상 이유로 브라우저 별로 제약이 있거나 오류가 발생할 수 있다.

1. execCommand('copy')

• execCommand 자체가 웹 표준에선 더 이상 사용하지 않는 스크립트가 되면서 권장하는 방법은 아니다 하지만 다음에 소개할 방법은
  localhost 또는 https에서만 작동하는 API이기 떄문에 http에서 피치 못하게 사용해야 할 때 쓸 수 있는 방법이다.
• 복사할 문자는 selection 생성이 가능한 input이나(hidden 제외) textarea 값이어야 한다.
• 적용 이벤트는 꼭 사용자 직접 실행에 의해 반응하는 이벤트여야 한다.

code
var copyText = document.getElementById("testCopy");
copyText.select(); // selection 객체 생성
copyText.setSelectionRange(0, 99999); // selection 어디까지 지정할지 범위 지정
document.execCommand("Copy"); // 복사

2. navigator.clipboard.writeText("텍스트")

• then을 보면 알 수 있듯이 비동기로 복사를 실행 후 Promise를 반환하고 복사 완료 시 then의 콜백함수를 실행시킬 수 있다.
• 보안 상 문제로 https 또는 localhost에서만 사용할 수 있다.
• WebView에서는 클립보드에 대한 엑세스를 허용해야만 사용할 수 있다. 허용하지 않으면 DOMException: write permission denied를 마주칠 수 있습니다.
  android.permission.WRITE_EXTERNAL_STORAGE에 대해 권한을 허용해야 합니다.

code
var copyText = document.getElementById("testCopy");

window.navigator.clipboard.writeText(copyText.innerText).then(() => {
  alert("복사 완료!");
});

재밌는 기능을 개발했다, 수신고도화 작업하면서 복사 들어가는 기능은 전부 내 코드가 들어갈 듯 하다. 크크크