다음 글은 웹툰 취향 테스트 결과창에 카카오톡으로 공유 버튼을 넣기 위한 과정을 기록한 포스트입니다.
0. 시작
일단 카카오 디벨로퍼스 홈페이지에 나온 대로 따라 하기만 하면 쉬울 것 같다고 생각했으나, 역시 생각과 실행은 천차만별이었다. 서버리스로 구현한 이 프로젝트에서 api 키를 어떻게 숨겨야 하지? 이전에 api 키를 그대로 깃헙에 올렸다가 경고 메일을 받았던 기억이 생생해서 아찔해졌다.
1. 시도(문제점)
홈페이지에 나온 절차대로 적어보면 다음과 같다. 링크를 따라가면 상세히 설명되어 있다.
- 카카오 디벨로퍼스 로그인 후 애플리케이션 등록
https://developers.kakao.com/docs/latest/ko/getting-started/app- 카카오 링크 API / 카카오톡 메세지 API 중에 선택
나는 비교적 간편한 카카오 링크 API를 사용했다.- 메세지 종류 / 구성 방법 / 보낼 대상 선택
(카카오 디벨로퍼스> 도구> 메시지 템플릿) 경로를 따라 들어가면 샘플 메세지를 미리 보내볼 수 있다.
api 사용은 워낙 친절하게 나와있어서 문제될 게 없어 보였는데, 문제는 키를 어떻게 숨기느냐. ".env 파일에 넣어서 .gitignore 에 넣어주면 되겠네!" 생각난 대로 npm i dotenv, import dotenv from "dotenv", dotenv.config(). 문제가 해결될 거라 생각했다.
Uncaught SyntaxError: Cannot use import statement outside a module
이 에러를 없애기 위해서는 package.json 에 "type":"module"을 넣으면 된다는 방법을 찾아서, 그렇게 했지만 허사였다.
찾아봤더니 리액트 앱에서 .env 를 쓰는 방법은 정말 간단했다. 이참에 리액트도 공부하자는 생각으로, 한 달 조금 넘게 리액트, 리액트 Hook을 익혔다. vanillaJS 로 만든 프로젝트를 리액트로 다시 만들면서 카카오톡 공유 기능을 넣자!는 게 계획이었고, 시간이 걸렸지만 만들어냈다.
2. 리액트로 다시 만들기(해결)
create-react-app 에서 .env 쓰기
dotenv 를 설치할 필요도 없다! src 폴더 밖(최상위)에서 .env 파일 만들면 됨. gitignore 에 .env 넣어줌으로써 숨기면 끝난다.
주의할 점은, 리액트 앱에서 API 키를 쓸 땐, 이름 앞에 'REACT_APP'을 꼭 붙여줘야 한다는 것이다.
//.env
REACT_APP_KAKAO_API_KEY=따옴표 없이 key 를 넣으면 됨!다른 파일에서 키를 사용할 때는 아래와 같은 형식으로 불러오면 됨.
process.env.REACT_APP_KAKAO_API_KEY카카오 링크 API 구현하기
카카오 디벨로퍼스 사이트에서 내 애플리케이션 등록 후, 카카오 링크 API를 사용, 종류로는 feed 형식의 메세지를 선택했다.
- public/index.html 파일 head 안에 아래 script 를 추가한다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>- 가장 먼저 실행되는 파일에(여기서는 index.js) 초기화 코드를 넣는다.
window.Kakao.init(발급받은 API 키);
-
공유 템플릿을 전송하는 로직이 들어간 파일을 생성한다.(여기서는 kakao.js)
-
공유 버튼에서 함수를 호출한다.
// result.jsx
import { shareKakao } from '../../kakao';
const Result = () => {
return(
// 중간 코드 생략
<a onClick={shareKakao}>
<Button text="카카오톡으로 공유하기"/>
</a>
);
}
export default Result;3. 결과 화면
| 공유버튼 눌렀을 때 | 공유됐을 때 |
|---|---|
 |  |
받아온 링크는 다음과 같다.
4. 해결해야 할 문제
- 이미지 url 을 지정했음에도 이미지가 뜨지 않는다! 경로를 어떻게 지정해야 할 지 해결하고 싶다.
- 사실 디폴트 템플릿이 아니라 사용자 정의 템플릿을 사용하고 싶었다. 하지만 반복된 오류를 해결하지 못했고, 일단 구현되는 디폴트 템플릿을 사용했다. 메세지 템플릿 빌더에서 원하는 템플릿을 만든 후, sendCustom()을 사용하면 되는 거였는데, 아직 오류의 원인을 모르겠다🥲
- 리액트로 모든 기능을 구현해내긴 했지만, 성능 개선이 필요해 보인다.
