さようなら、Document.execCommand()🚭

生成したuuidまたはリンクをクリップボードに保存する機能を開発する過程で、プロジェクトの進行中にリンクを共有し、招待する必要があります.

🔥Document.execCommand()

選択したコンテンツをコピーする場合は、まずすべてのブラウザでサポートされているexecCommand APIを使用します.
ドキュメントが編集可能な場合は、execCommand()メソッドを使用して、execCommandを呼び出してcopyコマンドを使用します.

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

論理はselect()メソッドで選択した内容を指定します.このメソッドはinputなどのフォーム別名にのみ適用されます.(uuid.current.valueはstring typeなのでエラー)
execCommandのcopyメソッドは、選択した領域を範囲としてクリップボードに正常に保存します.
それ以外に、コードを異なるブラウザまたはその他の要因に変更する必要がある場合があります(たとえば、Safariブラウザでコードを使用するにはfocusメソッドが必要です).
問題は...


上記の機能はWeb標準から削除され、予め設定されています...

✅Clipboard API

要するに、互換性がないブラウザもありますが、公式ドキュメントではexecCommandではなく、Clipboard APIを使用することをお勧めします.

navigator.clipboard

navigator.クリップボードで使用するさまざまな方法で読み書き操作を開始します.(read、readText、write、writeTextなど…)writeTextメソッドでテキスト内容をクリップボードに保存します.
ここに書いたテキストのようです.
以前のdocument.execCommandは、キーボードを使用してコピーおよび貼り付けを行うのと同様に、フォーム要素の選択内容をクリップボードにコピーおよび保存していました.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