github.io(깃허브를 이용한 페이지)에 카카오맵 API 사용하기

이번 포스팅에서는 간단하게 카카오 API를 이용하여 웹 페이지에 카카오 맵을 띄우는 방법을 소개하겠습니다.

1. KakaoDevelopers 가입하기

카카오맵 API를 이용하기 위해서는 먼저 KakaoDevelopers에 가입해야 합니다. 따로 회원가입 페이지는 설명하지 않겠습니다… (다음이나 카카오 계정으로도 가능합니다!) 아래의 링크를 눌러 해당 홈페이지로 이동하실 수 있습니다.

카카오 개발자홈페이지 바로가기

2. 애플리케이션 추가하기

KakaoDevelopers에 로그인을 한 후 상단 메뉴에서 ‘내 애플리케이션’ 을 접속해주면 아래와 같은 화면으로 이동하게됩니다. 해당 화면에서 ‘애플리케이션 추가하기’ 를 눌러주세요!

그러면 아래의 사진처럼 애플리케이션을 추가하기 위한 팝업이 활성화됩니다.

팝업에 애플리케이션 추가를 위한 앱 이름과 사업자명을 입력해주면 됩니다. (전 개인 포트폴리용으로 사용하기위에 사진에서처럼 ‘개인 포트폴리오’ 라고 입력했습니다. 일단은 잘 작동됩니다….) 팝업에서 앱 이름과 사업자명을 입력한 후 저장해주면 카카오맵 API를 이용하기위한 두번째 준비가 끝납니다!

3.플랫폼 설정하기

애플리케이션을 추가한 후 해당 애플리케이션을 추가하면 아래와 같은 화면으로 이동하게 됩니다. (사진에서 앱키는 이미 개인적으로 등록한 상태라 보여지는겁니다!)

여기까지 진행됬다면 진짜 얼마 안남았습니다!!!

좌측메뉴에서 ‘플랫폼’ 메뉴로 접속하면 아래와 같은 화면이 나오게 됩니다.

해당 화면에서 아래의 ‘Web 플랫폼 등록’ 을 눌러주면 아래의 사진과 같이 플랫폼을 등록하기 위한 팝업이 활성화됩니다. (github.com을 이용한 페이지에서 띄우기 위함이니 Web을 사용해야겠죠…?) 해당 팝업에서 카카오맵 API를 사용할 홈페이지 주소를 입력해줍니다.

https://깃허브아이디.github.io

사진과 같이 여러분들의 깃허브 페이징 주소를 입력해줍니다!! 그다음 ‘저장’ 을 눌러주고 좌측메뉴의 ‘앱 키’ 메뉴로 넘어가면 아래의 사진처럼 ‘앱 키’ 목록이 보여집니다.

이제 발급받은 키를 이용하여 웹 페이지에 카카오 API를 사용할 수 있습니다!!!

4. 기본작성법 알아보기

마지막으로 기본적인 코드 작성법입니다.

아래의 사진과 같이 코드를 작성한 후 git에 올린 후 github repository를 페이지로 만든 주소로 접속하게 되면

카카오 맵 API가 적용된 모습을 볼 수 있습니다.

실제 지도 구동화면

-해당 작업 git repository 가기 -해당 작업 git page 가기 -카카오맵 API 가이드 가기