Kakao Developers에서 '내 어플리케이션 > 추가 > 플랫폼'
+ 요약 정보에서 JavaScript 키를 확인해주자
[index.html]
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
index.html의 head에서 Kakao SDK를 불러온다
[API/Share/initialize.js]
const { Kakao } = window;
export default function initialize() {
Kakao.init('JavaScript 키');
}
초기화는 이렇게 하나의 모듈로 빼서 관리하면 좋다
* JavaScript 키는 보안을 위해 비공개 파일에서 import하도록 변경할 필요가 있다
[App.js]
import initialize from './API/Share/initialize';
export default function App() {
useEffect(() => {
initialize();
}, []);
return (
App.js에서 useEffect로 API를 적용한다
[API/Share/shareKakao.js]
const { Kakao } = window;
export const shareKakao = (title, imageUrl, sharedUrl) => {
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: title,
description: 'AI가 생성한 AISM PRO 음원을 들어보세요.',
imageUrl: imageUrl,
link: {
webUrl: sharedUrl,
mobileWebUrl: sharedUrl,
},
},
buttons: [
{
title: '자세히 보기',
link: {
webUrl: sharedUrl,
mobileWebUrl: sharedUrl,
},
},
],
});
};
공유할 내용을 커스텀해주자
[SharingModal.js]
import { shareKakao } from '../../../API/Share/shareKakao';
<div
className="sharing_modal_btn3"
onClick={() => {
shareKakao(props.title, props.ImageUrl, props.sharedUrl);
}}>
import하고 파라미터를 연결해 사용하면 끝!
Reference🔽
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
카카오링크 API로 메시지 보내기
Kakao Developers에서 애플리케이션과 플랫폼을 등록하고 키를 발급 받은 후의 과정을 작성했습니다.사이드 프로젝트에서 테스트 결과를 웹에서 카카오톡으로 공유하는 기능을 구현하게 되었다.저
velog.io
페이스북, 트위터 공유하기 기능도 추가해보았다
[API/Share/shareFacebook.js]
export const shareFacebook = (sharedUrl) => {
let url = encodeURIComponent(sharedUrl);
window.open(
`https://www.facebook.com/sharer.php?u=${url}`,
'popup',
'width=400, height=400'
);
};
* php를 활용한 옛날 방식인데 카카오처럼 SDK를 사용하는 방식도 가능하다!
[API/Share/shareTwitter.js]
export const shareTwitter = (title, sharedUrl) => {
let url = encodeURIComponent(sharedUrl);
window.open(
`https://twitter.com/intent/tweet?url=${url}&text=${title}`,
'popup',
'width=400, height=400'
);
};
'Front-end > React' 카테고리의 다른 글
[TIL] progress 태그 애니메이션 (2) | 2022.02.07 |
---|---|
[TIL] React 토스트 메시지 (6) | 2022.01.27 |
[코딩애플] #9 성능잡기 (8) | 2022.01.17 |
[코딩애플] #8 if문 작성패턴 (2) | 2022.01.13 |
[TIL] 클래스형 컴포넌트에서 Redux payload (0) | 2022.01.13 |