티스토리 뷰
# React Hook으로 카카오톡 채널 API 연결하기
이 작업을 하기 직전에, 아~주 쉽게 Kakao map API를 사용해서 지도를 만들었었다.
고수분들이 쉽게 설명해두신 글이 많기도 했고, 카카오에서 제공하는 개발자용 안내서에도 깔끔하게 설명되어 있어서 이해도 쉽고 구현도 쉬웠다.
그래서.. 처음엔 쉽게 생각하고 카카오 채널 API에 발을 들였는데.. 이게 무슨 소리인지..
Kakao map API (이하 map)은 다양한 프레임워크를 사용해서 써둔 글이 정말 많았는데 Kakao channel API (이하 channel)은.. 정.말. 없었다.
와 어쩜 이렇게 없을 수가 있지.. 코드 일부분을 써둔 글도 5개가 채 안 됐다...
구글 처음부터 끝까지 다 봤다. 하하하하하..
사실 JS코드에서 크게 변경할건 없었지만 난 초보라.. 어려워...
뭐 어찌 됐든 완성했으니.. 혹여나 다음에 이 코드를 또 쓸 나를 위해.. 그리고 블로그에 글도 올리고 싶었으니까.. 오랜만에 블로그 글 작성!
1. 카카오 API key 발급, 채널 홈 ID 알아내기
쉬운데 하나 하나 적기는 귀찮다.. 중요한건 이게 아니니까!?
첫번째 링크 보고 따라하면 쉽게 API key와 채널 ID를 받아올 수 있다.
카카오톡 채널 개발자 페이지도 링크 걸어둔다.
카카오톡 채널 1:1 채팅 버튼 추가하기
내 사이트에 카카오톡 채널 1:1 채팅 버튼을 추가할 수 있습니다.이 도움말에 사용된 카카오톡 채널 1:1 채팅 버튼 이미지는 카카오에서 공식적으로 제공하는 이미지입니다. 만약 커
imweb.me
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
2. 카카오 채널 SDK 추가
카카오 채널 api를 사용하기 위해 SDK를 추가해준다.
React에서는 index.js 파일에 넣으면 되겠지만, 나는 Next.js를 사용하고 있어 _document.tsx 파일 안에 넣었다.
위치는 <head> </head> 사이에! 종종 </body> 바로 윗부분에 넣으라고 하는 사람들도 있는데 난 그렇게 넣으면 에러가 뜬다..
이유가 뭘~까~대~체~,, 혹시 이 글을 우연히 보셨는데 이유를 아시는 분은 댓글로 알려주시면 정말 감사하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
class DocumentContainer extends Document {
render(): JSX.Element {
return (
<Html>
<Head>
{/* kakao channel api */}
<script
type="text/javascript"
src="//developers.kakao.com/sdk/js/kakao.min.js"
/>
</Head>
<body>
</body>
</Html>
);
}
}
export default DocumentContainer;
|
cs |
3. 카카오 script, 자바스크립트 Key, Channel Id 추가
기존 자바스크립트에서는 index 파일에서 script를 작성하면 API를 이용할 수 있다.
그렇지만 React에서 index에 script를 작성하면 에러가 발생하여,
사용할 페이지에 useEffect를 이용하여 script를 추가했다.
(React Hook이 아닌 그냥 React에서는 componentDidMount를 사용해주면 되는것 같다.)
그리고 window.Kakao.Channel.createChatButton 부분은
카카오 채널을 추가해주는 버튼을 생성하는 코드.
아까 1번에서 찾아온 카카오 아이디를 넣어주고, 그 밑은 버튼 모양을 정해주는 코드이다.
(근데 이게 분명 카카오에서 아이콘도 선택하고 ID랑 자바스크립트 key도 자동으로 넣어주는 페이지가 있었는데 지금 못찾겠다.. 어디에 있지.. 찾으면 수정해서 추가해야겠다.....)
그리고 Script 사용을 위하여 document.body.... 코드 추가!
그런데.. 계속해서 에러가 발생하는것 .. 분명 이 방법이 맞는데.. 대체 이유가 뭘까.. 하다가
try catch 문을 사용해서 Kakao.init 부분을 에러처리 해줬더니 에러가 멈췄다.
eslint를 사용하는 사람들은 catch(e)에서 계속 에러가 뜰건데 그때 저 주석을 추가해주면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// react Hook 에서 script 적용
useEffect(() => {
const script = document.createElement('script');
script.async = true;
// 에러 처리
try {
if (Kakao) {
window.Kakao.init('카카오 자바스크립트 key');
}
// eslint-disable-next-line no-empty : eslint 무시
} catch (e) {}
// Kakao Channel 추가 버튼 생성
window.Kakao.Channel.createChatButton({
container: '#kakao-talk-channel-chat-button',
channelPublicId: '카카오 아이디', // Kakao Channel 홈 URL에 명시된 id로 설정
title: 'consult',
size: 'small',
color: 'yellow',
shape: 'pc',
supportMultipleDensities: true,
});
// Script 사용을 위하여 추가
document.body.appendChild(script);
document.body.removeChild(script);
}, []);
}
|
cs |
혹시나 typescript를 적용해서 Kakao에서 에러가 뜨는 사람들은
declare global {
interface Window {
Kakao: any;
}
}
이 코드를 넣어 타입 선언을 해주면 된다.
4. 버튼 div 추가
return 안에 카카오 채널 채팅하기 버튼이 들어갈 container를 넣어주면 끝!
|
1
2
3
|
return(
<div id="kakao-talk-channel-chat-button"></div>
);
|
cs |
5. 완성 !
