kakao map API와 React, Django rest Framework

hapwoo·2021년 10월 13일
0

카카오맵 API를 react, next.js, mobx, chart.js와 함께...

최근 html과 js로 이루어진 웹 사이트를 react로 옮기는 작업을 하게 되었다.

그 중 나는 카카오 지도 API를 이용하여 한 페이지 내에서 다양한 기능을 제공하는 지도 개발을 담당했으며, Django app 위에서 html과 jquery를 이용한 js로 구현을 했었다.

기존에 리액트를 사용해보기는 커녕 배워본 적도 없는 상태에서 당장 정해진 마감기한 내에 구현을 해야 했다. 약 이틀정도 가볍게 리액트의 흐름정도만 이해한 상태에서 바로 개발을 시작했으며, 온갖 시행 착오를 겪었고 이는 현재 진행중이다...

특히 기존에 js로 짜둔 코드들을 전면 수정해야했으며, kakao map api document에서 제공하는 함수를 그대로 가져다 쓸 수 없어 많은 고생을 해야만 했다.

그래서 카카오맵을 리액트에서 사용하는 법을 열심히 구글링을 했는데, 단순히 하나의 파일내에서, 가장 기본적인 리액트앱 위에서 사용하는 법 정도만 나와있고, 내가 이용해야하는 next.js, mobx와 카카오맵을 함께 이용하는 예시를 거의 찾지 못했다.

따라서 혼자 삽질을 하며 알게된 것들과 next.js, mobx위에서 카카오맵을 구현하는 방식(옳은 방식인지는 모르겠지만...)을 기록하기 위해서 해당 시리즈를 팠다!!


본격적인 포스팅에 앞서 내가 겪었던 아주 소소한 문제부터 해결에 오랜 시간이 걸렸던 문제들을 나열해보자면 (다 기억이 나진 않는다...!)

  • geometry(polygon) 데이터를 받아온 뒤 지도 위에 그리고자 할 때 api 비동기처리로 인한 오류

  • 커스텀 오버레이처럼 지도 좌표위에 카카오 자체 기능을 이용하여 올려야 하는 경우, content = < div onClick='func()'> 어쩌고 저쩌고 </ div>" 와 같은 형태로 형태를 넘겨주어야 하는데, 이 때 리액트가 func를 인식하지 못하는 것 + 아예 content 자체를 하나의 component로 빼고자 한 시도

  • setState를 통해 데이터를 저장했음에도 console로 찍어보면 저장이 안되어있는 경우

  • 커스텀 오버레이를 지도에서 지우고자 setMap(null)을 시행했음에도 적용이 안되는 경우

  • removeEventListener가 적용되지 않는 현상

  • mobX store에서 kakako map을 관리하는 경우 observable한 map을 최초에 null값으로 주고 해당 페이지가 로드되는 경우 kakao map으로 저장하는 action을 실행하는 경우, 다른 컴포넌트에서 map을 null로 인식하는 현상


...기타 등등이 있었다.
profile
프론트 개발자

0개의 댓글