[javascript] Clipboard.js를 사용하여 웹페이지에서 복사 기능 커스터마이징하기

30 Nov 2023

javascript

현대의 웹 애플리케이션에서는 사용자가 웹페이지의 내용을 복사하여 다른 곳에 붙여넣기 하는 기능이 매우 중요합니다. 이를 위해서 Clipboard.js라는 라이브러리를 사용하여 쉽게 복사 기능을 커스터마이징할 수 있습니다.

Clipboard.js란?

Clipboard.js는 웹페이지에서 클립보드에 텍스트나 HTML 내용을 복사하는 데 사용되는 라이브러리입니다. 이 라이브러리는 간단한 API를 제공하여 클립보드 기능을 구현할 수 있으며, 마우스 이벤트나 키보드 단축키를 통해 복사 기능을 트리거할 수 있습니다.

사용법

먼저 Clipboard.js를 다운로드하고 웹페이지에 포함해야 합니다. 이후에 다음과 같은 스크립트를 작성하여 복사 기능을 구현할 수 있습니다.

// Clipboard.js 초기화
var clipboard = new ClipboardJS('.copy-button');

// 복사 성공 시 이벤트 핸들러
clipboard.on('success', function(e) {
    console.log('복사 완료');
    e.clearSelection();
});

// 복사 실패 시 이벤트 핸들러
clipboard.on('error', function(e) {
    console.error('복사 실패', e.action);
});

위의 코드에서 '.copy-button'은 복사 기능을 적용할 버튼의 CSS 선택자입니다. 이 버튼을 클릭하면 해당 버튼이 가지고 있는 텍스트나 HTML 내용이 클립보드에 복사됩니다.

clipboard.on('success', function(e) { ... })는 복사가 성공적으로 완료되었을 때 발생하는 이벤트입니다. 이벤트 핸들러 내에서는 원하는 작업을 수행할 수 있습니다. 이 예제에서는 콘솔에 “복사 완료”를 출력하고, e.clearSelection()를 호출하여 텍스트의 선택 영역을 초기화합니다.

clipboard.on('error', function(e) { ... })는 복사가 실패했을 때 발생하는 이벤트입니다. 이벤트 핸들러 내에서는 실패 사유를 확인할 수 있습니다. 이 예제에서는 콘솔에 “복사 실패”와 실패한 동작을 출력합니다.

커스터마이징

Clipboard.js는 다양한 기능을 제공하여 복사 버튼을 원하는 대로 커스터마이징할 수 있습니다. 예를 들어, 버튼의 텍스트를 동적으로 변경하거나, 복사가 완료되었을 때 버튼의 스타일을 변경할 수 있습니다.

아래 예제에서는 버튼을 클릭할 때마다 버튼의 텍스트를 “복사”와 “복사 완료”로 번갈아가며 변경하고, 복사가 완료되면 버튼의 배경색을 녹색으로 변경합니다.

var button = document.getElementById('copyButton');

clipboard.on('success', function(e) {
    if (button.textContent === '복사') {
        button.textContent = '복사 완료';
        button.style.backgroundColor = 'green';
    } else {
        button.textContent = '복사';
        button.style.backgroundColor = '';
    }
    e.clearSelection();
});

위 코드에서 button은 원하는 버튼의 엘리먼트를 가리킵니다. 복사가 완료되면 버튼의 텍스트와 배경색을 변경하고, 다시 버튼을 클릭하면 이전 상태로 돌아갑니다.

참고 자료

Clipboard.js 공식 문서: https://clipboardjs.com/