[Vue.js] 클립보드 저장 / 복사하기 / document.execCommand() 대체하기

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

 Vue.js3 composition API  (scirpt setup) 에서 버튼(button)을 클릭 시 원하는 링크를 클립보드에 복사가 되게하는 기능을 구현하려고 합니다. (Optional 도 가능합니다! - 문서 참조 부탁드립니다)

 

✅ 바쁘신 분들을 위한 결과만! 

npm i vue-clipboard3

1) npm으로 위 vue-clipboard3 를 설치해주세요.
2) 아래의 코드를 사용해주시면 됩니다! 
3) 저 자세한건 npm 링크를 남겨놓도록 하겠습니다.

<script>
import useClipboard from 'vue-clipboard3'
import {ref} from 'vue'

const text = ref('안녕하세요?') //복사할 내용
const { toClipboard } = useClipboard()

// 버튼클릭 (@click="copy")
const copy = async () => {
  try {
    await toClipboard(text.value) //복사할 내용을 text라는 ref로 선언하였으므로.
  } catch (e) {
    console.error(e)
  }
}
</script>

1) reactive value(ref) 로 text 값을 선언 (변경할 수 있게 input으로 v-model 처리 가능)
2) useClipboard 함수를 toClipboard 상수에 할당
3) toClipboard 내 파라미터로 text 값을 넣어준다.
4) 복사 완료!

링크버튼(왼쪽)

복사내용

 

vue-clipboard3

---

 

✅ 구현하게 된 배경?

저는 공유링크 복사 기능을 만들고 싶어서 해당 라이브러리를 사용하게 되었습니다.

링크버튼(왼쪽)

이 버튼을 클릭하게 되면 원하는 링크의 주소를 클라이언트의 클립보드에 저장되게요.

 

1. 처음에는 JavaScript 의  document.exacCommand() 

를 사용하려고 했습니다. 그런데 해당 기능이 동작하지 않더라구요.
+ mdn 에서 depercated, 조만간 권장되지 않는다고 써져있었기에 사용하기에 불편하다는 인식이 생겼습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

 

그래서 Javascript 말고, React.js의 클립보드 라이브러리처럼,
Vue의 라이브러리가 있을 것 같다? 라는 생각에 Vue.js 라이브러리를 검색하던 와중

 

2. vue-clipboard2 를 찾게되었습니다.  > 그런데 요것도...문제가..

저는 Vue.js3 에 Compositon API 혹은 Optional 를 사용하는데, 해당 내용에는 Vue.js2 에 대한 기술만 되어있는겁니다.

vue2에 대한 기술만 되어있음.

그래서 더 검색해보아서 vue-clipboard3를 찾아 사용하게 되었습니다.

 

제가 작성해놓은 내용은 Vue.js3 - compositionAPI 인데요, 만약 Optional 를 사용하시는 분이시라면, 아래의 링크로 들어가서 NPM 에서 작성해놓은 가이드를 확인해주시기 바랍니다.

vue-clipboard3

 

 

vue-clipboard2