클립보드에 액세스하는 JavaScript 기술:

1.클립보드 API 사용(navigator.clipboard.readText):

클립보드 API는 클립보드에서 읽고 쓸 수 있는 안전한 방법을 제공합니다. navigator.clipboard.readText()를 사용하여 클립보드에서 텍스트 데이터를 빠르게 검색하는 방법은 다음과 같습니다.

async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Clipboard content:', text);
        alert('Clipboard content: '   text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

// Trigger the function
getClipboardContent();

2. 버튼을 사용하여 클립보드 내용 가져오기:
때로는 사용자가 버튼을 클릭할 때만 클립보드 읽기를 트리거하고 싶을 수도 있습니다. 방법은 다음과 같습니다.

Show Clipboard Content

3. 클립보드 액세스 권한 처리:
Clipboard API에는 사용자 권한이 필요하므로 가능한 권한 문제를 적절하게 처리하는 것이 중요합니다. 클립보드를 읽거나 쓰려고 시도하기 전에 권한이 있는지 확인하는 방법은 다음과 같습니다.

async function getClipboardContent() {
    try {
        // Request permission to read from the clipboard
        const readPermission = await navigator.permissions.query({ name: 'clipboard-read' });
        if (readPermission.state === 'granted' || readPermission.state === 'prompt') {
            const text = await navigator.clipboard.readText();
            alert('Clipboard content: '   text);
        } else {
            alert('Clipboard read access denied');
        }
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

async function writeToClipboard(text) {
    try {
        // Request permission to write to the clipboard
        const writePermission = await navigator.permissions.query({ name: 'clipboard-write' });
        if (writePermission.state === 'granted' || writePermission.state === 'prompt') {
            await navigator.clipboard.writeText(text);
            alert('Text copied to clipboard: '   text);
        } else {
            alert('Clipboard write access denied');
        }
    } catch (err) {
        console.error('Failed to write to clipboard:', err);
    }
}

클립보드에 쓰기 예시

Copy "Hello, World!" to Clipboard

전체 예제 코드
여기 GitHub Gist에서 전체 예제 코드를 찾아 클립보드에 있는 내용을 빠르게 확인할 수 있습니다.

이 글이 여러분의 개발 생활을 조금 더 쉽게 만들었다면, 하트를 탭하고 ❤️ 더 많은 JavaScript 마법을 즐겨보세요!