[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 다른 기기로 동기화하기

30 Nov 2023

javascript

최근에는 우리가 사용하는 기기들이 많아지고 있습니다. 웹페이지에서 텍스트를 복사하여 다른 기기로 전달하는 경우도 빈번하게 발생합니다. 이러한 경우를 간편하게 처리해주는 Clipboard.js라이브러리를 소개하겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드 기능을 웹페이지에서 손쉽게 사용할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 사용자가 웹페이지에서 텍스트를 복사할 때, 해당 텍스트를 클립보드에 저장해주는 기능을 제공합니다.

설치하기

npm을 사용하여 Clipboard.js를 설치할 수 있습니다. 다음 명령어를 터미널에 입력하여 설치합니다.

npm install clipboard

또는 npm 없이 사용하고 싶은 경우, 다음 스크립트 태그를 HTML 파일에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js"></script>

사용하기

Clipboard.js를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

HTML 요소에 복사할 텍스트를 포함시킬 클래스를 추가합니다. 예를 들어, <button> 태그에 class="clipboard-btn"를 추가합니다.

<button class="clipboard-btn">복사하기</button>

자바스크립트 코드에서 Clipboard.js를 초기화합니다. 다음 코드는 .clipboard-btn 클래스를 가진 모든 요소를 선택하여 클립보드 이벤트 핸들러를 추가합니다.

var clipboard = new ClipboardJS('.clipboard-btn');

복사가 성공했을 때, 복사된 내용을 사용자에게 알려주는 메시지를 표시합니다. 이를 위해 success 이벤트 리스너를 등록합니다.

clipboard.on('success', function(e) {
  alert('텍스트가 클립보드에 복사되었습니다!');
});

예제

다음은 Clipboard.js를 사용하여 텍스트를 복사하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Clipboard.js 예제</title>
  <script src="https://cdn.jsdelivr.net/npm/clipboard@latest/dist/clipboard.min.js"></script>
</head>
<body>
  <button class="clipboard-btn" data-clipboard-text="텍스트를 복사합니다.">복사하기</button>

  <script>
    var clipboard = new ClipboardJS('.clipboard-btn');
  
    clipboard.on('success', function(e) {
      alert('텍스트가 클립보드에 복사되었습니다!');
    });
  </script>
</body>
</html>

결론

Clipboard.js는 웹페이지에서 텍스트를 손쉽게 복사하고 다른 기기로 전달할 수 있도록 도와줍니다. 간단한 세팅만으로도 사용할 수 있고, 다양한 기능을 제공하므로 개발자들에게 유용한 도구입니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.

Clipboard.js 공식 문서: https://clipboardjs.com/
실제로 동작하는 예제: https://clipboardjs.com/