Kakao API로 위치 기반 서비스 로직을 만들어볼까?

1. Kakao api를 사용하는 방법 2가지

Kakao API를 사용해서 위치정보를 가져오려면 방법을 2가지를 선택할 수가 있습니다.

SDK를 활용한 Kakao API : Kakao에서 제공하는 maps SDK를 script로 웹에서 다운로드 한 다음에 Kakao 객체에 접근해서 데이터를 받아오는 방식

Local API를 활용한 Kakao API : Kakao에 RESTful API 호출 방식을 사용해서 fetch or Axios를 사용해서 요청을 보내 데이터를 받아오는 방식

두 가지 방법 모두 장단점이 있는 방식이라고 생각합니다. SDK를 활용하는 방법은 초기에 SDK를 다운로드 받을떄 시간이 오래 걸리지만 후에 다운로드받은 객체를 활용해서 더 좋은 성능을 발휘할 수가 있으며 실제 지도를 보여주는 기능이 구현되어있습니다.

Local API의 경우 지도기능을 사용하지 못하지만 주소, 위치 등등의 정보만을 활용할 때 유용하며 필요할떄만 요청을 보내기 때문에 애플리케이션의 성향에 따라서 유용할 수도 별로일 수도 있습니다.

두 가지 방법 모두 구현해보는 과정을 알아보겠습니다.

2. SDK를 활용한 Kakao API 사용 방법

2-1. SDK 다운로드하기

2-1-1. kakao developers 사이트에서 해줘야할 설정

카카오 맵 api 사이트 url

우선 위 URL로 이동 후 SDK 다운로드를 위해 애플리케이션을 등록해야 하는데요 우선 우상단의 APP KEY 발급을 눌러서 로그인을 해줘야 합니다. 회원가입은 건너뛰도록 할게요

그 후 애플리케이션 추가하기 버튼을 누르면

애플리케이션 추가하기 👇

이러한 애플리케이션 정보를 입력하라는 모달창이 그려지게 되는데 임의의 이름, 사업자명을 작성해주시면 됩니다.

그렇게 되면 APP이 하나 구현이 되어있는데 해당 APP에 이동하게 되면

애플리케이션 정보 👇

이렇게 애플리케이션 이름과 ID 정보가 최상단이 표시되어있으며 앱키 정보가 나와 있습니다. 저희는 JavaScript 키를 활용해야 합니다.

그 후에 최상단 왼쪽에 햄버거 아이콘을 클릭해서 side menu 창을 열어서 플랫폼 탭으로 이동합니다. 이 페이지에서 맨 아래로 내려가면 Web이라는 파트가 존재하는데 해당 파트에 사이트 도메인을 입력해야 합니다.

보통 개발환경, 배포환경의 URL을 입력하면 되는데요. 입력하지 않을 시에 SDK 다운로드 시 에러가 발생합니다.

저는 개발환경에 사용할 URL만 입력을 해주겠습니다.

입력된 사이트 도메인 👇

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다&autoload=true&libraries=services"
></script>

2-2. 주변 동네정보 가져오기

저는 현재 JJAN이라는 동네 술친구 프로젝트에 참여 중입니다.

그 프로젝트에서 사용자한테 위도, 경도를 받은 다음에 사용자의 위도, 경도를 바탕으로 사용자의 현재동, 주변동을 가져오는 로직을 작성 중에 있습니다.

위도, 경도를 받아오는 로직은 건너뛰겠습니다. (navigator.geolocation 사용하면 됨)

위 URL로 접속을 하시면 kakao map api를 사용하는 방법에 대해 자세히 설명이 되어있습니다.

저는 여기서 Library/services.Places 부분을 사용할 예정입니다. (side bar에서 찾아보세요)

아까 스크립트에 libraries=services를 추가한 이유가 여기서 드러납니다...

Library/services.Places 아래에 보시면 keywordSearch라는 메서드가 존재하는데 해당 메서드는 입력받은 키워드로 주소 정보를 가져옵니다.

간단하게 키워드, 옵션을 매개변수로 전달해주면 callback 함수를 실행해주는데 해당 callback 함수의 첫 번째 매개변수가 키워드의 주소정보를 객체로 저희한테 제공합니다.

키워드를 동사무소로 전달하게 되면 모든 동사무소 주소를 알 수가 있는 겁니다!!

여기서 옵션을 설정해야 하는데 저는 3개 정도의 옵션을 전달할 예정입니다.

const SEARCH_KEYWORD = "동사무소";

const options = {
  x: longitude,
  y: latitude,
  radius: 4000, // 반경 4km
};

이제 Places를 사용해 인스턴스를 만들어줍니다.

const places = new window.kakao.maps.services.Places();

typescript를 사용할 경우 window의 Kakao 객체 type을 먼저 설정해주셔야 합니다.

그 후에 keywordSearch메서드를 실행하면 됩니다.

const SEARCH_KEYWORD = "동사무소";

const options = {
  x: longitude,
  y: latitude,
  radius: 4000, // 반경 4km
};

var callback = function (result, status) {
  if (status === kakao.maps.services.Status.OK) {
    console.log(result);
  }
};

places.keywordSearch(SEARCH_KEYWORD, callback, options);

result에는 해당 위도, 경도의 반경 4km 주위에 동사무소 주소가 존재하게됩니다.

이로써 저는 현재동, 주변동 정보를 모두 가져올 수 있게 되는 것이죠!

3. Local API를 활용한 Kakao API 사용 방법

Local API를 활용한 Kakao API 사용을 하게 되면 script를 사용해 SDK를 다운로드할 필요가 없이 그냥 RESTful API 요청만 보내면 됩니다.

위 URL에는 Local API 요청을 보내는 방법이 상세하게 나와 있습니다. 저는 여기서 키워드로 장소 검색하기 탭으로 이동하겠습니다.

키워드로 장소 검색하기 👇

이런 식으로 해당 요청의 정보들을 알려주는데 여기서 밑의 요청 탭으로 이동하시면 요청할떄 꼭 필요한 데이터가 존재합니다.

Authorization, query 이렇게 2개는 꼭 필요한 데이터입니다.

또한 SDK와 똑같은 옵션을 보낼 수가 있습니다. x, y, radius, size, sort 등등...

이외에도 다양한 옵션을 설정할 수가 있으니 둘러보시는 것을 추천합니다.

const x = 127.123456; // 중심 좌표의 경도
const y = 37.123456; // 중심 좌표의 위도
const size = 10; // 한 페이지에 출력할 결과 수 (1 ~ 15)
const radius = 4000; // 검색 반경 (단위: 미터)
const query = "동사무소";

const apiUrl = `https://dapi.kakao.com/v2/local/search/keyword.json?x=${x}&y=${y}&size=${size}&radius=${radius}&=${query}`;

const options = {
  headers: {
    Authorization: "KakaoAK {APP KEY}", // 발급받은 API 키로 대체해야 합니다.
  },
  method: "GET",
  mode: "cors",
  cache: "no-cache",
};

fetch(apiUrl, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

옵션을 쿼리 파라미터로 전달하고 헤더의 Authorization에 APP KEY를 삽입 후 요청을 보내는 거죠 search/keyword.json 라고 설정하면 JSON 형식의 파일을 받아오게 됩니다. search/keyword.XML 라고 설정하면 XML 파일을 받아오게 됩니다.

이렇게 SDK, Local API 2가지 방식을 살펴보았습니다. 감사합니다 ^.^