[Javascript] 자바스크립트로 복붙 기능을 만들어보자

가끔 가다 보면 웹 사이트에서 복사 붙여넣기 버튼을 볼 수 있습니다.

그냥 드래그 하고 Ctrl+C 만 하면 끝나는게 복사인데 굳이 친절하게 복붙 버튼이 떡하니 있습니다. 저는 가끔씩 이런걸 보면서 인간의 게으름의 끝판왕이 아마 이 복붙버튼이 아닐까 하는 생각이 들기도 합니다.

여튼 웹 상에서 복붙 버튼을 만드는 방법은 간단합니다. <button> 태그와 Javascript 코드만 있으면 됩니다. button의 onclick에 해당하는 이벤트 함수를

const copyEvent = () => {
	// Url 복사 이벤트
	navigator.clipboard.writeText("복사하고 싶은 문자열");
}
// in html
<button onClick={copyEvent}>복붙</button>

이렇게 구현해 주기만 하면 됩니다. 참 간단합니다.

하지만 이게 작동이 안되는 경우가 있습니다.

navigator.clipboard is undefined

로컬에서는 멀쩡하게 작동했던 이 함수가 배포를 하게 되면 이상하게 돌아가지 않는 문제가 발생하게 되는데, 이는 Client와 Server의 위치가 다르기 때문에 보안 관련 문제(origin)로 writeText()의 리턴값이 undefined로 출력하게 됩니다. 이를 해결할 수 있는 첫번 째 방법은 NginX같은 프록시 서버를 배치하고 SSL인증을 받아 HTTPS로 변경하는 방식으로 진행하면 해결되지만(이론상 제 주장이고 틀릴 수도 있습니다. 틀린 내용이라면 지적 부탁드립니다.) 사정이 녹록치 못해 HTTP로 계속 진행해야 하는 경우가 있을 수 도 있습니다. 이때 보안적이지 않은 방식으로 구현을 하면 됩니다.

const unsecuredCopyToClipboard = (text) => {
	
    // textarea라는 이름의 Element를 생성한다.
    const textArea = document.createElement('textarea');
    // testarea의 value값을 변수 text로 수정ㅎ나다.
    textArea.value = text;
    //textarea를 html body에 추가시킨다.
    document.body.appendChild(textArea);
    // testarea 활셩화
    textArea.focus();
    // textarea의 내용(text)를 드래그
    textArea.select();
    try {
        // 복사!
        document.execCommand('copy');
    } catch (err) {
        alert('복붙에 실패했습니다.');
        return false;
    }
    // testarea를 html.body에서 지운다.
    document.body.removeChild(textArea);
    return true;
}

const copyEvent = () => {
	// Url 복사 이벤트
	if (window.isSecureContext) {
		navigator.clipboard.writeText(sharedUrl);
	} else {
		unsecuredCopyToClipboard(sharedUrl);
	}
}

window.isSecureContext로 origin 검사를 하고 보안적이지 않으면 unsecuredCopyToClipboard()함수를 사용해서 보안적이지 않은 방법으로 복붙하면 됩니다. 이때 unsecuredCopyToClipboard()에서 구현된 내용은 실제로 사용자가 텍스트를 드래그 해서 복사를 하는 과정을 그대로 재현했다고 볼 수 있습니다. 텍스트 박스 임시 생성 -> 그 안에 복사하고자 하는 문자열 집어넣기 -> 텍스트 박스 활성화 -> 내용 드래그 -> 복사  이 과정으로 프로세스가 진행되고 있으니까요.

 

임시방편으로 이 방법이 가능하지만 문제는 복사를 수행하는 document.execCommand가 조만간 deprecated가 된다는 점입니다. 애초에 안전하지도 않는 방법이기에 사정이 넉넉하다면 차라리 SSL인증과 NginX를 사용하여 배포 사이트를 HTTPS로 전환하는 것을 추천합니다.