일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 코드공유
- git
- 연산자
- Supabase
- 슬라이드전환
- 프론트엔드
- 타입스크립트
- PROJECT
- web
- 실기
- 렛츠기릿자바스크립트
- jQuery
- react
- 세로메뉴바
- 자바스크립트
- 생활코딩
- HTML
- 비전공자
- 웹디자인기능사실기
- JavaScript
- 코딩독학
- github
- 깃
- 리액트
- JS
- CSS
- 웹디실기
- 정보처리기사
- 웹퍼블리셔
- 웹디자인기능사
- Today
- Total
코딩하는라민
[Javascript] confirm 후 clipboard api 사용 시 DOMException Error 발생하는 문제점 본문
[Javascript] confirm 후 clipboard api 사용 시 DOMException Error 발생하는 문제점
코딩하는라민 2023. 12. 19. 17:54[Javascript] confirm() 후 clipboard api 사용 시 TypeError 발생
📌 confirm 후 clipboard api 사용 시 에러
지난번 포스팅에서 window.location 객체와 cilpboard api 를 이용해 현재 url 을 복사하는 로직을 구현했었다.
버튼을 누르자마자 url 을 복사했었는데, 요구사항이 추가됨에 따라서 팝업창을 띄우고 나서 해당 복사를 실행하는 것으로 로직이 변경되었다.
confirm 창을 띄우고 [확인] 버튼을 누르면 다른 기능을 실행하고, [취소] 버튼을 누르면 현재 url 을 복사한다.
하지만 문제가 발생했다.
confirm 창을 띄우면 clipboard api 의 catch 문이 실행되는 것이었다.
콘솔창에 error 를 출력해보면 다음과 같다.
DOMException 에러
const link = window.location.href;
const handleCopyButton = () => {
confirm('복사하시겠습니까?') &&
try {
await navigator.clipboard.writeText(shareLink);
alert('성공!');
} catch (err) {
alert('실패!');
console.error(err);
}
};
📌 왜 이런 에러가 발생하는 것일까?
DOMException: Document is not focused
이것은 비동기 작업이 특정 환경에서 실행되지 못해 발생하는 에러 메세지이다.
이 특정 환경이 무엇이냐면,
버튼을 클릭하면 confirm 창을 띄우고 url 을 클립보드에 저장하는 코드가 실행된다고 하자.
우리는 confirm 창의 확인 혹은 취소를 누를 것이며,
이 때 이벤트의 주체가 문서가 아닌 브라우저의 다이얼로그창이 되어버린다.
즉, clipboard api 작업이 실행될 때 현재 문서(Document)가 포커스를 잃은 상태가 된다.
이로인해 clipboard api 의 작동에 문제가 생길 수 있다.
clipboard 는 document 에서 실행되는 이벤트이고, 정상적으로 기능을 수행하려면 focus 를 다시 document 로 가져와야 하는 것이다.
📌 window.focus()
window.focus() 는 DOM 에서 사용되는 메서드로 주어진 요소에 포커스를 설정해준다.
우리는 confirm 창으로 옮겨간 포커스를 다시 현재 문서로 가져와야 하는 걸까?
아니다!
window.focus 는 현재 창에 다시 포커스를 주기 위한 명령이다.
confirm 창이 닫히면 다시 포커스가 문서로 돌아온다.
따라서 이 명령어 대신 지연하여 코드를 실행하는 방식으로 충분히 문제를 해결할 수 있다.
📌 clipboard api 지연 실행
setTimeout
clipboard api 를 지연해서 실행하기 위해 setTimeout 을 사용했다.
const link = window.location.href;
// confirm 후 클립보드 복사 실행
const handleCopyButton = () => {
const confirmMessage = confirm('현재 url을 복사할까요?');
if (confirmMessage) {
setTimeout(async () => {
await copyClipboard();
}, 500);
}
};
// 클립보드 복사 함수
const copyClipboard = async () => {
try {
await navigator.clipboard.writeText(shareLink);
alert('성공!');
} catch (err) {
alert('실패!');
}
};
확인해보면 다음과 같이 정상적으로 api 연결이 성공한다.
'Core > JavaScript' 카테고리의 다른 글
[JavaScript] 바닐라 자바스크립트에서 header, footer 와 같은 공통 요소 처리 방법에 대해 (37) | 2024.01.06 |
---|---|
[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e) (53) | 2023.12.07 |
[JavaScript/React] 영역 외 클릭 감지로 모달/프로필 박스 닫기 기능 구현 (54) | 2023.12.07 |
[JavaScript/React] 현재 URL 복사하기 & window.location 객체 (42) | 2023.12.04 |
[JavaScript] 클래스와 접근자 프로퍼티(getter함수, setter함수) (0) | 2023.02.21 |