웹 개발을 하다보면 종종 사용자가 웹페이지의 텍스트나 URL을 복사하고 싶을 때가 있습니다. 이때 Clipboard.js라는 라이브러리를 사용하면 사용자가 복사한 내용을 자동으로 클립보드에 저장하고, 자동으로 붙여넣기를 할 수 있는 자동 완성 기능을 구현할 수 있습니다.

Clipboard.js 소개

Clipboard.js는 클립보드에 텍스트를 복사하고 붙여넣기하는 기능을 간편하게 구현할 수 있는 자바스크립트 라이브러리입니다. ZeroClipboard라는 라이브러리의 후속작으로, 사용하기 쉬운 API와 풍부한 기능을 제공합니다.

사용 방법

1. 먼저, Clipboard.js를 프로젝트에 추가합니다. 다음의 방법 중 하나를 선택하여 추가할 수 있습니다.
   • CDN을 사용하여 <script> 태그로 라이브러리를 추가하는 방법

     <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
     

   • npm을 통해 라이브러리를 다운로드하고 프로젝트에 추가하는 방법

     npm install clipboard --save
     

2. 복사 버튼을 만들고, 복사할 내용을 data-clipboard-text 속성으로 설정합니다.

   <button class="btn" data-clipboard-text="복사할 내용">복사</button>
   

3. 자바스크립트에서 Clipboard.js를 초기화하고, 복사 버튼에 이벤트를 바인딩합니다.

   let clipboard = new ClipboardJS('.btn');
   
   clipboard.on('success', function(e) {
     console.log('복사 성공:', e.text);
   });
   
   clipboard.on('error', function(e) {
     console.log('복사 실패:', e);
   });
   

위의 코드를 사용하면, 사용자가 “복사” 버튼을 클릭하면 해당 버튼의 data-clipboard-text 속성에 설정된 텍스트가 클립보드에 복사되고, 성공 또는 실패 메시지가 출력됩니다.

추가 기능

Clipboard.js는 기본적인 복사, 붙여넣기 기능 이외에도 여러가지 기능을 제공합니다. 자세한 내용은 공식 문서를 참조하시기 바랍니다.

• Clipboard.js 공식 문서

마무리

Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 자동 완성 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 향상시킬 수 있고, 텍스트나 URL을 간편하게 공유할 수 있습니다.