자바스크립트(Javascript)로 정말 쉽게 클립보드 복사하기 기능 구현하는 방법

대부분의 사이트에서 URL을 공유하기 위해 텍스트 클립보드 카피 기능을 제공하고 있습니다.

ant design에서도 이렇게 복사하기 쉽게 제공하고 있습니다.

제가 예시로 든 Ant Design 말고도 정말 많은 서비스에서 이렇게 사용자들에게 편리함을 제공하기 위해 클립보드 복사를 애용하고 있습니다.

이렇게 간편한 클립보드 기능은 직접 구현하는 방법도 있고 clipboard.js라는 라이브러리를 활용해서 쉽게 구현하는 방법도 있습니다. 하지만 직접 구현하는 방법도 굉장히 간단하기 때문에 굳이 라이브러리를 설치하지 않고 직접 구현하는 것도 좋은 방법이라고 생각합니다.

중요한 점은 ClipboardAPI는 WEB API 최신 스펙을 기준으로 사용되고 있으므로, 아직 지원되지 않는 브라우저가 많은 점은 유의해야합니다.

브라우저 호환성

WEB API 최신 스펙을 기준으로 사용되고 있는 기능이기 때문에 프로젝트 브라우저 지원 범위에 따라서 사용여부를 결정하시길 바랍니다.

지원되지 않는 브라우저가 많은 점은 유의해야 합니다.

execCommand API

직접 구현할 때는 execCommand API를 사용합니다. document 는 execCommand 함수를 이용하여 수정가능한 영역을 관리하는 명령어를 사용합니다. 여기서는 execCommand API의 사용방법에 대해 알아보도록 하겠습니다.

구문

document.execCommand( commandName, showDefaultUI, value)
// commnadName - 실행할 명령어
// showDefaultUI - 기본 UI 를 보여줄지 말지 결정
// value - 수치 (명령어에 따라 필요한 경우 사용)
// Return Value - 실행결과는 true / false 값으로 리턴 됩니다. 

구현 예시

const copyText = (val) => {
  const tempElem = document.createElement('textarea')
  tempElem.value = val
  document.body.appendChild(tempElem)

  tempElem.select()
  document.execCommand('copy')
  document.body.removeChild(tempElem)
}

저의 경험상 이 정도 코드 정도면 텍스트 복사 기능은 어지간하면 커버 가능하다고 생각합니다.

clipboard.js 라이브러리

clipboard.js 설치는 굉장히 간단합니다. yarn이나 npm을 활용해서 설치하면 됩니다. cdn을 활용하고 싶으시다면 cdn 스크립트를 직접 추가해서 사용해도 됩니다. CDN 스크립트는 여기에서 확인할 수 있습니다.

npm install clipboard --save
// or
yarn add clipboard

브라우저 호환성

브라우저 호환성을 고려하면 직접 구현하는 대신 clipboard.js 라이브러리를 활용해서 하위 브라우저까지 대응하는 것이 좋습니다.

clipboard.js에서는 하위 브라우저까지 지원하는 모습

사용방법

clipboard.js 사용법은 공식문서에서 굉장히 쉽게 설명되어 있으니 아래를 참고해서 작업하시면 됩니다.

clipboard.js

마무리

서비스에 정말 간단한 텍스트 복사 기능을 구현하고 싶다고 하면 직접 클립보드 복사 함수를 하나 추가해서 사용하는 것이 깔끔할 것 같고, 조금 더 확장된 기능, 하위 브라우저 지원을 제공해야 된다면 clipboard.js를 활용하는 것을 고민해봐도 될 것 같습니다.