[Kakao] 카카오 Developers

카카오 Developers에 대한 응용법을 정리하고자 한다. 추후에 기능들을 하나하나 업데이트를 할 예정입니다.

✅ Map

여러지도가 있지만, 비용문제로 제일 접근이 쉬운 카카오맵으로 이용하기로 결정하였다. 카카오 개발자 사이트
문서 => 지도/로컬/내비게이션 => 지도를 클릭하고 => 지도 SDK웹사이트 => web을 눌러주면 아래와 같은 내용이 뜬다.

• 이제 가이드에 따라 준비한다.

  

• 총 3단계로 분류 되는데, 영역을 설정 => 지도 라이브러리 받기 => 지도를 띄우는 코드를 작성 순으로 진행해준다. 카카오 지도 가이드에 자세히설명 되어있다.

  

• 활용법은 Smple가이드도 있으니 참고하면서 작업할 수 있다. 이런 것을 보는 것이 중요한데, 이런 기능이 있는지는 알아야 나중에 프로젝트에서도 사용할 수 있기 때문이다. (Marker 표시 기능을 주로 많이 쓰는 것 같다.)

• 내가 만들 프로젝트에 해당하는 정보를 만들어준다. 실서비스를 위해서 검수를 받을 때는 앱아이콘을 넣어줘야하지만, 테스트 단계에서는 필수는 아니다. 앱이름과 사업자명은 동일하게 넣어도 된다.

  

• 위의 어플리케이션을 등록하면 키가 발행된다.

  

• 웹플랫폼을 등록해준다. 로컬에서만 사용할 예정이기때문에 다른 도메인은 등록하지 않는다. 어떤 홈페이지에서 요청을 하는지 사용 횟수를 세고, 요금을 부과하기 위해서 등록한다고 한다.

  

• 카카오는 script로 다운로드 받게되면, window에 다운 받아지게 된다. 그래서 typescript에서는 window안에 kakao라는 것이 존재하는지 모르기때문에, declare로 선언을 해준다.

• 나중에 Local로 받은 위경도 값을 적용해 주는데 문제가 발생한다. 위도(latitude): X축, 경도(longitude): Y축으로 생각하고 있었는데, X 좌표값 혹은 longitude String, Y 좌표값 혹은 latitude String 반대로 해놔서, 쓸 때마다 뭔가 움찔움찔한다.

  

• 방법 app.tsx자체에서 다운로드 받게 한다. (좋은 방법은 아님) 전체적인 페이지를 느리게 만들 수 있다. 그래서 선택한 방법은 Docs에서 load에 대한 적용법이다.

  

---

✅ Daum Postcode

주소를 검색한 값을 KakaoMap과 연결하기 위하여, react-daum-postcode를 이용하기로 했다. 단일 검색 기능으로는 많이 사용해봤는데, 지금은 결과값을 KakaoLocal로 보내 경도와 위도를 구하고, 그 값을 KakaoMap으로 표현하려고 한다. 한 번에 3개의 값을 셋팅 해야하는 과정에서 Daum Postcode는 따로 컴포넌트로 분리를 해놓았다.

• 우선을 사용법을 알아야 하기 때문에, 홈페이지로 접속해 보기로 한다.
  Daum Postcode git Home

• 방식은 Embed와 Popup방식으로 나누어져 있다. Popup방식이 따로 모달창이 필요하지 않아 선택하였지만, Embed방식도 있다는 것을 알아두고 활용해보자. 아래와 같이 적용해주면 된다.

  import React from 'react';
  import { useDaumPostcodePopup } from 'react-daum-postcode';
  
  const Postcode = () => {
    const open = useDaumPostcodePopup(scriptUrl);
  
   const handleComplete = (data) => {
      let fullAddress = data.address;
      let extraAddress = '';
  
      if (data.addressType === 'R') {
        if (data.bname !== '') {
          extraAddress += data.bname;
        }
        if (data.buildingName !== '') {
          extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
        }
        fullAddress += extraAddress !== '' ? ` (${extraAddress})` : '';
      }
  
      console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
    };
  
    const handleClick = () => {
      open({ onComplete: handleComplete });
    };
  
    return (
      <button type='button' onClick={handleClick}>
        Open
      </button>
    );
  };

• 어떤 값을 넣느냐에 따라 구성을 다르게 할 수 있는데, handleComplete만 주로 사용하는 것 같다.

  

• 검색하고 유저가 선택을 하게 되면, handleComplete에 data값으로 넘어오게 되는데, data.address값을 KakaoLocal에 넘겨준다. typescript를 사용할 경우 import type { Address } from "react-daum-postcode"; 이런식으로 타입을 제공해주기때문에, 적용해주자. 아래와 같이 넘겨주면 된다.

  const handleComplete = (data: Address) => {
      const config = {
        headers: {
          Authorization: `KakaoAK ${process.env.NEXT_PUBLIC_KAKAO_RESTAPI}`,
        },
      }; // 헤더 설정
      const url = `https://dapi.kakao.com/v2/local/search/address.json?query=${data.address}`; // REST API url에 data.address값 전송
      axios.get(url, config).then(function (result) {

---

✅ Local

위의 Daum Map은 javascript key를 사용하였다면, Local은 RESTAPI key를 사용해 주어야한다. 따로 테스트하는 곳이 있으니 필요하다면 Kakaodevelopers에서 테스트 해주기로 한다.

• 메서드에는 기본값으로 JSON값이 들어가게 되고 쿼리파라미터로 원하는 값을 세팅해줄 수 있는데 query값에 주소를 넣어주도록 하자.

  

• 헤더세팅 Kakao developers에서 발급 받은 RESTAPI key가 헤더에 세팅 되도록 한다.

  

• 필요한 값을 받아 KakaoMap에 세팅

  

• 결과 값으로는 Document가 오게 되는데, address(지번주소 상세정보)와 road_address(도로명 주소 상세정보)가 있으니, 나중에 활용하면 좋을 것 같다. X 좌표값에는 경도(longitude), Y좌표값에는 위도(latitude)가 들어가니 헷갈리지 않게 값을 잘 넣어주어야 지도에서 이상한 값이 뜨지 않는다.