잘가요 Document.execCommand()🚭

프로젝트 진행 중 링크를 공유하여 초대하기 기능이 요구되어 생성된 uuid나 링크를 클립보드에 저장하는 기능을 개발하는 과정 중 찾아보게 되었다.

🔥Document.execCommand()

선택 영역을 복사하는 방법 중 우선 모든 브라우저에서 지원 가능한 execCommand API를 사용합니다.

document가 designmode, 즉 편집 가능한 상태가 되면 exeCommand()매서드를 사용할 수 있는데 우린 execCommand를 호출 후 copy 명령어를 사용합니다.

	const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
		e.preventDefault();
		const content = uuid.current;
      	//uuid => ref로 받아온 inputBox의 current
		if (content) {
			content.select();          	
			document.execCommand("copy")
		}
	};

로직은 input같은 form 엘리먼트에서만 사용 가능한 select()메서드를 통해 선택 영역을 지정해줍니다. (uuid.current.value는 string type이기 때문에 error가 발생한다)

select로 선택한 영역을 범위로 execCommand의 copy메서드가 작동하며 클립보드에 정상적으로 저장이 됩니다.

이거 말고도 브라우저나 다른 요인으로 다르게 코드를 바꿔야 할 수 있습니다(예로 사파리 브라우저에서 사용하기 위해서는 focus매서드를 거쳐야함)

문제는...

위 기능이 웹 표준에서 제거되어 Deprecated 되었다...

✅Clipboard API

아무튼 아직 호환이 안되는 몇몇 브라우저가 있지만 공식문서에서도 execCommand는 사용하지 않으며 대체하여 Clipboard API 사용을 권장하고있다.

navigator.clipboard

navigator.clipboard에서 사용되는 별도의 메서드를 통해 읽고 쓰기를 작동시킨다.(read,readText,write,writeText 등등...)

우리는 writeText 메서드를 통해 텍스트 내용을 클립보드에 저장할것이다.

여기서 텍스트라고 쓰여있다시피

이전의 document.execCommand는 form element의 선택영역을 복사하여 클립보드에 저장하는, 마치 키보드로 복사, 붙여넣기 작업과 유사하다면
navigator.clipboard.writeText는 텍스트 내용을 읽고, 쓰는 작업으로 보면 될 거 같다.

	const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
		e.preventDefault();
		const content = uuid.current;
		if (content) {
			navigator.clipboard.writeText(content.value).then(() => {
				alert('코드 복사');
			});
		}
	};

잘가요 Document.execCommand()...

Document.execCommand()

navigator.clipboard