[Js/JavaScript] 텍스트를 클립보드에 복사하는 2가지 방법

최근 프로젝트에서 버튼을 클릭하면 텍스트를 복사하는 기능이 필요했습니다.

 

처음에는 Clipboard.js 라는 라이브러리의 사용을 고려했지만 제가 원하는 기능은 텍스트를 복사하고 성공 시 alert창 실패 시 prompt창을 띄우는 게 전부라서 이러한 단순한 로직은 성능 면에서도 직접 구현하는 것이 더 나을 것 같다고 판단했습니다.

 

따라서, 먼저 Web API인 navigator의 clipboard API를 이용해 구현을 시도했습니다.

function copyToClipboard(text) {
	navigator.clipboard.writeText(text).then(() => {
    	alert("복사되었습니다. 원하는 곳에 붙여넣기하여 주세요.");
    }).catch(() => {
    	prompt("키보드의 ctrl+C 또는 마우스 오른쪽의 복사하기를 이용해주세요.",text);
    });
};

 

여기서 navigator.clipboard.writeText 함수는 웹 페이지에서 사용자의 클립보드로 텍스트를 복사하는 기능을 제공합니다.

하지만 동작을 테스트하는 과정에서, navigator.clipboard API가 로컬 환경에서는 정상적으로 실행되지 않는다는 것을 발견했습니다.

 

이는 navigator.clipboard가 보안상의 이유로 HTTPS 환경에서만 작동하기 때문입니다.

 

이러한 제한 떄문에 기능의 호환성을 보장하기 위해 navigator 객체나 clipboard API가 없는 환경을 대비한 코드를 추가하여 다시 작성하였습니다.

 

copyToClipboard 함수 구현

function copyToClipboard(text, onSuccess, onFailure) {
    const defaultSuccess = () => alert("복사되었습니다. 원하는 곳에 붙여넣기하여 주세요.");
    const defaultFailure = () => prompt("키보드의 ctrl+C 또는 마우스 오른쪽의 복사하기를 이용해주세요.", text);
    if (navigator.clipboard) {
        navigator.clipboard
            .writeText(text)
            .then(onSuccess || defaultSuccess)
            .catch(onFailure || defaultFailure);
    } else {
        const textarea = document.createElement("textarea");
        document.body.appendChild(textarea);
        textarea.value = text;
        textarea.select();
        try {
            if (document.execCommand("copy")) {
                (onSuccess || defaultSuccess)();
            } else {
                (onFailure || defaultFailure)();
            }
        } catch (err) {
            (onFailure || defaultFailure)();
        } finally {
            document.body.removeChild(textarea);
        }
    }
}

이 코드는 navigator 객체나 clipboard API가 없을 시 텍스트를 클립보드에 복사하기 위해 임시 텍스트 영역을 생성하고, 복사 명령을 시도한 후 임시 영역을 제거합니다.

document.execCommand("copy")는 웹 페이지 내에서 사용자의 선택 영역을 클립보드로 복사하는 명령을 실행합니다.

이 방법은 최신 API로 대체되고 있지만, 여전히 일부 브라우저와 상황에서 사용됩니다.

 

복사가 성공하면 사용자에게 성공 알림을, 실패하면 복사를 수동으로 유도하는 메시지를 표시합니다.

 

CodePen 데모

아래 코드는 CodePen에서 작성한 코드입니다.

 

코드가 CodePen 내에서는 잘 작동하는데, 블로그에서는 writeText 메서드 호출이 실패하고 catch 영역이 실행됩니다.
아마도 CodePen에서 작성된 클립보드 관련 코드를 티스토리 블로그에서 실행할 떄 발생하는 것 같습니다.
정확한 원인은 확실치 않지만, 코드 자체의 문제는 아닙니다.

 

See the Pen Untitled by 허강현 (@btavqxss-the-vuer) on CodePen.