Kakao 지도 API

리팩토링을 한다면 꼭 추가하고 싶었던 기능중 하나가 지도 였다,,,ㅎㅎㅎ

처음 프로젝트를 기획할때도 지도를 활용한 기능을 만들고 싶어 지도와 관련된 의견을 많이 내기도 했지만 아쉽게도 시간부족으로 못해봤다,,,

그래도 리팩토링때는 꼭 해보자 라는 생각으로 도전을 해보았다.

간단한 설명을 해보자면 magazine페이지를 들어가 detail을 들어가면 원래는 아래처럼 하단에 아무것도 없어서 너무 허전했는데 이 위치에 해당 카페의 위치를 표시하면 좋을거같아 기획했다.

처음 알아봤을때 js 방법만 있어서 이것 저것 찾아보다가 리액트에 맞에 사용할수있는 라이브러리를 발견했다.

React-Kakao-Maps-sdk

사용방법

1. 설치

npm install react-kakao-maps-sdk

2. Script 태그 추가

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은키"></script>

kakao developers
카카오 개발자 사이트에 회원가입후 발급받은 키를 위에 위치에 넣어주고 최상단 html head부분에 넣어주면 된다.

API키를 발급 받는 방법은 아래 사이트에서 참고했습니다.

tpgus758.log님의 벨로그

3. Map 생성하기

import { Map, MapMarker } from 'react-kakao-maps-sdk';
import PropTypes from 'prop-types';

Location.propTypes = {
  data: PropTypes.shape({
    extra: PropTypes.shape({
      coordinates: PropTypes.shape({
        lat: PropTypes.number.isRequired,
        lng: PropTypes.number.isRequired,
      }),
      address: PropTypes.string,
    }),
  }),
};

function Location({ data }) {
  if (!data || !data.extra || !data.extra.coordinates) {
    return null;
  }

  const { lat, lng } = data.extra.coordinates;
  return (
    <>
      <Map className="map"                           
    	center={{ lat, lng }} 						// 지도의 중심 좌표
  		style={{ width: '100%', height: '400px' }} 	// 지도 크기
        level={1}>									// 지도 확대 레벨
        <MapMarker position={{ lat, lng }}></MapMarker> // 지도의 마커 좌표
      </Map>
    </>
  );
}

export default Location;

내가 했던 방법은 Location 컴포넌트를 하나 생성해서 DB의 있는 좌표 데이터 값을 불러온다음 위도와 경도를 카페 위치에 맞게 설정해두었다.

4. Map 컨트롤러

3번으로 지도 뿌리는 방법을 끝내도 괜찮지만 내가 평소 블로그나 사이트를 돌아다니면서 봤던 지도보다 뭔가 허전하다는 느낌을 받았다.

결국 서치 해보면서 찾아본 결과 '지도'만 띄어 있어서 허전했던것이다 내가 평소 봤던 지도는 줌인 아웃 같은 지도를 확대하거나 줄이는 컨트롤러가 있는데 그런 부가적인 컨트롤들도 내가 직접 설정해서 올려줘야 하는것이다....

개발을 하면서 기본이 내가 알고 있는 기본적인것들이랑 많이 다르다고 느끼는것 같다...쨋든 서론이 길어졌지만
컨트롤러를 올리려 찾아본 결과 아래 사이트에 상세하게 나와 있어 구현하는데 크게 어려움을 느끼지 않았다.

kakaomap sample

5. 완성

위 사진 처럼 해당 magazine리스트에서 detail로 들어가면 본문이 끝난 맨 마지막 시점에 해당 게시물 카페의 위치를 표시하게 구현했다.

이것 저것 알아보면서 하느라 쉬운 라이브러리를 써도 구현하는데 하루를 썻다,, 그래도 공용API를 써보고 하고싶었던 기능을 구현했다는 성취감 덕분에 아쉬움은 없던것같다~ :)

🔗참고 사이트

📍wlwl99.log님의 벨로그
📍Hnev.log님의 블로그