카카오맵 구현기(1): 카카오맵 표현부터

윤뿔소·2023년 2월 7일
4

팀 프로젝트: 맛피

목록 보기
2/8

뭐 쓸거야?

기획안에서 봤듯이 맛집 지도 그리기 웹 앱을 만들 것이라 당연히 지도앱이 필요하다. 지도앱에 관련한 오픈 API들은 많다. 구글, 네이버, 카카오 등등이 있는데 그 중 카카오를 고른 이유는

  1. 규격화된 공식문서
    네이버도 있고 구글도 있지만 카카오는 문서 상 친절함이 곱절이었다.
  2. 국내 맛집 한정
    타겟층이 국내 한정이니 국내에서 친근하게 쓰이는 네이버 카카오 2가지를 꼽았다.
  3. 사용 빈도수 최다
    구글링을 해보니 네이버는 기업에서 많이들 썼고, 프로젝트에서는 카카오를 많이 쓰는 경향이 있었다. 카카오가 러닝커브가 비교적 낮고, 구글링 기록들도 많았다.

그러한 이유들로 카카오맵을 선택하게 됐다.
심지어 네이버는 들어가보니 이렇더라..

어떻게 쓸거야?

카카오 API는 무궁무진하다! 로그인부터 검색, 장소 검색, 심지어 맵 앱까지 다양하다. 카카오 로그인은 백엔드 쪽에서 구현한다고 했어서 뺐고, 카카오맵 API를 호출해 가져오기로 했다. 장소도 카카오 API 검색을 통해서 가져오기로 했다.

기획안을 통해서 카카오맵에 대한 기능은 다음과 같다.

  1. 드래그로 지도를 볼 수 있는 맵
  2. 검색한 맛집 정보를 볼 수 있는 페이지 '맛플레이스 디테일 페이지'로 넘어가면 맵 이동 후 마커 찍히기
  3. 검색한 데이터에 관련한 맛집 데이터의 좌표에 마커 찍기
  4. 로그인하면 자신이 맛집을 픽한 그룹, '맛 픽커'의 마커들이 찍히기

이런 기능을 모두 구현해야했고, 이 파트는 내 담당이었다.

카카오맵 API 호출하기

23/01/10
기획도 끝났고, 구현하고픈 기능 목록도 끝났으니 개발자를 위한 카카오데브 사이트로 넘어가 API 키를 호출 받고, 넣어서 했다. 기본적으로 하루 30만회 호출이 무료로 가능하니 꿀이다!
기본적인 언어는 바닐라 JS로 DOM을 건드리며 구현한다. 사용법은 공식문서에 있으니 참고하자. 좀 옛 문서로 쓰였다. 라이브러리 없이 바닐라고, 선언자도 var로 쓰여져 있다.

방법

딱 3가지만 필요하다. HTML에 쓸 자신의 API 키, 허용 도메인 추가, 호출 코드.

  1. HTML
    1-1. 먼저 카카오데브 사이트로 넘어가 자신의 API 발급받기, 난 Web으로 했다.
    1-2. index.html파일에 카카오맵 전용 script 코드를 작성한다.
    <script
         type="text/javascript"
         src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_API_KEY%&libraries=services,clusterer,drawing"
       ></script>
    env파일에 내 API 키를 넣고 뒤에는 libraries가 들어가 있는데 자신이 사용할 옵션을 선택하여 작성한다. 다 공식문서에 있다.
  2. 허용할 도메인을 선택하여 작성하여 추가해준다.
  3. 공식 문서에 쓰인대로 바닐라 JS로 카카오맵을 표현한다.
import { useEffect } from "react";

const KakaoMap = () => {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(37.50223030670322, 127.02695571276281), 
      level: 3,
    };

    const map = new window.kakao.maps.Map(container, options);
  }, []);

  return <div id="map" style={{ width: "100vw", height: "100vh" }} />;
};

export default KakaoMap;

이런 식으로 말이다! 일단 마커를 구현하는 것은 뒤로 미뤘다. 필수 페이지 및 컴포넌트를 먼저 만들고 백엔드 관련 API가 오면 리스트로 줘서 검색, 맛픽커 마커를 따로 만들겠다!
참고로 맛픽커는 기획기에 있다. 맛플레이스를 픽할 수 있는 기능이고, 픽하면 관련 목록의 마커가 렌더링되는 구현 목표가 있다.

멘토링을 받으며 지적을 받았다!

23/01/13
멘토링하며 검사를 받았었는데, 멘토님이 한가지 문제점을 제시했다.
아까 봤다싶이 공식문서에는 바닐라 JS의 DOM으로 작성되어있는데 프로젝트에는 리액트+TS이다보니 언어 통일성이 떨어지고, 무엇보다 '바닐라 JS DOM의 안좋은 사용성을 굳이 사용해야하나?' 하고 의문을 받았다.

나도 동감을 하는 부분이었다. 바닐라 DOM이 사용성이 안좋고 통일이 되어있지 않다면 나중에 관리/보수 측면에서 안좋은 영향을 끼칠 것이고, 다른 개발자가 봤을 때 소통에 차질이 생길 것이고, 기술적으로 회귀하는데 큰 이점도 없으니까. 또한

즉, '긁어 부스럼 만들 일을 좀 줄이자'였다. 그래서 리팩토링 하기로 결심했다!

결국 나는 공식문서를 토대로 리팩토링을 진행하겠다고 했다.. 해봐야지.. 함수를 따로따로 다 오린 다음 기능별로 뭐뭐 되는지 관찰하고 분리하여 따로 구현해야지.. 아자아자..!

23/01/15
리팩토링에 어려움을 느껴 구글링을 다시 하던 중 리액트에 타입까지 작성하여 리팩토링이 된 라이브러리를 발견했다..!!@@@! 신! 하늘!

바로 여기다. 어떤 갓발자님이 개발하여 라이브러리로 가져올 수 있다. tsconfig파일에 따로 추가하여 타입도 설정할 수 있다. 진짜 이거 보고 소리를 질렀다. 발명된 바퀴를 다시 만들지말라 했던가.. 물론 내 손수 리팩토링 했어도 되지만 맵 표현, 마커 표현 기능이 은근 방대해 3주안으로 끝낼 수 있을까 의문이었다. 바로 발견해서 시도해봤더니 굳! 좋았다!
이제 DOM이 아니라 리액트로 만지니 각 요소들을 더 쉽게 조작할 수 있고, 데이터도 쉽게 전달할 수 있을 것이다! 감사합니다! 개발자님. 감사합니다 멘토님!@!

결과물

다음과 같다.

import { useEffect, useState } from "react";
import { Map } from "react-kakao-maps-sdk";
import styled from "styled-components";

const MapContainer = styled(Map)`
  width: 100%;
  height: 100vh;
`;

const KakaoMap = () => {
  const [centerMove, setCenterMove] = useState({
    lat: 37.56667437551163,
    lng: 126.95764417493172,
  });

  return (
    <>
      <MapContainer
        center={{
          lat: centerMove.lat,
          lng: centerMove.lng,
        }}
        level={7}
        isPanto={true}
      >
      </MapContainer>
    </>
  );
};

export default KakaoMap;

이제 여기에 로그인 토큰에 관련된 마커인 맛픽커 마커, 검색 마커, 맛플레이스 디테일 페이지 마커를 넣어주면 카카오맵 관련 원하는 기능 구현은 완성된다!

결론

어떤 기술을 쓰든 간에 지금 내가 만들고 있는 프로젝트 결과물을 생각하며 왜 쓰는지 생각하자. 그동안 생각하지 않은 포인트라 되게 인상 깊었다. 그런 것들을 고민하며 코드 품질을 잘 만들어 갈 수 있는 개발자가 되어보자.

또 항상 만들어진 바퀴가 있는지 찾아보자. ㅋㅋㅋ 물론 맨땅에 헤딩하는 경험은 값지겠지만 그 시간들을 뛰어넘고 기술 연속성을 이용할 수 있다는 것도 값지지않겠는가? 구글링을 열심히 하자!

profile
코뿔소처럼 저돌적으로

7개의 댓글

comment-user-thumbnail
2023년 2월 14일

구글링으로 좋은 코드 찾는것도 실력이고 그것을 내껏으로 만드는 것도 실력이죠! 프로젝트하면서 다른 팀들이 맵구현하는거 보고 어떻게 구현했는지 궁금했는데 궁금증이 해소가되네요 ㅎㅎ
lat: 37.56667437551163,
lng: 126.95764417493172,를 초기값으로 설정하는 이유가 있을까요? 궁금합니다

1개의 답글
comment-user-thumbnail
2023년 2월 14일

ㅋㅋㅋㅋ격하게 공감합니다. ctrl+c, v가 생활이죠. 이미 c,v키가 닳고 있어요. 저희는 구글맵을 사용했었는데 태연님 말씀대로 카카오 공식문서는 비교불가군요!

답글 달기
comment-user-thumbnail
2023년 2월 15일

네이버는 소셜로그인도 허락 받기 엄청 힘들다고 하더라구요... ㅋ.ㅠ 프로젝트때 지도 사용 못해봤는데 코드는 심플하게 끝나는군요 ..!

답글 달기
comment-user-thumbnail
2023년 2월 16일

맵 구현 해본 적 없는데 한번 도전해봐야겠습니당 !!

답글 달기
comment-user-thumbnail
2023년 2월 18일

저희 팀도 Kakao Maps SDK 이용해서 지도 구현했었는데, 역시 리액트 문법으로 되어있으니까 훨씬 빠르게 만들 수 있더라구요 👍

답글 달기
comment-user-thumbnail
2023년 2월 18일

맛피에서 지도 API 사용하신거 궁금했었는데 이렇게 좋은 후기?가 있네요 ㅎㅎ 잘 알고 갑니다 다음에 사용할 때에는 이 포스팅을 참고해봐야겠어요

답글 달기