클립보드는 일반적으로 텍스트, 이미지 또는 파일과 같은 데이터를 임시로 저장하는 데 사용되는 기능입니다. 웹 애플리케이션에서 클립보드에 데이터를 복사하고 가져오는 것은 사용자에게 편의성을 제공하는 중요한 기능입니다. 이번 블로그 포스트에서는 Clipboard.js 라이브러리를 사용하여 클립보드에 복사된 내용을 가져오는 방법에 대해 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드 작업을 쉽게 수행할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 클립보드 작업을 쉽게 실행할 수 있습니다. Clipboard.js는 ZeroClipboard 라이브러리를 대체하기 위해 만들어졌으며, 모든 주요 브라우저에서 작동합니다.

Clipboard.js 설치하기

Clipboard.js를 사용하려면 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 아래의 npm 명령어를 사용하여 Clipboard.js를 설치합니다.

npm install clipboard --save

클립보드에 텍스트 복사하기

먼저 클립보드에 텍스트를 복사하는 방법에 대해 알아보겠습니다. 아래의 예제 코드를 참고하여 코드를 작성하세요.

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

clipboard.on('success', function (e) {
    console.log('텍스트가 성공적으로 복사되었습니다:', e.text);
});

clipboard.on('error', function (e) {
    console.error('텍스트 복사 중 에러가 발생했습니다:', e.action);
});

위의 코드에서 .copy-button 클래스를 가진 요소에 클릭 이벤트를 등록하고, 클릭 시 해당 요소의 텍스트를 클립보드에 복사합니다. 복사가 성공하거나 에러가 발생했을 때, 각각 ‘success’ 이벤트와 ‘error’ 이벤트가 호출됩니다.

클립보드에서 텍스트 가져오기

Clipboard.js를 사용하여 클립보드에서 텍스트를 가져오기 위해서는 HTML 요소에 contenteditable 속성을 추가해야 합니다. 그리고 document.execCommand('copy') 메서드를 사용하여 클립보드에 텍스트를 복사해야 합니다. 아래의 예제 코드를 참고하여 코드를 작성하세요.

const copyButton = document.getElementById('copy-button');
const pasteButton = document.getElementById('paste-button');
const outputDiv = document.getElementById('output');

copyButton.addEventListener('click', function () {
    const textToCopy = outputDiv.innerText;
    const tempInput = document.createElement('textarea');
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
});

pasteButton.addEventListener('click', function () {
    const tempInput = document.createElement('textarea');
    document.body.appendChild(tempInput);
    tempInput.focus();
    document.execCommand('paste');
    const pastedText = tempInput.value;
    document.body.removeChild(tempInput);
    outputDiv.innerText = pastedText;
});

위의 코드에서는 copy-button과 paste-button이라는 id를 갖는 HTML 요소에 클릭 이벤트를 등록하고, 복사 및 붙여넣기 기능을 구현합니다. 클릭 시 execCommand 메서드를 사용하여 클립보드에 텍스트를 복사하고, 텍스트를 가져오게 됩니다.

결론

Clipboard.js를 사용하여 클립보드에 복사된 내용을 가져오는 방법을 알아보았습니다. Clipboard.js는 간단한 API를 제공하여 클립보드 작업을 쉽게 처리할 수 있도록 도와줍니다. 웹 애플리케이션에서 클립보드 작업을 수행해야 하는 경우, Clipboard.js를 사용하여 쉽게 구현해볼 수 있습니다.

더 자세한 정보는 Clipboard.js 공식 문서(https://clipboardjs.com)를 참조하시기 바랍니다.