브라우저에서 복사 붙여넣기를 구현해보자

워크스페이스 공유를 위해서 현재 워크스페이스 링크를 복사하는 로직이 필요했다. 복사/붙여넣기는 어떻게 구현할까?

→ Navigator 객체를 사용하면 가능하다

Navigator

• Navigator객체는 브라우저의 정보를 표시하는 객체
• 브라우저의 버전이나 종류 정보 등을 제공

속성

• navigator.cookieEnabled : 브라우저의 쿠키 사용 여부
• navigator.language : 브라우저에서 사용되는 언어 (ex. ko-KR)
• navigator.onLine : 브라우저가 온라인인지 여부
• navigator.userAgent : 브라우저와 운영체제 정보
• 등등

clipboard API

• Promise 기반으로 클립보드 내용을 비동기식으로 접근할 수 있게 도와주는 API
• localhost나 https 환경에서만 동작!
• read() : 클립보드로부터 데이터를 요청하며 Promise를 반환
• readText() : 클립보드로부터 텍스트를 요청하며 Promise를 반환
• write(data) : 클립보드로부터 데이터를 쓰며 Promise를 resolve하며 작업이 완료됨을 알림
• writeText(text) : 클립보드로부터 텍스트를 쓰며 Promise를 resolve하며 작업이 완료됨을 알림

프로젝트 적용

복사하기

const handleCopyLink = () => {
	navigator.clipboard.writeText(URL);
};

• 버튼을 누르면 원하는 링크(URL)를 클립보드로 복사할 수 있다

붙여넣기

navigator.clipboard.readText().then((text) => {
    console.log(text);
});

• Promise를 반환하기 때문에 then을 사용해서 복사된 내용 읽어올 수 있다
• 브라우저에서 권한을 허용해줘야 가능하다, 아니면 reject된다

→ BooCrum에서는 text 복사하기만 필요했는데 다음번에는 이미지나 다른 데이터들을 복사/붙여넣기를 도전해보고 싶다

Navigator - Web API | MDN