API 실습 : 오픈 API 활용 예제
* 이 글은 API의 개념과 속성, 구성요소에 대한 설명은 다루고 있지 않습니다.
API의 개념은 익혔지만 조금 막연하게 느껴지는 부분이 있어 실제로 코드를 몇 줄이라도 작성해 보는 게 도움이 될 것 같아 간단한 예제를 만들어보았다. Open API는 구글 대신 카카오를 이용했다. (https://developers.kakao.com/) 카카오뿐만이 아니라 구글과 네이버 개발자 센터에서도 오픈형 api를 무료로 제공하고 있다. API별로 일 할당량의 제한은 있을 수 있으니 참고할 것.
(https://cloud.google.com/endpoints/docs/openapi/openapi-overview?hl=ko)
(https://developers.naver.com/docs/common/openapiguide/)
1. 카카오맵 API 적용해보기
우선 카카오맵의 경우, 별도의 ajax 이용 없이도(JSON 형식의 데이터를 ajax를 활용해 가져오는 방식) 구현이 가능해서 생활코딩을 보고 만들었던 홈페이지에 삽입해 보기로 했다. 카카오는 웹용 API를 공개해 하루 할당량 이내에서 무료로 사용할 수 있도록 제공하고 있다. 1일 300,000회까지는 접근이 가능하다.
앞서, 카카오의 open api는 카카오디벨로퍼스에서 개발자 등록을 마치고 키 발급을 받아야 사용할 수 있다. 개발자 등록은 누구나 가능하며 사이트 도메인(localhost를 이용한다면 포트 주소)만 정확히 입력해주면 API를 불러오는 데 큰 문제는 발생되지 않는다.
https://apis.map.kakao.com/web/guide/카카오맵 지도 코드 한눈에 보기. 위와 같은 코드를 적용하면 500x400 사이즈의 지도가 웹 상에 삽입된다. 우선 전 세계의 리모트 워커들이 정보를 주고받을 수 있는 커뮤니티성 웹을 만들고 싶었는데, 하단에 오프라인 커뮤니티 시설을 지도로 마크하여 표시할 수 있으면 좋겠다는 생각이 들었다.
위와 같이 입력을 하고 스크립트를 닫아준 뒤 실행해도 지도는 발생되지만, 마커로 커뮤니티 센터의 위치를 표시하고 싶었기 때문에 추가적인 정보가 필요했다. 다행히 샘플로 들어가니 다양한 오버레이와 로드뷰를 제공하고 있었다. 카카오 최고.
콘솔을 통해 즉시 결과를 확인할 수 있는 테스트 도구도 제공하고 있어 편리하다. 나는 제주도가 아니라 이태원 일대 또는 한남동 어딘가로 위치를 표시하고 싶었고 좌표는 직접 찾아야 했다. 다행히 좌표는 구글 맵을 통해서 찾을 수 있었는데, 구글맵에 위치를 검색하면 좌표도 함께 생성이 된다. 해당 좌표를 카피해서 코드상 좌표에 해당하는 부분에 붙여 넣으면 끝. 마커 이미지의 경우 변경이 가능한데, 해당 코드를 그대로 사용한다면 카카오맵에서 디폴트로 제공하는 별 모양 마커로 장소가 표시된다.
결과물.html
2. 카카오맵 책 검색 API
우선 내가 만들고 싶은 서비스는 '책장(가제)'이라는 독서 기록 서비스였다. 실제로 비슷한 서비스가 있을 가능성이 99.99%이고 예제를 위해 만든 것이니 흐린 눈 부탁드립니다. 대충 콘셉트는 이렇다. 텅 비어있는 책장으로 시작해서, 사용자가 읽은 책을 추가하면 책장이 서서히 책으로 채워지기 시작하는. 사용자의 슬기로운 독서생활을 위한 서비스라고 생각해 주시면 될 듯하다.
https://api.jquery.com/jquery.ajax/카카오 디벨로퍼스에서는 검색 API를 JSON 형식으로만 제공하고 있는데, 이를 활용하기 위해서는 자바스크립트의 라이브러리인 jQuery의 힘을 빌려야 한다. 이 jQuery를 사용하기 위해서 제이쿼리 스크립트를 불러오면 되는데, 공식 사이트에서 제공하고 있는 CDN 스크립트 태그를(구글에 jquery cdn이라고 검색하면 가장 먼저 뜨는 창) <body> 태그 안에 include 해 주면 된다. 그리고 jQuery의 ajax 예제를 찾아 다시 구글에 검색하면 역시나 사이트가 뜨는데 그중에서 example을 참조하면 코드를 확인할 수 있다.
Conclusion
Open API 실습을 통해 http method의 개념과 REST API의 특징, jQuery 라이브러리의 활용 방법을 어느 정도 이해할 수 있었다. 또한 CDN을 이용함으로써, 굳이 파일을 다운로드하지 않고도 jQuery 라이브러리를 간편하게 호출할 수 있다는 점 역시도 확인할 수 있었다.
