[React] 카카오맵 지도 라이브러리 사용방법

 

프로젝트의 특성상 지도가 꼭 필요한데 우리는 카카오맵 지도를 사용하기로 했다.

상세페이지를 담당하고 있어서 이 부분은 내가 담당하기로 했다.

 

처음에는 카카오맵 지도 API를 호출해서 사용하려고 했는데 샘플 예제가 모두 JS로 구현이 되어 있었다.

이걸 어떻게 리액트로 바꿔야하나 블로그를 많이 찾아보던 중 카카오맵 예제랑 거의 비슷하고 좀 더 리액트스럽게 바꿔놓은 라이브러리가 있었다!

 

이걸 사용해도 되나 팀원들이랑 고민을 하다가 팀원들 중 라이브러리를 사용해본 분이 안계셔서 코치님께 조언을 구하기로 했다.

코치님께서는 API로 불러올 때나 라이브러리를 다운을 받나 용량은 비슷할 것같고, 다른 팀들은 API를 불러서 사용을 하니 라이브러리를 사용해보는게 어떻겠냐는 조언을 들었고, 두개의 선택지가 있으면 당연히 리액트스럽게 바꾼 라이브러리가 낫다! 라고 하셔서 라이브러리를 설치하고 사용했다.

 

 

 

yarn add -d react-kakao-maps-sdk

 

사용 방법은 너무 간단했다.

 

https://developers.kakao.com/

Kakao Developers

카카오톡 개발자 사이트에 들어가 로그인을 한다.

 

 

그리고 애플리케이션을 추가한다.

플랫폼 등록

그리고 플랫폼까지 등록해야한다. 우리가 쓰는 프로젝트 도메인은 http://localhost:5173이다. 뒤에 /를 붙이면 안되니까 꼭 빼고 등록해야 한다.

그리고 필요한건 Javascipt 키이다. 이 주소를 복사해서 .env파일에 넣어준다.

 

<script
  type="text/javascript"
  src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_APP_KAKAO_MAP_KEY%&libraries=services,clusterer"
></script>

index.html에 가서 스크립트 파일을 작성해주면 세팅은 끝난다.

너무 쉽고 간편했다.

좀 헤맸던 부분이 있다면 블로그에서는 %REACT_APP_KAKAO_MAP_KEY% 이렇게 되어 있어서 적용을 했더니 내가 하고 있는 프로젝트는 VITE라서 적용이 안되는 것이었다.. 그래서 찾아보다가 VITE로 바꾸기면 하면된다고 해서 바꿔보니 잘 적용이 되었다.

 

예제를 보고 필요한 기능에 맞는 코드를 그냥 복사해서 붙여넣기만 하면 된다. 우리가 필요한 기능은 지도에 1, 2, 3번 순서대로 핑을 찍어줘야 하는데 커스텀이 가능하면서도 상세페지로 이동도 가능한 방법을 찾다가 다행히 좋은 방법을 찾았다.

 

바로 이 기능을 이용했는데 마크 자체가 커스텀이 가능해서 스타일을 모두 지우고 직접 핑 이미지를 만들고 적용했다.

저작권 이슈가 생기지 않고록 픽사베이 이미지에서 marker를 검색해서 가져오고 색만 우리 주조색으로 변경하였고 가운데 숫자가 들어갈 하얀색 원만 넣어주었다. 그리고 무료 이미지 호스팅 사이트에 이미지를 등록하여 주소로 사용해 주었다.

https://ifh.cc/

iFH 이미지 호스팅

<MapMarker
        position={{ lat: 37.54699, lng: 127.09598 }}
        image={{
          // 마커이미지 주소
          src: 'https://ifh.cc/g/vGy0l6.png',
          size: {
            width: 45,
            height: 53,
          }, // 마커이미지의 크기
          options: {
            offset: {
              x: 27,
              y: 69,
            }, // 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정
          },
        }}
/>

<CustomOverlayMap position={{ lat: 37.54699, lng: 127.09598 }} yAnchor={1} className="relative">
        <div>
          <a href="https://map.kakao.com/link/map/11394059" target="_blank" rel="noreferrer">
            <div className="w-[45px] h-[53px] flex justify-center items-center ml-[-9px] mt-[-75px]">
              <span className="text-[20px] text-white">1</span>
            </div>
          </a>
        </div>
</CustomOverlayMap>

이렇게 완성을 시켰는데 하나 이슈가 생겼는데 첫번째 핑을 확인하고 다음 핑이 어디있는지 요리조리 찾아야 한다. 사용자 입장에서 번거롭고 거리가 멀면 찾기 힘들어서 라인을 연결해야겠다고 생각해서 열심히 찾아봤는데 Polyline을 사용하면 쉽게 해결이 된다!

 

<Polyline
        path={[
          [
            { lat: 37.54699, lng: 127.09598 },
            { lat: 37.55155166956004, lng: 127.08359680098087 },
          ],
        ]}
        strokeWeight={5} // 선의 두께 입니다
        strokeColor={'#FB6363'} // 선의 색깔입니다
        strokeOpacity={1} // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
        strokeStyle={'dashed'} // 선의 스타일입니다
/>

이렇게 추가해주었더니

원하는 기능을 무사히 구현했다!

처음 해보는 부분인데 내가 원하는대로 결과물이 잘 나와서 좋았고 어려운 부분을 팀원과 상의하니까 더 빠르고 좋은 결과물이 나온것 같다. 내가 가진 고민을 팀원분께 말씀드렸을 때 본인의 고민처럼 의견도 많이 내주시고 해결점을 같이 생각해줘서 너무 감사하고 협업의 순기능이라고 느끼고 의견을 듣는 과정에서 커뮤니케이션 방법이나 기술, 아이디어 등을 많이 배워간다.

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript