웹 설정

React Native Kakao는 네이티브와 웹 플랫폼에서 같은 수준의 개발자 경험을 제공합니다.

설정에 관한 자세한 내용은 Kakao SDK 문서에서 확인할 수 있습니다.

카카오 JavaScript SDK 설치

다운로드 페이지에서 최신 버전의 카카오 SDK를 index.html의 head에 삽입하여 설치합니다.

<!DOCTYPE html>
<html>
<head>
...
  <script src="https://t1.kakaocdn.net/kakao_js_sdk/{{Version}}/kakao.min.js"
          integrity="{{integrity}}"
          crossorigin="anonymous"></script>
</head>

<body>
...
</body>
</html>

팁

Expo에서는 npx expo customize 명령으로 index.html을 수정할 수 있습니다.

Expo 문서

카카오 콘솔에서 플랫폼 등록

플랫폼 탭에서 사이트 도메인을 추가합니다.

웹 플랫폼의 지원 범위

웹에서 지원하는 API는 네이티브 API와 같은 필드 이름과 값 타입으로 응답합니다. 시간은 초 단위 Unix 타임스탬프, 메시지 발송 결과는 발송에 성공한 수신자의 UUID 배열로 반환합니다. 기능별 동작은 브라우저와 카카오 SDK의 지원 범위에 따라 달라집니다.

API	웹에서의 동작
login	web.redirectUri로 이동합니다. issueAccessTokenWithCodeWeb으로 인가 코드를 토큰으로 교환한 뒤 setAccessTokenWeb을 호출합니다.
isKakaoTalkLoginAvailable / getKeyHashAndroid	각각 false와 undefined를 반환합니다. 웹에서는 이 네이티브 기능을 확인할 수 없습니다.
친구 선택	팝업을 엽니다. mode, viewAppearance, orientation은 네이티브 전용 옵션입니다.
채널 URL API	채널 추가·채팅 URL을 반환하거나 엽니다. URL을 여는 함수는 사용자 동작에서 호출해야 하며, 팝업이 차단되면 Package-Assertion 오류로 거부합니다.
navigateTo / shareTo	데스크톱에서는 false를 반환합니다. 모바일 웹에서 true는 SDK에 앱 실행을 요청했다는 뜻입니다. 브라우저 API로는 앱 설치 여부나 실행 성공 여부를 확인할 수 없습니다.
카카오내비 옵션	JavaScript SDK가 설치 안내를 처리합니다. openWebInstallUrlIfNaviAppNotAvailable은 네이티브 전용입니다. shareTo는 목적지와 좌표 타입을 전달하며 경유지와 경로 탐색 옵션은 전달하지 않습니다.

웹 API에 대하여

웹 API의 내부 구현은 Android, iOS 플랫폼과 다를 수밖에 없습니다.

API 응답은 플랫폼 간에 일관되고 이름도 모두 동일하지만 웹 전용 API와 인자도 있습니다.

예를 들어 로그인 시 사용하는 redirectUri가 웹 전용 인자입니다.

웹에서만 사용하거나 필요한 API는 함수 이름 뒤에 Web이 붙습니다.

예를 들어 User.setAccessTokenWeb()이 있습니다.

웹 전용 인자는 모두 함수 인자의 web 필드에 전달합니다.

core 패키지의 SDK 초기화 함수는 다음과 같습니다.

export async function initializeKakaoSDK(
  appKey: string,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  options: { web?: { javascriptKey: string; restApiKey: string } },
)

이 함수는 필요한 웹 전용 인자를 web 객체로 받습니다.

경고

웹을 지원하지 않는다면 web 인자를 지정할 필요가 없으며 Web으로 끝나는 API도 호출하지 말아야 합니다.

웹에서 SDK를 초기화하려면 web.javascriptKey와 web.restApiKey가 필요하며, 로그인하려면 web.redirectUri가 필요합니다. 그 밖에 지원하는 API는 각 문서에 명시된 기본값을 사용합니다.