- 문서>
- JavaScript>
- 시작하기
JavaScript
시작하기
이 문서는 카카오디벨로퍼스에서 제공하는 JavaScript SDK(Kakao SDK for JavaScript) 사용 방법을 안내합니다.
준비
지원하는 웹 브라우저
JavaScript SDK는 가장 많이 사용되는 웹 브라우저를 지원합니다. 플랫폼별 지원하는 웹 브라우저와 버전 정보는 아래와 같습니다.
| 브라우저 | Android | iOS | macOS | Windows |
|---|---|---|---|---|
| Chrome* | O | O | O | O |
| Edge* | O | O | O | O |
| Firefox* | O | O | O | O |
| Safari | X | O | O | X |
| Internet Explorer (IE) | X | X | X | O** |
* Chrome, Edge, Firefox의 경우, 최신 및 직전 버전에 최적화되어 있음
** IE 11만 지원
플랫폼
JavaScript SDK로 카카오 API를 호출하려면 앱 관리 페이지의 [앱] > [플랫폼 키] > [JavaScript 키] > [JavaScript SDK 도메인]에 도메인을 등록해야 합니다. JavaScript 키를 참고합니다.
데모
카카오디벨로퍼스는 JS SDK의 주요 기능을 빠르게 확인할 수 있는 JS SDK 데모 페이지를 제공합니다. 데모 페이지에서 카카오 로그인, 카카오톡 공유 등 SDK 기능을 직접 테스트하고, 구현 예제 코드를 확인할 수 있습니다.
설치
JavaScript SDK 파일을 웹 페이지에 포함(Include)시킵니다. script 태그 내부에 버전과 해당 버전의 integrity 값을 정확히 기입해야 합니다. 다운로드에서 확인 및 복사할 수 있습니다. 아래 예제를 참고합니다.
<script src="/?originalUrl=https%3A%2F%2Fdevelopers.kakao.com%2F%26quot%3Bhttps%3A%2F%2Ft1.kakaocdn.net%2Fkakao_js_sdk%2F%24%257BVERSION%257D%2Fkakao.min.js%26quot%3B%2520%2520integrity%3D%26quot%3B%24%257BINTEGRITY_VALUE%257D%26quot%3B%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode">초기화
설치를 참고해 JavaScript SDK를 웹 페이지에 포함한 후, 아래의 JavaScript SDK 초기화 함수를 호출합니다. JAVASCRIPT_KEY에 앱 관리 페이지의 [앱] > [플랫폼 키] > [JavaScript 키]에서 확인한 JavaScript 키를 할당해야 합니다.
Kakao.init('JAVASCRIPT_KEY');
Kakao.isInitialized();
아래는 초기화 함수를 호출하고, 이어서 초기화가 잘 되었는지 확인하는 함수를 호출하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kakao JavaScript SDK</title>
<script src="/?originalUrl=https%3A%2F%2Fdevelopers.kakao.com%2F%26quot%3Bhttps%3A%2F%2Ft1.kakaocdn.net%2Fkakao_js_sdk%2F%24%257BVERSION%257D%2Fkakao.min.js%26quot%3B%2520%2520%2520%2520integrity%3D%26quot%3B%24%257BINTEGRITY_VALUE%257D%26quot%3B%2520crossorigin%3D%26quot%3Banonymous%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%26gt%3B%2520%2520%2520%2520%2F%2F%2520SDK%25EB%25A5%25BC%2520%25EC%25B4%2588%25EA%25B8%25B0%25ED%2599%2594%2520%25ED%2595%25A9%25EB%258B%2588%25EB%258B%25A4.%2520%25EC%2582%25AC%25EC%259A%25A9%25ED%2595%25A0%2520%25EC%2595%25B1%25EC%259D%2598%2520JavaScript%2520%25ED%2582%25A4%25EB%25A5%25BC%2520%25EC%2584%25A4%25EC%25A0%2595%25ED%2595%25B4%25EC%2595%25BC%2520%25ED%2595%25A9%25EB%258B%2588%25EB%258B%25A4.%2520%2520%2520%2520Kakao.init(%26%2339%3BJAVASCRIPT_KEY%26%2339%3B)%3B%2520%2520%2520%2520%2F%2F%2520SDK%2520%25EC%25B4%2588%25EA%25B8%25B0%25ED%2599%2594%2520%25EC%2597%25AC%25EB%25B6%2580%25EB%25A5%25BC%2520%25ED%258C%2590%25EB%258B%25A8%25ED%2595%25A9%25EB%258B%2588%25EB%258B%25A4.%2520%2520%2520%2520console.log(Kakao.isInitialized())%3B%2520%2520%26lt%3B%2Fscript%26gt%3B%26lt%3B%2Fhead%26gt%3B%26lt%3Bbody%26gt%3B%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">