많은 웹사이트에서는 사용자가 웹페이지의 내용을 복사해서 다른 곳에 붙여넣기를 할 수 있도록 하는 기능을 제공하고 있습니다. 이를 통해 사용자는 손쉽게 웹페이지의 내용을 공유하거나 메모를 작성할 수 있습니다.

이 글에서는 Clipboard.js라는 자바스크립트 라이브러리를 사용하여 웹페이지에서 복사한 내용을 클립보드에 저장하고, 다른 사이트에 붙여넣기를 할 수 있는 방법을 알아보겠습니다.

1. Clipboard.js 설치하기

먼저, Clipboard.js를 설치하기 위해 프로젝트의 HTML 파일에 아래와 같은 스크립트 태그를 추가해주세요.

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

위 스크립트 태그는 Clipboard.js를 CDN을 통해 가져올 수 있도록 해줍니다.

2. 클립보드 복사 기능 추가하기

클립보드에 복사하기 원하는 요소(element)를 선택하고, 해당 요소에 클릭 이벤트 리스너를 등록하여 복사 기능을 추가할 수 있습니다. 아래는 복사 기능을 추가하는 예제 코드입니다.

// 복사 기능을 추가할 요소(element) 선택하기
const copyButton = document.querySelector('.copy-button');

// Clipboard.js 인스턴스 생성하기
const clipboard = new ClipboardJS(copyButton);

// 복사 성공 시 동작할 콜백 함수 등록하기
clipboard.on('success', function(e) {
  console.log(e);  // 성공한 복사 정보 확인
  alert('텍스트가 클립보드에 복사되었습니다.');
});

// 복사 실패 시 동작할 콜백 함수 등록하기
clipboard.on('error', function(e) {
  console.log(e);  // 실패한 복사 정보 확인
  alert('텍스트 복사가 실패하였습니다.');
});

위 코드에서는 .copy-button 클래스를 가진 요소를 클릭하면 해당 요소의 텍스트가 클립보드에 복사되도록 설정되어 있습니다. 복사 성공 시 success 이벤트 핸들러가 실행되고, 복사 실패 시 error 이벤트 핸들러가 실행됩니다.

3. 붙여넣기 기능 사용하기

복사된 내용을 다른 사이트에 붙여넣기 하려면, 붙여넣기를 원하는 위치에 클릭 이벤트 리스너를 등록하고, 해당 위치에 클립보드의 내용을 붙여넣기하는 코드를 작성해야 합니다. 아래는 붙여넣기 기능을 추가하는 예제 코드입니다.

// 붙여넣기를 원하는 요소(element) 선택하기
const pasteButton = document.querySelector('.paste-button');

// 붙여넣기 동작할 클릭 이벤트 리스너 등록하기
pasteButton.addEventListener('click', function() {
  navigator.clipboard.readText().then(function(clipboardText) {
    // 클립보드에 있는 텍스트를 붙여넣기하기
    pasteButton.value = clipboardText;
  });
});

위 코드에서는 .paste-button 클래스를 가진 요소를 클릭하면 클립보드에 있는 텍스트를 읽어와 해당 요소에 붙여넣기하는 동작이 등록되어 있습니다.

위와 같이 Clipboard.js를 사용하면 쉽게 웹페이지의 내용을 복사하고 다른 사이트에 공유할 수 있습니다.

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