[에러] 클립보드 텍스트 복사

0. 무슨 상황인가?

• 회사의 서비스를 개발하는 과정이다.
• 클릭하면 특정 텍스트를 클립보드에 복사하는 목적이다.
• 개발 버전에서 작동하는 게, 배포 버전에 작동하지 않는 문제가 있었다

1. 원인은 무엇인가?

• 배포 버전은 아직 개발 완료가 아니다 보니, https를 적용하지 않았다
• localhost에서는 작동하지만, http인 배포 버전만 작동하지 않는 상태였다.
• 그러면 navigator.clipboard 가 Http에서는 작동하지 않는구나를 판단하게 되었다

2. 그러면 어떻게 수정했는가?

• 당장은 개발 중인 서비스이다 보니, 아직 도메인조차 구매하지 않았다
• 그러니 현 상황에서는 테스트하려면 http 환경에서 테스트하려면 navigator.clipboard를 사용하지 못하니 다른 방법을 찾아야 했다

 document.execCommand('copy');

를 사용해서 http에서도 텍스트 가 클립보드에 복사되도록 수정했다

아래는 당시 작성했던 코드였다 - 외국 서비스가 목표인지라 alert는 영문 통일이다.

const copyToClipboard = () => {
        navigator.clipboard.writeText(textToEmailCopy)
            .then(() => {
                alert("Copied to clipboard!");
            })
            .catch(err => {
                console.error("Failed to copy clipboard:", err);
            });
    };

 const copyToClipboard = () => {
    const textarea = document.createElement('textarea');
    textarea.value = textToEmailCopy;
    document.body.appendChild(textarea);
    textarea.select();
    try {
        document.execCommand('copy');
        alert("Copied to clipboard!");
    } catch (err) {
        console.error("Failed to copy clipboard:", err);
    }
    document.body.removeChild(textarea);
    };