카카오톡 공유 API 연동 중 SDK 오류에 대한 질문

선생님, 안녕하세요.

Next.js 프로젝트에 카카오톡 공유 API를 연동하는 과정에서 지속적으로 'SDK error'가 발생하여 질문드립니다. 제가 이해하고 적용한 방식이 올바른지 검토가 가능하시다면 답변 부탁드립니다.!

1. JavaScript 키 관리 방식 (.env.local)

민감한 정보인 카카오 JavaScript 키를 안전하게 관리하기 위해 .env.local 파일을 사용하고 있습니다.

Next.js 환경의 특성상, 클라이언트 사이드(브라우저)에서 해당 키를 사용해야 하므로 환경 변수 이름에 아래와 같이 저장하는 것이 올바른 방법인지 궁금합니다.

.env.local

NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY="여기에_발급받은_자바스크립트_키"

2. SDK 연동 및 초기화 과정

카카오 개발자 가이드를 참고하여 아래와 같은 순서로 SDK 연동 및 초기화를 진행했습니다.

이 과정이 올바른지 확인하고 싶습니다.

1단계: SDK 불러오기

웹 페이지에 아래 스크립트 태그를 추가하여 JavaScript SDK를 불러왔습니다. ${VERSION}과 ${INTEGRITY_VALUE}는 카카오 개발자 사이트에서 제공하는 최신 값으로 적용했습니다.

HTML

<script src="https://t1.kakaocdn.net/kakao_js_sdk/${VERSION}/kakao.min.js"
  integrity="${INTEGRITY_VALUE}" crossorigin="anonymous"></script>

2단계: SDK 초기화

불러온 SDK를 초기화하기 위해 Kakao.init() 함수를 호출했습니다. 이때, 인자 값으로 .env.local에 저장한 process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY를 사용했습니다.

JavaScript

// SDK를 초기화합니다.
Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY);

// SDK 초기화 여부를 콘솔에 출력하여 확인합니다.
console.log(Kakao.isInitialized());

전체 코드 예시

최종적으로 아래와 같은 구조로 코드를 작성하여 초기화를 시도하고 있습니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Kakao JavaScript SDK</title>
  
  <script src="https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js"
    integrity="sha384-..." crossorigin="anonymous"></script>
    
  <script>
    // 2. SDK 초기화
    // 실제로는 Next.js 환경 변수를 사용합니다.
    Kakao.init('YOUR_JAVASCRIPT_KEY'); 

    // 초기화 여부 확인
    console.log(Kakao.isInitialized());
  </script>
</head>
<body>
  ...
</body>
</html>

요약 질문하자면..

Next.js 프로젝트에서 카카오 JavaScript 키를 .env.local 파일에서 관리하는 방식이 올바른가요?
script 태그로 SDK를 로드한 후, Kakao.init() 함수에 환경 변수 값을 넣어 초기화하는 현재의 구현 방식이 정확한가요?
만약 위 과정에 문제가 없다면, 'SDK error'가 발생할 수 있는 다른 일반적인 원인(예: 카카오 개발자 사이트의 플랫폼 도메인 설정 오류, 앱 키 오타 등)은 무엇이 있을까요?

바쁘시겠지만 시간 나실 때 확인 부탁드립니다. 감사합니다!

인프런 커뮤니티 질문&답변