Colin's Blog
[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 문자열로 변환하기

웹 애플리케이션을 개발하다 보면 사용자가 웹 페이지에서 내용을 복사하여 클립 보드에 저장하고 싶을 때가 있습니다. 이러한 기능을 구현하는 과정에서 Clipboard.js 라이브러리를 사용할 수 있습니다.

Clipboard.js는 클립 보드에 텍스트를 복사하거나 붙여 넣을 수 있는 간단한 방법을 제공하는 JavaScript 라이브러리입니다. 이를 사용하여 웹페이지에서 복사한 내용을 문자열로 변환하는 방법을 알아보겠습니다.

Clipboard.js 설치 및 설정

Clipboard.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 Clipboard.js를 설치할 수 있습니다.

npm install clipboard

설치가 완료되면 HTML 파일에 아래의 코드를 추가하여 Clipboard.js를 로드합니다.

<script src="path/to/clipboard.min.js"></script>

복사 기능 구현하기

웹페이지에서 복사 기능을 구현하려면 복사할 버튼을 만들고 해당 버튼을 클릭했을 때 Clipboard.js의 new Clipboard() 메서드를 호출해야 합니다. 이 때 복사할 대상을 지정하여 클립 보드에 저장할 수 있습니다.

다음은 예시 코드입니다.

<button id="copy-button" data-clipboard-text="Hello, Clipboard!">Copy</button>

<script>
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
        console.log('Copied to clipboard: ' + e.text);
    });

    clipboard.on('error', function(e) {
        console.error('Failed to copy to clipboard: ' + e.text);
    });
</script>

위의 코드에서 data-clipboard-text 속성을 사용하여 복사할 텍스트를 지정할 수 있습니다. 복사 버튼을 클릭하면 success 이벤트 핸들러가 호출되어 텍스트가 클립 보드에 복사되었음을 알립니다. error 이벤트 핸들러는 복사가 실패했을 때 호출됩니다.

클립 보드의 내용을 문자열로 변환하기

Clipboard.js를 사용하면 웹페이지에서 복사한 내용을 클립 보드에 저장할 수 있지만, 클립 보드의 내용을 자바스크립트 문자열로 변환하는 기능은 제공하지 않습니다. 이를 위해서는 JavaScript의 내장 API 중 하나인 Clipboard API를 사용해야 합니다.

Clipboard API는 웹 애플리케이션에서 클립 보드의 내용을 액세스 할 수 있게 해주는 API입니다. 다음은 클립 보드의 내용을 문자열로 변환하는 코드입니다.

navigator.clipboard.readText().then(function(text) {
    console.log('Clipboard contents: ' + text);
}).catch(function(err) {
    console.error('Failed to read clipboard contents: ', err);
});

위의 코드에서 navigator.clipboard.readText() 메서드를 호출하여 클립 보드의 텍스트 데이터를 가져올 수 있습니다. 성공적으로 읽어온 경우 then 블록이 실행되고 텍스트를 출력합니다. 읽지 못한 경우 catch 블록이 실행되어 오류 메시지를 출력합니다.

이렇게 하면 웹페이지에서 복사한 내용을 문자열로 변환할 수 있게 됩니다.

참고 자료

© 2018 Colin. All rights reserved.