Written by Nostrss
on November 19, 2022

[코드지갑] 카카오 공유하기

이번주에 회사에서 SNS 공유하기 기능을 구현했었다.

카카오, 라인, 페북.. 한 5개 정도를 구현했었는데, 카카오톡 공유하기가 좀 어려웠던 것 같아서 복습 겸 다시 만들어봤다.

준비

카카오톡 애플리케이션 추가하기
javascipt 키 복사해두기
플랫폼 등록하기
도메인 등록하기

도메인에 개발중 테스트를 할 수 있도록 http://localhost:3000도 등록해야한다.

카카오 SDK 불러오기

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://t1.kakaocdn.net/kakao_js_sdk/2.0.1/kakao.min.js';
  script.async = true;
  document.body.appendChild(script);
}, []);

공유하기 버튼 만들기

<div>
  <button type='button' onClick={onClickKakaoShare}>
    <img
      src='https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png'
      alt='kakao_share'
    />
  </button>
</div>

onClick함수 만들기

window.Kakao.init 이 가장 중요한 포인트인 듯하다. 버튼이 클릭 될때 마다 init을 해줘야 하는 것 같다.

const onClickKakaoShare = () => {
  if (!window.Kakao.isInitialized()) {
    window.Kakao.init(process.env.REACT_APP_KAKAO_JAVASCRIPT_KEY);
  }

  window.Kakao.Share.sendDefault({
    objectType: 'feed',
    content: {
      title: 'Nostrss',
      description: '카카오 공유하기',
      imageUrl:
        'https://raw.githubusercontent.com/nostrss/nostrss.github.io/master/assets/favicon-32x32.png',
      link: {
        mobileWebUrl: url,
        webUrl: url,
      },
    },
    buttons: [
      {
        title: '웹으로 보기',
        link: {
          mobileWebUrl: url,
          webUrl: url,
        },
      },
    ],
  });
};

이슈

처음 페이지 진입시

kakao_share:1 Failed to load resource: the server responded with a status of 404 ()

라는 메시지가 나온다. 먼가 비동기 처리를 잘못했나..

← → Top