Require JS 랑 clipboard.js 를 사용하기 위해 검색을 하게 되었습니다. 하지만 검색결과에 나오는 글들과
똑같이 작성하였는데도 원하는 결과를 얻을수 없거나 스크립트 충돌이 발생하였습니다.
검색을 하게 되면 기존의 글들에서는 아래와 같이 가이드를 제시 하였습니다.
<body>
<!-- 1. Define some markup -->
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>
<!-- 2. Include library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a string selector -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
문제는 require JS를 사용하고 있다는 전제 였습니다. Require JS를 사용하고 있기 때문에 위의 예제와 같이 스크립트 경로를 바로 삽입하면 스크립트 충
돌이 발생하고 require JS 안에 감싸면 Cliboard is not defined 정의 되지 않았다고 에러가 났습니다.
문제를 해결하기 위해 다시 검색했습니다. https://jsfiddle.net/zenorocha/0yup6bof/ 이 URL에서 확인한 결과 require JS와 같이 사용 하기 위해서는
require(['clipboard'],function(Clipboard){
var clipboard = new Clipboard('.clipboard');
clipboard.on('success', function(e) {
parent.swal('복사되었습니다.');
e.clearSelection();
});
clipboard.on('error', function(e) {
parent.swal('복사오류');
console.log(e);
});
});
위와 같이 사용해야 한다는걸 알게 되었습니다.
또 한가지 처음엔 require(['jquery', 'clipboard']) 이렇게 사용하였는데 이 경우 제이쿼리가 먼저로드 되니 정상작동 하지 않는 경우도 있었습니다.
모바일에서 클립보드 복사 기능을 사용해야 한다면 Cliboard.js를 이용해보시길 추천합니다.
댓글