결과 페이지 만들기 -js편 execCommand를 더이상 지원하지 않습니다.

Question

프론트엔드 마지막편을 보고 있는데 더이상 execCommand 명령어를 지원하지 않는다고 하여 다른 명령어를 찾아봤는데 옳은 코드 인가요? 현재 url을 복사하는 함수를 작성한 것입니다. function copyUrl(){ let url = window.location.href; navigator.clipboard.writeText(url) .then(()=>{ alert('URL을 클립보드에 복사했습니다.'); }); }

제주코딩베이스캠프 · Answer

안녕하세요, 제주코딩베이스캠프입니다 :) 질문 주신 것처럼 본 강의에서 document.execCommand()를 사용하였지만, 이 기능은 이제 사용되지 않기 때문에 권장되지 않습니다. 일부 브라우저는 여전히 이를 지원할 수 있지만 관련 웹 표준에서 이미 제거되었거나 삭제 과정에 있거나 호환성 목적으로만 유지된다고 합니다. 이러한 이유로 현재 작성하신 방법과 같이 js에서 제공하는 Clipboard API를 사용하는 방식으로 변경하였습니다. Clipboard API는  promise 방식을 기반으로 작동하며, 비동기로 클립보드 데이터에 접근할 수 있기 때문에 클립보드의 데이터를 읽거나 데이터를 직접 넣을 수 있습니다.  아래는 클립보드에 문자열(텍스트)를 입력하는 코드입니다. navigator.clipboard.writeText(url).then(() => { alert("URL이 복사되었습니다"); }); 클립보드에 텍스트를 입력하는 동작이 이행되면 then()이 호출되고, 경고창을 통해 url이 복사되었다는 메시지를 보여줍니다. 아래는 변경된 코드입니다. 감사합니다. function copyUrl() { const url = window.location.href; navigator.clipboard.writeText(url).then(() => { alert("URL이 복사되었습니다"); }); }