링크 복사 (feat.then,catch,promise)

특정 버튼을 클릭했을 때 지정된 링크나 현재의 링크를 저장(복사)되도록 하고 싶어서 방법을 찾아보았다!

---

<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과 catch는 무엇인가?!

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);
  });

간단 정리

• then(): Promise가 성공적으로 완료되었을 때 실행될 코드를 정의.
• catch(): Promise가 실패했을 때 실행될 코드를 정의.

---

Promise는 뭔가??

Promise는 JavaScript에서 비동기 작업을 처리할 때 사용하는 객체로,
아직 완료되지 않은 작업에 대한 결과를 다룹니다. 비동기 작업이 성공하거나 실패할 때 결과를 처리하는 방법을 제공합니다. 주로 서버에서 데이터를 가져오거나, 파일을 읽는 등 시간이 걸리는 작업에 사용됩니다.

Promise의 상태

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); // '작업이 실패했습니다.' 출력
  });