여러분은 웹 애플리케이션을 개발할 때 종종 사용자가 웹 페이지의 텍스트를 클립보드에 복사할 수 있도록 해야하는 상황에 직면할 수 있습니다. 이를 위해 Clipboard.js라는 훌륭한 라이브러리를 사용할 수 있습니다. Clipboard.js는 자바스크립트로 작성된 클립보드 관련 유틸리티 라이브러리로, 클립보드에 텍스트를 복사하거나 클립보드로부터 텍스트를 가져올 수 있습니다.
이 튜토리얼에서는 Clipboard.js를 사용하여 텍스트를 클립보드에 복사하는 동시에 복사가 완료되었음을 사용자에게 알리는 메시지를 표시하는 방법을 알아보겠습니다.
1. Clipboard.js 설치
먼저, Clipboard.js를 설치해야 합니다. 다음 명령을 사용하여 npm을 통해 Clipboard.js를 설치할 수 있습니다.
npm install clipboard
2. HTML 코드 준비
아래와 같이 HTML 코드를 작성해보겠습니다. 복사할 텍스트가 포함된 요소에 class 속성을 추가하고, 사용자에게 나타낼 메시지를 표시할 div 요소를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<script src="clipboard.min.js"></script>
</head>
<body>
<input class="copy-text" type="text" value="복사할 텍스트입니다." readonly>
<button class="copy-button" data-clipboard-target=".copy-text">클립보드에 복사</button>
<div id="message"></div>
</body>
</html>
3. 자바스크립트 코드 작성
다음으로, 아래와 같이 자바스크립트 코드를 작성해야 합니다. clipboard.min.js 파일을 로드한 후, 클립보드 객체를 생성하고 복사 버튼에 클릭 이벤트 리스너를 추가합니다.
<script>
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function(event) {
var message = document.getElementById('message');
message.innerHTML = "텍스트가 클립보드에 복사되었습니다.";
event.clearSelection();
});
clipboard.on('error', function(event) {
var message = document.getElementById('message');
message.innerHTML = "클립보드 복사가 실패했습니다.";
});
</script>
4. 테스트
이제 웹 페이지를 실행하고 복사 버튼을 클릭해보세요. 텍스트가 클립보드에 복사되었다는 메시지가 표시될 것입니다. 만약 클립보드 복사가 실패할 경우, 실패 메시지가 나타날 것입니다.
이제 여러분은 Clipboard.js를 사용하여 텍스트를 클립보드에 복사하고, 사용자에게 복사 완료 메시지를 표시할 수 있습니다. 이는 웹 애플리케이션에서 유용하게 사용될 수 있는 기능입니다.