기획안에서 봤듯이 맛집 지도 그리기 웹 앱을 만들 것이라 당연히 지도앱이 필요하다. 지도앱에 관련한 오픈 API들은 많다. 구글, 네이버, 카카오 등등이 있는데 그 중 카카오를 고른 이유는
그러한 이유들로 카카오맵을 선택하게 됐다.
심지어 네이버는 들어가보니 이렇더라..
카카오 API는 무궁무진하다! 로그인부터 검색, 장소 검색, 심지어 맵 앱까지 다양하다. 카카오 로그인은 백엔드 쪽에서 구현한다고 했어서 뺐고, 카카오맵 API를 호출해 가져오기로 했다. 장소도 카카오 API 검색을 통해서 가져오기로 했다.
기획안을 통해서 카카오맵에 대한 기능은 다음과 같다.
이런 기능을 모두 구현해야했고, 이 파트는 내 담당이었다.
23/01/10
기획도 끝났고, 구현하고픈 기능 목록도 끝났으니 개발자를 위한 카카오데브 사이트로 넘어가 API 키를 호출 받고, 넣어서 했다. 기본적으로 하루 30만회 호출이 무료로 가능하니 꿀이다!
기본적인 언어는 바닐라 JS로 DOM을 건드리며 구현한다. 사용법은 공식문서에 있으니 참고하자. 좀 옛 문서로 쓰였다. 라이브러리 없이 바닐라고, 선언자도 var
로 쓰여져 있다.
딱 3가지만 필요하다. HTML에 쓸 자신의 API 키, 허용 도메인 추가, 호출 코드.
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
가 들어가 있는데 자신이 사용할 옵션을 선택하여 작성한다. 다 공식문서에 있다.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;
이제 여기에 로그인 토큰에 관련된 마커인 맛픽커 마커, 검색 마커, 맛플레이스 디테일 페이지 마커를 넣어주면 카카오맵 관련 원하는 기능 구현은 완성된다!
어떤 기술을 쓰든 간에 지금 내가 만들고 있는 프로젝트 결과물을 생각하며 왜 쓰는지 생각하자. 그동안 생각하지 않은 포인트라 되게 인상 깊었다. 그런 것들을 고민하며 코드 품질을 잘 만들어 갈 수 있는 개발자가 되어보자.
또 항상 만들어진 바퀴가 있는지 찾아보자. ㅋㅋㅋ 물론 맨땅에 헤딩하는 경험은 값지겠지만 그 시간들을 뛰어넘고 기술 연속성을 이용할 수 있다는 것도 값지지않겠는가? 구글링을 열심히 하자!
구글링으로 좋은 코드 찾는것도 실력이고 그것을 내껏으로 만드는 것도 실력이죠! 프로젝트하면서 다른 팀들이 맵구현하는거 보고 어떻게 구현했는지 궁금했는데 궁금증이 해소가되네요 ㅎㅎ
lat: 37.56667437551163,
lng: 126.95764417493172,를 초기값으로 설정하는 이유가 있을까요? 궁금합니다