[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 유효 기간 설정하기

30 Nov 2023

javascript

내용을 복사하여 웹페이지에서 붙여넣기를 하는 경우에는, 보안 및 개인 정보 보호를 위해 해당 내용의 유효 기간을 설정하는 것이 중요합니다. 이를 위해 Clipboard.js를 사용하여 복사한 내용의 유효 기간을 설정하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드 관련 작업을 쉽게 처리할 수 있는 JavaScript 라이브러리입니다. 복사, 붙여넣기, 클립보드 이벤트 관리 등의 작업을 쉽게 수행할 수 있습니다.

복사한 내용의 유효 기간 설정하기

먼저, Clipboard.js를 다운로드하고 웹페이지에 추가해야 합니다. 아래의 링크에서 최신 버전을 다운로드할 수 있습니다.
- Clipboard.js 다운로드
HTML 파일에서 해당 스크립트를 로드합니다. 다음과 같이 스크립트 태그를 추가합니다.
```
<script src="경로/clipboard.min.js"></script>
```
복사 버튼을 만듭니다. 복사하고자 하는 내용을 감싸는 영역을 만들고, 복사 버튼 태그를 추가합니다. 다음은 예시 코드입니다.
```
<div id="copyArea">
  복사할 내용
</div>
<button id="copyButton" data-clipboard-target="#copyArea">복사</button>
```
JavaScript 파일에 다음과 같이 스크립트를 추가하여 복사 버튼 클릭 이벤트를 관리합니다.
```
var clipboard = new ClipboardJS('#copyButton');

clipboard.on('success', function(e) {
  // 복사 성공 시 호출되는 콜백 함수
  alert("내용이 복사되었습니다.");
  // 복사된 내용의 유효 기간 설정
  setTimeout(function() {
    e.clearSelection(); // 클립보드 내용 삭제
  }, 5000); // 5초 후 클립보드 내용 삭제
});
```
위의 코드에서 setTimeout 함수를 사용하여 복사된 내용을 클립보드에서 삭제하는 시간을 설정할 수 있습니다. 위의 예제에서는 5초 후에 클립보드 내용이 삭제되도록 설정하였습니다. 필요에 따라 이 값을 조정할 수 있습니다.
웹페이지에서 해당 버튼을 클릭하면 복사가 이루어지고, 설정한 유효 기간 후에는 클립보드 내용이 삭제됩니다. 사용자에게 클립보드 내용의 유효 기간이 설정되었음을 알려주기 위해 알림 메시지를 추가하였습니다.

위의 내용을 참조하여 Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 유효 기간을 설정하는 방법을 알아봤습니다. 이를 활용하여 보안과 개인 정보 보호를 위한 조치를 쉽게 적용할 수 있습니다.

참고: 본 예시는 Clipboard.js 버전 2.0.8을 기준으로 작성되었습니다. 사용하시는 버전에 따라 문법 및 동작이 차이가 있을 수 있습니다.

공식 문서를 참조하여 수정 및 업데이트된 내용을 확인해주세요.