[ javascript-library ] javascript 클립보드로 복사하기 기능 구현하기

 

안녕하세요. 루루개발자 입니다.

최근 회사 프로젝트를 하면서, 사용자가 특정 버튼을 클릭하면 특정 문자열이 클립보드에 자동 복사되어지는 기능 구현이 필요하였습니다. 그래서 관련 라이브러리를 찾아보니 다음과 같은 라이브러리가 존재했습니다.

 

https://www.npmjs.com/package/clipboard

clipboard

 

다운로드 수도 많은 걸로 봐서 많이 사용되는 라이브러리 같았습니다.

해당 clipboard.js 라이브러리를 그대로 사용하려 하였으나 제가 원하는 예제가 보이질 않았습니다.

 

저는 깔끔하게 함수에 인자 1개 넣으면 복사가 되는 걸 원했으나, clipboard.js 라이브러리의 예제들을 보면 dom 과 연동된 예제들 밖에 보이질 않았습니다. 그렇다면 dom 과 연동되는 부분들을 자동으로 처리해주는 코드를 작성해 준다면 제가 원하는 것처럼 인자에 원하는 문자열을 넣으면 복사가 되는 함수를 구현할 수 있을 것이란 생각이 들었습니다.

 

그렇게 해서 작성한 코드가 바로 다음과 같습니다.

https://github.com/wisdomstar94/javascript-library/blob/main/src/librarys/copy-to-clipboard/web/copy-to-clipboard.ts

GitHub - wisdomstar94/javascript-library: javascript 관련 다양한 라이브러리를 모아놓은 프로젝트 입니다.

 

로직은 다음과 같습니다.

 

1. 임시로 사용할 button element 를 생성. (아직 dom 에 append 하기 전)

2. 생성한 button element 에 사용자 눈에 보이지 않고, 기존 컨텐츠에 영향을 주지 않게 하는 style 지정.

3. body 요소에 하위 dom 변경 이벤트 감지 핸들러 설정.

4. body 요소에 생성한 button element 를 append.

5. body 요소에서 하위 dom 변경 이벤트 감지.

6. ClipboardJS 클래스의 인자에 button element 를 넘기면서 인스턴스화.

7. ClipboardJS 인스턴스에 성공했을 때의 이벤트 핸들러와 실패했을 때의 이벤트 핸들러 설정.

8. button element 에 click 이벤트 강제 발생.

9. ClipboardJS 인스턴스에서 복사 진행.

10. 성공 또는 실패에 대한 이벤트 발생.

11. body 요소에 하위 dom 변경 이벤트 감지 핸들러 제거.

 

위 과정이 자동으로 이루어지는 함수를 위 github 링크가 가리키는 typescript 파일에 작성하였으며 복사 기능을 이용하고 싶다면 아래와 같이 사용하시면 됩니다.

copyToClipboard('복사될 문구');

 

네, 드디어 제가 원하는 함수 모양이 나왔습니다. :)