[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 자동 저장 기능 구현하기

30 Nov 2023

javascript

웹페이지에서 사용자가 텍스트를 복사하면 클립보드에 해당 내용이 저장되는 기능을 구현해야 할 때가 있습니다. 이번 블로그 포스트에서는 Clipboard.js 라이브러리를 사용하여 웹페이지에서 복사한 내용을 자동으로 저장하는 방법을 알아보겠습니다.

Clipboard.js 소개

Clipboard.js는 클립보드에 텍스트나 HTML 등을 복사하는 작업을 간단하게 처리해주는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 복사 기능을 구현하는 데 신속하고 편리하게 사용할 수 있습니다.

자세한 내용은 Clipboard.js 공식 사이트에서 확인할 수 있습니다.

구현 방법

다음은 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 자동으로 저장하는 방법입니다.

먼저 Clipboard.js 라이브러리를 프로젝트에 추가합니다. <script> 태그를 사용하여 CDN 링크 또는 로컬 파일을 추가할 수 있습니다. 아래는 CDN 링크를 사용하는 예시입니다.
```
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
```
복사 버튼을 생성합니다. 웹페이지에서 복사할 내용을 감싸는 요소에 id를 지정합니다. 그리고 복사 버튼을 클릭했을 때 해당 요소의 내용을 클립보드에 복사하는 코드를 추가합니다.
```
 <div id="copyTarget">
     복사할 내용을 입력하세요.
 </div>

 <button id="copyButton" data-clipboard-target="#copyTarget">
     복사
 </button>
```

자바스크립트 코드를 추가하여 Clipboard.js를 초기화합니다. new ClipboardJS()를 사용하여 복사 버튼과 클립보드를 연결합니다.

 var clipboard = new ClipboardJS('#copyButton');

 clipboard.on('success', function(e) {
     console.log('복사 성공:', e.text);
     // 복사한 내용을 서버로 저장하는 로직 추가
 });

 clipboard.on('error', function(e) {
     console.error('복사 실패:', e.action);
 });

복사를 성공했을 때 실행될 콜백 함수에서는 복사한 내용을 서버로 저장하는 로직을 추가할 수 있습니다. 이를 통해 사용자가 웹페이지에서 복사한 내용을 나중에 다시 찾아볼 수 있습니다.

결론

Clipboard.js를 사용하면 웹페이지에서 복사한 내용을 자동으로 저장하는 기능을 손쉽게 구현할 수 있습니다. 사용자가 웹페이지에서 흥미로운 내용을 복사하면 이를 서버에 저장하여 나중에 다시 찾아볼 수 있도록 할 수 있습니다.

자세한 내용은 Clipboard.js 공식 문서를 참고하시기 바랍니다.