[클립보드] navigator.clipboard ?? 웹표준 클립보드?

리액트의 공유하기 기능을 만들다가 발견하였다.

navigator.clipboard ??

react에서 사용하는 메소드인가?생각했지만 아니다.

 

 

 어떤일을 하는 객체?? 

[navigator]

navigator 객체를 통해 다양한 정보를 얻을 수 있습니다. 예를 들어, 현재 사용 중인 브라우저의 이름, 버전, 사용 언어, 플랫폼 등의 정보를 확인할 수 있습니다. 또한, 이 객체를 사용하여 사용자의 위치 정보, 디바이스의 센서 상태, 네트워크 연결 상태 등을 확인할 수 있습니다.

 

[clipboard]

navigator 의 프로퍼티로 클립보드에 복사를 하거나 클립보드에서 텍스트를 읽는 등의 작업을 수행합니다

 

 

 

정리하면,

• navigator.clipboard는 웹 표준의 일부이며, React 또는 다른 JavaScript 프레임워크를 사용하는 웹 애플리케이션에서 모두 사용할 수 있다. 
• React 외의 다른 프레임워크나 순수 JavaScript로 개발된 웹 애플리케이션에서도 navigator.clipboard를 사용할 수 있습니다. 
• 이 API는 모던 웹 브라우저의 JavaScript 환경에서 지원되므로, 해당 브라우저에서 실행 중인 모든 웹 애플리케이션에서 사용할 수 있습니다.

별도의 설치는 필요없이 사용이 가능합니다.

 

---

 

 

 

 어떻게 사용해?? 

모든 메소드를 다 아는건 아니지만, 이번에 사용해본 것만 적어 보겠습니다.

• navigator.clipboard.readText
• navigator.clipboard.writeText

navigator.clipboard는 promise 방식으로 동작합나디. 이유는 비동기코드를 더 쉽게 관리하고 제어할수 있으며, 문제가 있을시 에러사항을 처리를 할수 있습니다.

 

 

 

navigator.clipboard.readText

클립보드에 있는 첫번째 text를 읽어와서 출력하는 메서드 입니다

 

// 클립보드에서 텍스트 읽기
const click = () => {
    navigator.clipboard.readText()
    .then(text => {
        console.log('클립보드에서 읽은 텍스트:', text);
    })
    .catch(err => {
        console.error('텍스트 읽기 실패:', err);
    });
}

<button onClick={click}/> 텍스트 읽기 </button>

[결과 값]

 

 

 

 

navigator.clipboard.writeText

이벤트 발생시 클립보드에 복사하는 메소드 입니다.

// 클립보드에 텍스트 복사
const click = () => {
    navigator.clipboard..writeText('Hello, world! 111 222 333 444')
    .then(() => {
        console.log('텍스트가 클립보드에 복사되었습니다.');
    })
    .catch(err => {
        console.error('텍스트 복사 실패:', err);
    });
}

<button onClick={click}/> 복사하기 </button>

[결과 값]

 

 

 

---

 

 

 동작이 안될수 있는 상황 [주의사항] 

• 브라우저 호환성: 모든 브라우저가 navigator.clipboard를 지원하지 않을 수 있어요. 예를 들어, 옛날 버전의 브라우저나 일부 특정 모바일 브라우저에서는 지원되지 않을 수 있어요.
• 보안 정책: 어떤 웹사이트에서는 보안상의 이유로 클립보드 접근을 허용하지 않을 수 있어요. 이는 사용자의 정보를 보호하기 위한 조치로 이해하시면 됩니다.
• 사용자 권한 부족: 사용자가 클립보드 접근을 허용하지 않은 경우에는 navigator.clipboard가 동작하지 않을 수 있어요. 사용자의 명시적인 동의가 필요할 때가 있어요.
• HTTPS 요구사항: navigator.clipboard는 HTTPS 프로토콜에서만 동작해요. 따라서 보안을 위해 HTTPS로 호스팅된 페이지에서만 사용할 수 있어요.
• 브라우저 설정: 사용자가 브라우저 설정에서 클립보드 액세스를 차단한 경우에도 navigator.clipboard가 동작하지 않을 수 있어요.

https://caniuse.com/?search=navigator.clipboard

 

 

 

 

 

[참고]
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

https://dev.to/darkmavis1980/the-navigator-clipboard-api-in-javascript-38gn