특정 버튼을 클릭했을 때 지정된 링크나 현재의 링크를 저장(복사)되도록 하고 싶어서 방법을 찾아보았다!
<script>
document.getElementById('copyLink').addEventListener('click', function() {
const link = 'https://pronutrition.co.kr/product/detail.html?product_no=51';
navigator.clipboard.writeText(link).then(function() { 👈
alert('비밀 할인링크가 복사되었습니다!');
}).catch(function(err) {
alert('복사에 실패했습니다: ' + err);
});
});
</script>
해당 코드에서 정리 해 볼 부분은 navigator.clipboard.writeText(link)
이다!
navigator.clipboard.writeText()
는 지정된 텍스트(여기서는 link)를 클립보드에 복사하는 함수다.
이 함수는 Promise를 반환하며, 성공하면 then 블록 내의 함수가 실행됩니다.
navigator.clipboard:
클립보드에 접근하여 텍스트를 복사하거나 붙여넣기할 수 있게 해줍니다.
예를 들어, navigator.clipboard.writeText()
는 텍스트를 클립보드에 복사하는 메서드다.
navigator.geolocation:
사용자 위치 정보를 가져올 때 사용합니다. 예를 들어, navigator.geolocation.getCurrentPosition()
을 통해 현재 위치 정보를 얻을 수 있다.
navigator.userAgent:
현재 브라우저의 사용자 에이전트 문자열을 반환합니다. 이를 통해 어떤 브라우저나 플랫폼에서 코드가 실행되고 있는지 알 수 있습니다.
navigator.language:
브라우저의 기본 언어 설정을 나타냅니다.
navigator.onLine:
사용자가 온라인 상태인지 확인할 수 있습니다. 이 값이 true이면 사용자가 인터넷에 연결되어 있고, false이면 오프라인 상태입니다.
// navigator.clipboard 사용 예시
navigator.clipboard.writeText('Hello World!')
.then(() => {
console.log('Text copied to clipboard');
})
.catch(err => {
console.error('Failed to copy text: ', err);
});
then()은 Promise 객체에서 사용하는 메서드로,
비동기 작업
이 성공적으로 완료된 후에 실행될 코드를 정의할 때 사용된다.
JavaScript에서 비동기 작업(예: 데이터 요청, 클립보드 작업, 파일 읽기 등)은 결과가 즉시 반환되지 않고 시간이 걸리기 때문에, 이를 처리하기 위해 Promise가 사용됩니다.
Promise
는 성공(resolved) 또는 실패(rejected) 상태로 결과를 반환합니다.
then()
의 역할
비동기 작업이 성공적으로 완료되었을 때, 그 결과를 처리하는 코드를 실행합니다.
Promise
가 fulfilled(이행) 상태가 되었을 때 실행됩니다.
// then()의 사용 예시
navigator.clipboard.writeText('Hello World!')
.then(function() {
// 클립보드에 텍스트가 성공적으로 복사되었을 때 실행
alert('Text copied successfully!');
})
.catch(function(error) {
// 클립보드에 텍스트 복사가 실패했을 때 실행
alert('Failed to copy text: ' + error);
});
Promise
는 JavaScript에서 비동기 작업을 처리할 때 사용하는 객체로,
아직 완료되지 않은 작업에 대한 결과를 다룹니다. 비동기 작업이 성공하거나 실패할 때 결과를 처리하는 방법을 제공합니다. 주로 서버에서 데이터를 가져오거나, 파일을 읽는 등 시간이 걸리는 작업에 사용됩니다.
Promise는 세 가지 상태를 가집니다:
Pending (대기 중):
작업이 아직 완료되지 않은 초기 상태입니다.
이때는 성공도 실패도 하지 않은 상태입니다.
Fulfilled (이행됨):
작업이 성공적으로 완료된 상태입니다.
성공적인 결과가 Promise에 전달됩니다.
이 상태가 되면 then() 메서드가 호출됩니다.
Rejected (실패됨):
작업이 실패한 상태입니다.
실패 원인이 Promise에 전달됩니다.
이 상태가 되면 catch() 메서드가 호출됩니다.
// Promise 기본구조
const promise = new Promise(function(resolve, reject) {
// 비동기 작업 수행
let success = true; // 예시: 작업이 성공했다고 가정
if (success) {
resolve('작업이 성공했습니다!');
} else {
reject('작업이 실패했습니다.');
}
});
// Promise 사용
promise
.then(function(result) {
// 성공 시 실행되는 코드
console.log(result); // '작업이 성공했습니다!' 출력
})
.catch(function(error) {
// 실패 시 실행되는 코드
console.log(error); // '작업이 실패했습니다.' 출력
});