[React] Kakao Map API 사용하기 (1)

https://developers.kakao.com/product/map

프로젝트를 진행하는 중 지도 API를 활용해야 할 일이 있어 Kakao Map API를 사용하여 구현하였습니다.
Kakao Map API에는 유용한 기능들이 많아 기능들에 대해 정리해 보았습니다.

 

※ 개발 환경

• vscode
• typescript
• react

 

Kakoa Map API 사용하기

React에서 Kakao Map API를 사용하기 위해서는 먼저 Kakao developers에 애플리케이션을 등록해주어야 합니다.

Kakao Developers

 

1. 홈페이지에 들어가 우측 상단에 내애플리케이션을 클릭해 줍니다.

  2. 애플리케이션 추가하기를 클릭해 줍니다.

  3. 애플리케이션에 맞는 정보를 입력해 줍니다.

 

  4. 등록을 완료하였으면 등록된 애플리케이션을 클릭해 주고 좌측 메뉴에서 플랫폼을 클릭해 줍니다.

 

  5-1. 사용할 플랫폼을 등록해 줍니다. 저는 react환경에서 진행할 예정이기에 Web 플랫폼을 등록해 주었습니다.

         사용자 도메인에는 API를 사용할 실제 주소를 입력해 주시면 됩니다.

         저는 로컬에서 진행했기에 http://localhost:3000을 입력해 주었습니다.

   5-2. 정상적으로 플랫폼 등록이 완료되었으면 아래 사진과 같이 등록된 도메인이 보입니다.

 

  6. 이제 기본적인 API 설정을 모두 완료되었고 직접 코드를 통해 지도를 구현해 주면 됩니다.

      구현 과정은 Kakao Map API 공식문서를 참고하여 구현하였습니다.

      (https://apis.map.kakao.com/web/guide/)

       먼저, 지도를 띄우기 위해서는 지도를 담을 영역이 필요하기에 영역을 만들어 주는 작업을 하였습니다.

 

  7. 다음으로 지도 API를 불러오기 위해 Javascript API를 등록해주어야 합니다. 

      Javascript API Key는 Kakao develop 홈페이지에서 확인 가능합니다.

    홈페이지에서 키를 확인하여 index.html에 등록해 주면 됩니다.

 

  8. 이제 키를 등록해 주었으면 지도를 띄우는 코드를 작성해 주어야 합니다.

      이전에 만들어 두었던 지도 컴포넌트에 들어가 코드를 작성해 주면 됩니다.

     공식 문서에 작성되어 있는 스켈레톤 코드를 참고하여 작성해 주었습니다. 

     옵션 값은 상황에 맞게 설정해 주면 됩니다.

     지도를 생성하는 부분을 useEffect로 등록해 주어야 정상적으로 지도를 렌더링 할 수 있습니다.

  9. 이제 모든 설정이 끝났습니다. 리액트 앱을 실행해 지도를 정상적으로 불러오는지 확인하면 됩니다~!

 

포스팅을 마치며

이번 포스트에서는 Kakao Map API를 등록하고 지도를 띄우는 과정까지 해보았습니다. 다음 포스트에서는 등록한 지도에 marker를 등록하는 포스트를 작성해보고자 합니다~!