[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용 특정 템플릿에 저장하기

30 Nov 2023

javascript

웹 개발을 하다보면 종종 사용자가 웹페이지에서 텍스트나 이미지 등의 내용을 복사해서 다른 곳에 붙여넣기를 할 일이 있습니다. 이때 Clipboard.js라는 라이브러리를 사용하면 편리하게 웹페이지에서 복사한 내용을 특정 템플릿에 저장할 수 있습니다.

Clipboard.js란?

Clipboard.js는 클립보드 작업을 간단하게 처리할 수 있도록 도와주는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 복사 버튼을 클릭하거나 컨텍스트 메뉴에서 “복사”를 선택하는 등의 동작으로 내용을 클립보드에 저장할 수 있습니다.

Clipboard.js 설치하기

먼저 Clipboard.js를 설치해야 합니다. npm을 사용하는 경우 아래의 명령을 실행하여 설치할 수 있습니다.

npm install clipboard

혹은 CDN을 사용하여 설치할 수도 있습니다.

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

사용 방법

Clipboard.js를 사용하기 위해서는 몇 가지 단계를 거쳐야 합니다.

1. 복사할 요소에 ID 지정하기

먼저, 복사할 요소에 ID를 지정해야 합니다. 예를 들어, 복사 버튼을 클릭했을 때 복사될 텍스트가 있는 <span> 요소에 ID를 지정해줍니다.

<span id="copyTarget">복사할 내용</span>

2. Clipboard 객체 생성하기

이제 Clipboard 객체를 생성해야 합니다. 이 객체는 복사 동작을 정의하고 관리하는 역할을 합니다. 아래의 코드를 사용하여 Clipboard 객체를 생성합니다.

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

3. 복사 버튼에 이벤트 리스너 등록하기

복사 버튼을 클릭할 때, 복사할 대상 요소와 템플릿을 지정해야 합니다. 아래의 코드는 <button> 요소를 복사 버튼으로 지정하고, 복사할 대상 요소와 템플릿을 지정하는 예시입니다.

<button class="copy-button" data-clipboard-target="#copyTarget" data-template="#templateTarget">복사하기</button>

여기서 data-clipboard-target 속성은 복사할 대상 요소의 ID를 지정하고, data-template 속성은 템플릿 요소의 ID를 지정합니다.

4. 템플릿에 저장하기

마지막으로 복사 버튼을 클릭했을 때, 템플릿에 저장하는 기능을 구현해야 합니다. 아래의 코드는 클립보드에 저장된 내용을 템플릿에 출력하는 예시입니다.

clipboard.on('success', function(e) {
    var templateId = e.trigger.getAttribute('data-template');
    var template = document.querySelector(templateId);
    template.textContent = e.text;
});

위의 코드에서 success 이벤트가 발생하면, 클립보드에 저장된 내용을 data-template 속성으로 지정한 템플릿에 출력합니다. 템플릿은 querySelector 메서드를 사용하여 가져올 수 있습니다.