기업협업에서 진행한 task 중 카카오톡 공유 버튼을 추가하는 과제와 함께 아래의 참고 블로그를 받았다.
[Git Page Jekyll Blog] - [17] 포스트 공유하기: Kakao
이 포스트에서는 Kakao에 포스트의 링크를 공유하는 방법에 대해 알아본다. Kakao 공유 방법은 Kakao가 제공하는 API를 사용하며 이를위해 Kakao 개발자 사이트에 등록한 후 Kakao가 제공하는 SDK 다운로
seungwubaek.github.io
kakao developers 에서 애플리케이션을 세팅하는 것부터 템플릿의 구조, 전체 코드까지 정말 자세히 설명해 주셔서 처음 접한 사람들도 금방 따라 할 수 있을 것이다. 이에 더하여 스크랩이 아닌 단순 링크 공유를 테스트하기 위해 진행하면서 고민했던 과정과 배포 후 소소한 디버깅 경험을 기록해보려고 한다.
📍목표
url 버튼이 있는 메시지 템플릿을 카카오톡을 공유할 수 있는 버튼을 생성한다.
🗂️ 과정
1. 메세지 템플릿 만들기
가장 중요한 것은 url 버튼이었기 때문에 나머지는 테스트용으로 간단하게 추가하였다. 프로필의 경우 잘 바뀌지 않을 정보라 판단하여 템플릿에서 직접 설정하였고, 제목과 설명은 서비스 과정에서 수정될 수 있다고 판단하여 파라미터로 설정하였다.
이 메세지 템플릿에는 링크가 하나 이므로 공통링크에 추가하여 작업했다. 도메인은 내 애플리케이션 플랫폼 도메인에 꼭 추가해야 한다.
2. 공유하기 버튼 만들기
프로모션 안내 페이지에서 추가할 버튼이기 때문에 위 블로그의 코드를 참고하여 직접 만들어서 진행하였다.
우선 index.html 를 아래와 같이 작성하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카톡 공유 테스트</title>
<style>
.btn {
height: 60px;
font-size: 16px;
border-radius: 6px;
width: 100%;
padding: 12px 24px;
margin-bottom: 8px;
cursor: pointer;
background-color: rgb(251, 219, 0);
color: rgb(1, 0, 2);
border: 1px solid rgb(239, 209, 0);
}
</style>
</head>
<body>
<p> 프로모션 링크를 카카오톡 친구들에게 공유해보세요!</p>
<a class="btn btn--kakao" id="kakaotalk-sharing-btn" title="Share on Kakao" onclick="scrapKakao(this);">
<span> 카카오톡 공유 </span>
</a>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
Kakao.init('javascript key'); //내 애플리케이션 앱 키
</script>
<script src="./kakao.js"></script>
</body>
</html>
그러면 이렇게 공유 버튼을 볼 수 있다.
3. 공유하기 함수 추가
그리고 kakao.js 에 shareKakao() 함수를 추가하였다.
나는 직접 버튼을 만들었기에 Kakao.Share.sendCustom 을 사용하였고, templateId 에는 위에서 만든 메시지 템플릿의 ID를, templateArgs 에는 템플릿에서 설정한 매개변수의 값을 설정했다.
function shareKakao() {
const title = '추천인 프로모션';
const description = '해당 링크로 서비스 신청 시 즉시 할인 혜택을 받을 수 있습니다!';
const pathName = '도메인 뒤에 붙을 path 작성';
Kakao.Share.sendCustom({
templateId: 위에서 만든 템플릿 ID,
templateArgs: {
title: title,
description: description,
pagePathname: pathName
},
});
}
잘 작성되었다면 카카오톡 공유 버튼을 누르면 공유 팝업창이 뜨고 친구에서 위에서 만든 메시지를 보낼 수 있다!
🔧 디버깅
이렇게 내가 테스트 용으로 만든 공유버튼은 모바일에서도 잘 동작했는데, 이 소스를 바탕으로 프론트엔드 팀원분이 실제 업무 프로젝트에서 만든 공유버튼이 배포 후 동작하지 않은 이슈가 발생하였다. 더 이상한 건 바로 위 이미지처럼 pc 에서는 잘 동작했던 것이었다.
이슈 발견 후 직원분들과 여러 테스트를 하며 찾은 원인은, 공유 버튼을 여러번 눌렀을 때 나타나는 오류를 해결하기 위해 프론트엔드 팀원분이 넣은 리로드 코드였다. 이 리로드 코드를 지우니 모바일에서도 동작은 하나, 처음 눌렀을 때만 동작하고 그 뒤는 동작하지 않았다. 리로드 코드를 넣게 된 현상이 모바일에서 다시 나타난 것이었다.
그렇게 뭐가 원인인지 고민하다가 kakao.init 부분이 문제일 것 같으니, init 여부를 체크하는 분기처리를 추가하라는 리뷰를 받았다. 그 이후로 서치를 해보니 아래의 dev talk 에서 해결을 찾을 수 있었다.
Kakao.init 문제
개인적인 프로젝트여서 민감한건 없으니 그냥 코드를 올리겠습니다. <div class="store_buttons_div"> <i class="fas fa-heart" onclick="favorite()"></i> <button type="button" id="find_road">길찾기</button> <span id="share_kakao"><i
devtalk.kakao.com
if (!Kakao.isInitialized()) {
Kakao.init('JAVASCRIPT_KEY')
}
위와 같이 initalized 되지 않은 경우만 Kakao.init 을 하도록 코드를 추가하니 pc와 모바일에서 모두 정상 작동하였다!
다른 팀원분이 코드였지만 내 코드를 바탕으로 작성되었기 때문에 배포 후 오류가 난다고 들었을 때 적극적으로 해결하고자 노력하였다. 빠른 리뷰를 받아서 금방 해결하여 정말 다행이었고, 이렇게 소소한 오류도 아찔한데 실무에서 맞이하게 될 크고 작은 오류들이 벌써 기대되고 두렵다..
'HEY > Study' 카테고리의 다른 글
| NestJS 강의 수강 메모 with 노마드코더 (0) | 2024.01.15 |
|---|
