[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 데이터베이스에 저장하기

[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 데이터베이스에 저장하기

30 Nov 2023

javascript

이번 포스트에서는 Clipboard.js 라이브러리를 활용하여 웹페이지에서 복사한 텍스트를 데이터베이스에 저장하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드 작업을 쉽게 처리할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 여러 플랫폼과 브라우저에서 작동하며, 복사 및 붙여넣기 등의 기능을 편리하게 제공합니다.

사용 방법

먼저, Clipboard.js를 웹페이지에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

복사 버튼을 생성하고 데이터베이스에 저장할 텍스트를 설정합니다.

<button class="copy-btn" data-clipboard-text="저장할 텍스트">복사</button>

클립보드 이벤트를 등록하고 복사 버튼을 클릭했을 때 실행될 코드를 작성합니다.

<script>
document.addEventListener('DOMContentLoaded', function () {
  var clipboard = new ClipboardJS('.copy-btn');
  
  clipboard.on('success', function(e) {
    console.log('복사 완료: ' + e.text);
    
    // 여기서 데이터베이스에 저장하는 코드를 작성합니다.
    // 예를 들어, Ajax를 사용하여 서버에 요청을 보내고 저장할 데이터를 전송합니다.
    // 저장할 데이터는 e.text를 활용합니다.

    e.clearSelection();
  });
});
</script>

위 코드에서 e.text는 복사된 텍스트를 나타내며, 데이터베이스에 저장할 때 사용할 수 있습니다. 여기서는 console.log로 출력하도록 되어 있으니 콘솔에서 결과를 확인하실 수 있습니다.

이제 웹페이지에서 텍스트를 복사하고 복사 버튼을 클릭하면 해당 텍스트가 데이터베이스에 저장됩니다.

주의 사항

Clipboard.js를 사용하기 위해서는 반드시 clipboard.min.js 파일을 추가해야 합니다.
클립보드 작업은 보안 상의 이유로 일부 브라우저에서는 제한될 수 있습니다. 사용자가 복사 작업을 수행하기 전에 허용하는지 확인하는 것이 좋습니다.

참고 자료