[FRONT] react-kakao-map-sdk 사용하기

[WHO-A-U]

react-kakao-map-sdk 사용하기

개요

현재코드는 marker 와 window 모두 js level 에서 처리해줘야 되서 힘듦

단점

• 코드를 작성하는데 어려움
• 코드 난독화
• innerHTML 과 유사한 element 생성방식

---

현재까지 알아낸 정보

1. 어렵지 않게 구현할수 있다 (테스트 환경에서 쉽게 작동)

2. ant-design 도 작동시킬수 있다.

   단 ant-design css 파일을 index.html 에서 cdn 방식으로 load 해줘야된다
   (react 가 알아서 build 까지는 시켜주지 못하는것으로 보임)

3. 우리가 사용해야되는 marker , marker window , (cluster) 등 대부분의 기능을 지원한다.

   구현시 지켜야 될부분

4. 기회비용을 생각하면서 얼마나 코드를 수정해야될지 빠르게 판단

5. 따로 branch 를 생성해서 원래 방식과 아예 분리할것

6. 한번에 몰아서 빠르게 구현한다.

   참조

   npm
   https://www.npmjs.com/package/react-kakao-maps-sdk

공식홈페이지
https://react-kakao-maps-sdk.jaeseokim.dev/

튜토리얼
https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro/

[WHO-A-U]

간단한 리팩토링 완성

확인사항

• react-kakao-map-sdk 에 나와있는 예제를 토대로 완성 https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/overlay/multipleMarkerEvent2

• MapMarker 안에 antdesign 컴포넌트를 사용해도 잘 나오는것 확인함

  단 index.html <link/> 에 antdesign cdn 을 받아와야함

구조 변경사항

• kakaomap.js 에서는 marker 를 다음 두 컴포넌트로 표현한다
• NormalMarker.js , SmallMarker.js
• 두 * Marker 는 InfoWindowCard.js 를 내부컴포넌트로 가질예정