먼저 Clipboard.js 라이브러리를 웹페이지에 추가합니다. 아래 예제는 CDN을 이용한 방법입니다.

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

이제 복사 이벤트가 발생했을 때 특정 문자열을 추가하는 코드를 구현해보겠습니다. 아래는 예제 코드입니다.

// 복사 이벤트 발생 시 처리할 함수
function addTextToClipboard(event) {
  var text = event.clipboardData.getData('text/plain');
  var appendedText = text + ' 추가할 문자열';
  event.clipboardData.setData('text/plain', appendedText);
}

// Clipboard.js를 초기화하고 이벤트 리스너를 등록합니다.
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('beforecopy', addTextToClipboard);

위 코드에서 .copy-button은 복사 버튼의 클래스명을 의미합니다. 복사 버튼을 클릭할 때, addTextToClipboard 함수가 실행되고 원래 복사되어야 할 내용에 ‘추가할 문자열’이 추가됩니다.

이제 복사 버튼을 추가하고, 해당 버튼에 .copy-button 클래스를 지정하면 됩니다.

<button class="copy-button">복사</button>

위 코드에서는 단순히 버튼을 예로 들었지만, 다른 요소에서도 동일한 방식으로 사용할 수 있습니다.

이제 웹페이지에서 내용을 복사하면, 원래 복사되어야 할 내용 뒤에 ‘추가할 문자열’이 자동으로 추가된 상태로 클립보드에 저장됩니다.

이번 포스트에서는 Clipboard.js를 사용하여 웹페이지에서 복사한 내용에 특정 문자열을 추가하는 방법을 알아보았습니다. 라이브러리를 활용하면 복사 이벤트를 간편하게 처리할 수 있어 개발 과정에서 유용하게 사용할 수 있습니다.