0. 동작순서

1. 사전 설정

만약 기본 템플릿을 사용한다면 플랫폼 등록 만 진행하면 된다.

플랫폼 등록은 이곳 링크에 정말 상세하게 적혀있기에 따라하면 큰 어려움 없이 진행할 수 있다.

그런데 커스텀을 할려면 아래 사진처럼 커스텀을 진행 후에 이곳을 참고해 값들을 넣어주면 된다.

2. interface 설정

그래서 Typescript에서 이 API를 사용할려면 Kakao 타입을 전역으로 선언해줘야 한다.

// /src/@types/Kakao.d.ts
interface Window {
  Kakao: any;
}

이제 이걸 타입스크립트가 인식하게 해줘야 하는데 tsconfig.json 파일을 수정하면 된다.

{
  "compilerOptions": {...},
  "typeRoots": ["./src/@types"]
}

이렇게 해주면 window.Kakao 타입을 인식하게 된다.

3. 스크립트 로드

kakao share API는 npm으로 설치가 불가능하고, js 파일 형식으로만 배포가 되고있다.

그래서 이걸 로드 해줘야 하는데 html에 로딩해주면 사용하지 않을때도 불러오기에 따로 함수를 만들어줬다.

export function loadScript(src: string, intergrity: string = '', crossOrigin: string = 'anonymous') {
  return new Promise((resolve, reject) => {
    try {
      const body = document.querySelector('body');
      const script = document.createElement('script');

      script.onload = () => {
        resolve(script);
      };
      script.src = src;
      script.integrity = intergrity;
      script.crossOrigin = crossOrigin;
      script.async = true;

      body?.appendChild(script);
    } catch (e) {
      reject(e);
    }
  });
}

이 함수는 script 로딩이 완료되면 script를 return한다.