[React + Typescript] 카카오 SDK를 이용한 공유기능 구현

서비스 내에서 '카톡공유하기' 버튼을 누르면,

자동으로 카카오톡 프로그램이 열리면서 공유 링크를 전송할 수 있는 기능을 구현했다.

 

 

---

 

타입스크립트.. Any를 이번만 허용해주오...

 

우리는 타입스크립트를 사용 중이고, 카카오 SDK는 window.kakao 와 같은 형식으로 사용해야 하는데

카카오에서 type을 알려주지 않다보니 이 과정에서 약간 헤맸다.

 

처음엔 .eslintrc.json에서 any를 허용해주려고 했으나..

이 기능 하나때문에 전체 프로젝트의 설정을 건드리는 것도 별로인데다가,

왜인지 any를 무시하라는 명령어도 동작하지 않았다(...)

 

그래서 애니 쓰지 말라며 에러를 띄우는 행마다 

// eslint-disable-next-line

옵션을 주어 일단은 무시하도록 했다...

이렇게...

 

---

 

 

1. 카카오톡 디벨로퍼 https://developers.kakao.com/ 가입 

Kakao Developers

 

 

2. 내 애플리케이션 👉 애플리케이션 추가하기 👉 등록 후 👉 요약정보탭 (자바스크립트 키 복사)

 

 

3. 플랫폼 url 등록

 

 

4. client 루트 디렉토리에 .env 파일 생성 후, 복사한 키값을 아래와 같은 형태로 입력

REACT_APP_KAKAO_KEY=38f.......

 

5. vite-env-d.ts에 아래 코드 추가

/// <reference types="vite/client" />

declare module '*.xlsx';


//아래 코드 추가하기
interface Window {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  Kakao: any;
}

 

6. index.html 파일 스크립트에 아래 코드 추가 (window.Kakao를 사용하기 위함)

    <!-- Kakao talk -->
    <script
      type="text/javascript"
      src="https://developers.kakao.com/sdk/js/kakao.js"
    ></script>

 

7. 처음 실행하기 전에 kakao.init 함수를 딱 한 번(두번하면 에러남!) 실행해야 하는데, 이 과정에서도 약간 헤맸다. 

 

인터넷 서치하다보면 나오는 예제들에는

useEffect안에서도 initialize를 해주고, 또 바깥에서도 if(!initialized)...뭐 이런 식으로

여러 군데에서 처리하게 하는데, 이것들이 서로 꼬여서 에러를 뱉어냈다.

 

👉 useEffect안에 try/catch 구문을 넣고, 여기에 useState로 init 된/안된 상태를 관리하도록 하여 해결함

 

 

import React, { useEffect, useState } from 'react';
import Button from 'components/atoms/Button';

//공유버튼 눌렀을 때 사용자를 넘겨줄 url
type Props = {
  url: string;
};

//env 파일에 등록한 키값
const KAKAO_KEY = process.env.REACT_APP_KAKAO_KEY;

const ShareKakaoButton: React.FC<Props> = ({ url }) => {
  const kakao = window.Kakao;
  // eslint-disable-next-line
  const [isInitialized, setInitialized] = useState(kakao.isInitialized());


  useEffect(() => {

	//페이지에 처음 들어왔을 때 
	if (kakao && KAKAO_KEY) {
    
    //만약 tialized가 안되어있으면 init 함수 실행
      if (!isInitialized) {
        try {
          // eslint-disable-next-line
          kakao.init(KAKAO_KEY);
          setInitialized(true);
        } catch (e) {
          return;
        }
      }

      // eslint-disable-next-line
      kakao.Link.createDefaultButton({
        objectType: 'feed',
        container: '#kakao-link-btn',
        content: {
          title: '리포트 공유',
          description: '학생 리포트 공유',
          imageUrl: 'IMAGE_URL',
          link: {
            mobileWebUrl: url,
            webUrl: url,
          },
        },
        buttons: [
          {
            title: '웹으로 보기',
            link: {
              mobileWebUrl: url,
              webUrl: url,
            },
          },
        ],
      });
    }
  }, [kakao, url, isInitialized, setInitialized]);

  return (
    <div>
      <Button
        id="kakao-link-btn"
        disabled={!isInitialized}
      >
        카카오톡 공유
      </Button>
    </div>
  );
};

export default ShareKakaoButton;

 

 

 

---

 

기능 구현 후 테스트할 때 발견한 에러

 

크롬 F12 개발자도구에서 모바일모드로 테스트할 때,

scheme does not have a registered handler 에러가 발생하며 공유기능이 실행되지 않았다.

 

검색해보니 유저 에이전트가 임의로 변경된 상황에서는 에러가 난다고 한다.

(실제 핸드폰으로 테스트하면 잘 동작함! 😀)

 

 

https://devtalk.kakao.com/t/scheme-does-not-have-a-registered-handler/112757

[카카오링크] scheme does not have a registered handler 에러