[javascript] Clipboard.js의 기능 및 사용법

30 Nov 2023

javascript

Clipboard.js는 웹 개발자들이 클립보드에 텍스트 또는 HTML을 복사하고 붙여넣을 수 있는 기능을 간단하게 구현할 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 웹 페이지의 내용을 쉽게 복사하여 다른 애플리케이션에 붙여넣을 수 있습니다.

1. Clipboard.js 설치

Clipboard.js를 사용하기 위해서는 아래와 같이 먼저 Clipboard.js를 다운로드하고 HTML 파일에 포함해야 합니다. Clipboard.js는 최신 버전의 jQuery를 필요로 하지 않으므로 웹 페이지에 jQuery를 추가할 필요가 없습니다.

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

2. 복사 버튼 추가

원하는 요소에 이벤트를 추가하여 특정 텍스트 또는 HTML을 클립보드에 복사하도록 할 수 있습니다. 아래 예제는 “Copy to Clipboard” 버튼을 생성하는 방법입니다.

<button class="copy-button" data-clipboard-text="Hello, Clipboard!">Copy to Clipboard</button>

위의 예제에서 data-clipboard-text 속성은 복사할 텍스트를 정의합니다.

3. Clipboard.js 초기화

아래 스크립트를 사용하여 Clipboard.js를 초기화합니다.

var clipboard = new ClipboardJS('.copy-button');

위 예제에서 .copy-button은 복사 버튼의 클래스 이름입니다. 이 클래스를 가진 모든 요소에 클립보드 복사 이벤트가 추가됩니다.

4. 이벤트 처리

Clipboard.js는 성공적으로 텍스트 또는 HTML을 클립보드에 복사한 후 호출되는 이벤트를 제공합니다. 사용자는 success, error, beforecopy, aftercopy 등의 이벤트 핸들러를 정의하여 해당 이벤트가 발생했을 때 원하는 동작을 수행할 수 있습니다. 아래는 success 이벤트를 처리하는 예제입니다.

clipboard.on('success', function(e) {
    console.log("복사되었습니다: " + e.text);
    e.clearSelection();
});

5. 완성된 예제

아래는 Clipboard.js를 사용하여 특정 텍스트를 클립보드에 복사하는 완성된 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Clipboard.js Example</title>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
</head>
<body>
    <button class="copy-button" data-clipboard-text="Hello, Clipboard!">Copy to Clipboard</button>

    <script>
        var clipboard = new ClipboardJS('.copy-button');
        
        clipboard.on('success', function(e) {
            console.log("복사되었습니다: " + e.text);
            e.clearSelection();
        });
    </script>
</body>
</html>

위의 예제를 실행하고 “Copy to Clipboard” 버튼을 클릭하면 “Hello, Clipboard!”가 클립보드에 복사되는 것을 확인할 수 있습니다.

Clipboard.js는 간단하고 쉽게 사용할 수 있는 훌륭한 클립보드 관리 라이브러리입니다. 더 많은 상세한 사용 방법은 공식 문서를 참고하시기 바랍니다. ```