[토이프로젝트] 카카오톡 공유하기 기능

본 포스팅에서는 사이드프로젝트 스케치데브를 개발하며 활용한 카카오톡 공유하기 기능을 설명하고 있습니다.

스케치데브가 궁금하시다면: https://sketchdev.kr

스케치데브 - 개발자 캐치마인드

 

 

사전 설정

화면 우상단 [내 애플리케이션] 클릭

 

로그인은 필수겠죠?

 

 

생성한 애플리케이션을 누르시면 아래와 같이 각종 정보들을 확인할 수 있습니다. 요약 정보부터 시작해서 일반, 비즈니스, 앱 키, 플랫폼, 팀 관리 등 굉장히 다양한 기능을 제공합니다. 그리고 요약 정보에는 저희가 생성한 애플리케이션을 사용할 수 있는 앱 키가 존재합니다. 해당 키는 외부에 노출되지 않도록 잘 관리해주세요.

 

 

 

스크롤을 내려 [플랫폼 설정하기] 링크를 클릭해줍니다.

 

 

 

각자 플랫폼에 맞는 버튼을 클릭하면 됩니다.

스케치데브는 웹서비스니까 [웹 플랫폼 등록]을 클릭합니다.

 

 

도메인을 입력하라고 뜨네요. 입력하고 저장합니다.

 

 

저장되었습니다.

 

Javascript SDK 추가

그럼 이제 코드 부분을 살펴보겠습니다.

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

위의 kakao sdk CDN을 public/index.html에 입력합니다.

 

카카오 sdk를 불러왔으면 API Key init 을 해야합니다.

 

 

API KEY를 최상위(index.js)에서 init합니다.

 

 

 

react에서 공유하기 버튼 생성

자세히: https://developers.kakao.com/sdk/reference/js/release/Kakao.Link.html#.createCustomButton__anchor

버튼 종류별 테스트: https://developers.kakao.com/tool/demo/message/kakaolink?default_template=list&method=button&message_type=scrap

 

스케치데브는 스크랩버튼을 활용했습니다.

export default function Home(props) {
useEffect(() => {
	  window.Kakao.Link.createScrapButton({
	    container: '#kakao-share', // id=kakao-share 부분을 찾아 그 부분에 렌더링합니다. 
	    requestUrl: window.location.href,
	  })
	}, []);

	return (
    <>
	    <_button id="kakao-share" className="share-wrapper">
	      <_img className="kakao shareicon" src={kakao} />
	    </_button>
	  <>
  )
}

 

끝.