[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 다른 도구로 변환하기

30 Nov 2023

javascript

최근에는 웹페이지에서 텍스트나 이미지 등을 복사하여 다른 도구로 변환하는 기능이 많이 사용되고 있습니다. 이를 구현하는 데 도움이 되는 JavaScript 라이브러리 중 하나인 Clipboard.js에 대해 알아보겠습니다.

주의: 이 예제는 Clipboard.js 버전 2.x를 기준으로 작성되었습니다.

1. Clipboard.js란 무엇인가요?

Clipboard.js는 클립보드 작업을 간편하게 처리할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 복사 버튼을 클릭하거나 특정 요소를 드래그하여 클립보드에 복사하는 기능을 구현할 수 있습니다. 또한, 다른 도구로 변환하기 위해 클립보드에 복사한 내용을 쉽게 가져올 수도 있습니다.

2. Clipboard.js 사용하기

Clipboard.js를 사용하기 위해서는 먼저 해당 라이브러리를 웹 페이지에 추가해야 합니다. <script> 태그를 사용하여 Clipboard.js를 포함시킬 수 있습니다. 라이브러리의 CDN 주소를 사용하거나 직접 파일을 다운로드하여 사용할 수도 있습니다.

2.1. Clipboard.js 설치

Clipboard.js를 사용하기 위해서는 아래의 스크립트 태그를 <head> 태그 내에 추가해야 합니다.

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

2.2. 클립보드에 복사할 요소 지정하기

Clipboard.js를 사용하여 클립보드에 복사할 요소를 선택해야 합니다. 일반적으로 <button> 요소를 사용하고, data-clipboard-target 속성에 복사할 요소의 선택자를 지정합니다.

<button data-clipboard-target="#copyTarget">Copy</button>

<div id="copyTarget">
  복사될 내용입니다.
</div>

2.3. Clipboard.js 초기화하기

마지막으로, Clipboard.js를 초기화해야 합니다. 이를 위해 아래의 JavaScript 코드를 <script> 태그 내에 추가합니다. 이 코드는 위에서 지정한 복사 버튼을 찾아서 클립보드 동작을 추가합니다.

<script>
  var clipboard = new ClipboardJS('button[data-clipboard-target]');

  clipboard.on('success', function(e) {
    console.log('복사 완료:', e.text);
  });

  clipboard.on('error', function(e) {
    console.error('복사 실패:', e.trigger);
  });
</script>

위의 코드에서 success 이벤트 핸들러와 error 이벤트 핸들러는 각각 복사에 성공했을 때와 실패했을 때 호출되는 함수입니다. 콘솔에 결과를 출력하는 것이 아니라 원하는 대로 동작하도록 수정할 수 있습니다.

3. 사용 예시

위에서 사용한 예제를 적용하여 웹페이지에서 복사한 내용을 다른 도구로 변환하는 예시를 보겠습니다. 이 예시에서는 복사한 내용을 클립보드에서 가져와 다른 도구(예: Markdown 에디터)에 붙여넣습니다.

<script>
  var clipboard = new ClipboardJS('button[data-clipboard-target]');

  clipboard.on('success', function(e) {
    var mdEditor = document.getElementById('markdownEditor');
    mdEditor.value += e.text + ' ';
  });

  clipboard.on('error', function(e) {
    console.error('복사 실패:', e.trigger);
  });
</script>

위의 코드에서 markdownEditor는 Markdown 텍스트를 입력할 수 있는 <textarea>의 id입니다. 성공적으로 복사되었을 때, 복사한 텍스트가 Markdown 에디터에 추가되도록 코드를 작성해야 합니다.

4. 결론

위의 예시와 같이 Clipboard.js를 사용하면 간단한 텍스트나 이미지 등을 웹페이지에서 복사하여 다른 도구로 변환할 수 있습니다. Clipboard.js의 다양한 기능과 사용법을 익히면 웹 개발에서 복사 작업을 보다 쉽고 효율적으로 처리할 수 있습니다.

더 자세한 내용은 Clipboard.js 공식 문서를 참조하세요.