웹 개발자들은 종종 웹사이트의 소스코드를 다른 사람과 공유하거나 문서에 포함시키기 위해 소스코드를 복사해야할 때가 있습니다. 이를 위해 Clipboard.js를 사용하면 손쉽게 소스코드를 클립보드에 복사할 수 있습니다.

Clipboard.js란?

Clipboard.js는 웹 페이지에서 클립보드에 텍스트를 복사할 수 있는 JavaScript 라이브러리입니다. 복사 버튼을 클릭하면 해당 텍스트가 클립보드에 복사되어 다른 곳에 붙여넣을 수 있습니다.

설치하기

먼저, Clipboard.js 공식 웹사이트에서 Clipboard.js를 다운로드하거나 CDN을 이용하여 웹 페이지에 추가합니다.

<script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

사용하기

간단한 예제를 통해 Clipboard.js를 사용하는 방법을 알아보겠습니다. 아래 코드의 btn-copy 클래스를 가지는 버튼을 누르면 code-to-copy 클래스를 가진 요소의 텍스트가 클립보드에 복사됩니다.

<button class="btn-copy" data-clipboard-target=".code-to-copy">Copy</button>
<pre class="code-to-copy">This is the code to copy!</pre>

<script>
    var clipboard = new ClipboardJS('.btn-copy');
    
    clipboard.on('success', function(e) {
        console.log('Copied:', e.text);
    });
    
    clipboard.on('error', function(e) {
        console.error('Copy failed:', e.action);
    });
</script>

위 코드에서는 .btn-copy 클래스를 가진 버튼을 클릭하면 code-to-copy 클래스를 가진 요소의 텍스트가 클립보드에 복사됩니다. 성공적으로 복사가 완료됐을 경우 success 이벤트 핸들러가 호출되며, 복사 실패시 error 이벤트 핸들러가 호출됩니다.

결론

Clipboard.js를 사용하면 손쉽게 웹 페이지에서 소스코드를 클립보드에 복사할 수 있습니다. 이를 이용하여 소스코드를 공유하거나 문서에 포함시키는 등의 작업을 더 편리하게 수행할 수 있습니다.

더 자세한 내용은 Clipboard.js 공식 문서를 확인해보세요.