링크 복사 버튼을 만들려고 하니 어떻게 구현하는지 궁금해졌다.
찾아보니 Clipboard API 덕분에 생각보다 간단하게 구현할 수 있었다.
링크 가져오기
링크는 window.location.href로 가져올 수 있다. 아니면 document.URL로도 가져올 수 있었다.
둘의 차이는 window.location.href는 URL에 접근해 수정할 수 있고, document.URL은 read-only로 URL을 가져오는데만 사용한다.
단순히 링크를 가져오기 때문에 어떤 것을 사용해도 상관없을 것 같지만 read-only인 document.URL을 사용했다.
링크 복사하기
async function copyToClipboard(link: string) {
await navigator.clipboard.writeText(link)
}Clipboard API를 사용해 링크를 복사할 수 있다.
writeText가 Promise 타입을 리턴한다.
참고자료
주니어 개발자입니다. 🚀