OKKY - Change Logs

현재 버전

react 세계지도 라이브러리 소개

안녕하세요.

실무에서 의외의 경험을 하게되어 공유하고자 글을 작성합니다.

1. 구현해야했던 기능

음 비슷한 서비스가 생각이 안나서 이렇게 설명드려봅니다.

웹사이트에 저런 세계지도 펼쳐놓고,

저 지도의 특정 국가를 마우스 클릭했을 때 해당 국가의 특정 정보를 보여줘야하는 서비스였습니다.

(예를들어 세계지도에 있는 중국을 클릭하면 중국엔 스타벅스점포가 100개있다 리저브 매장은 몇개있다)

????? 예시가 좀 황당하긴하지만 이런식으로 국가별 특정정보를 보여줘야했습니다.

시도1. google map API 사용

https://cloud.google.com/maps-platform

구글맵 API가 18년도부터 유료로 바뀌었다고 합니다.

이걸로 세계지도를 웹페이지에 그린다음

https://developers.google.com/maps/documentation/javascript/events

구글맵 API에서 지도의 어느 한 부분을 클릭시 클릭이벤트로

(1) 위도와 경도를 제공하고있습니다.

(2) 이 위도와 경도를 통해

(3) Google의 Geocoding API로 (이것도 유료에요)

(4) 클릭한 나라를 알아내서 정보를 제공하려고 했어요.

복잡하죠? ㅠㅠㅠ 저도 처음 Google Map써보면서 많이 해맸습니다.

시도2. react-simple-map 이용

https://www.react-simple-maps.io/

이 라이브러리도,

특정 나라를 클릭했을 때 클릭된 나라의 정보를 얻어올 수 있었어요.

한국클릭하면 KR 이런거 얻어오는게 가능했죠.

대신 Google Map처럼 그 외 정보는 얻어올 수는 없었지만,

제가 웹사이트에서 만들고자 했던 기능은 충분히 구현할 수 있었습니다. 훨씬 쉽게요.

2. 백엔드 구현 설계

구현은 다음주 월요일부터 하겠지만, 아마 백엔드 개발자분한테 이렇게 요청드릴거같아요.

(1) DB 구현 추측(?)

PK는 유일해야하는데 국가코드도 유일한거니까

나라별 스벅점포 숫자를 DB에 저장할 수 있을거에요..

(2) API 설계 추측(?)

확인결과 남극이나 북극같은 나라 다 뺴보고 했더니 지도에 표시되는 나라가 177개였어요.

"list": [
  {
    "name": "Afghanistan",
    "iso2": "AF",
    "starbucksStoreCount": 123
  },
  {
    "name": "Angola",
    "iso2": "AO",
    "starbucksStoreCount": 123
  },
  {
    "name": "Albania",
    "iso2": "AL",
    "starbucksStoreCount": 123
  }

이런식으로 모든 나라의 국가코드와 스벅점포숫자를 배열로 받아서,

세계지도의 특정 나라를 클릭했을 때

받아뒀던 점포숫자를 보여주는 방식으로 구현하면 될거같은 각이 나왔어요.

뭐 백엔드 개발은 제가 안하겠지만

지도관련 웹서비스 (프론트앤드 파트) 만들어보는건 저도 처음이라 즐거운 경험 했습니다.

처음 기획서받고 잠깐 벙쪘는데 생각보다 일이 쉽게 풀릴 각이 나왔습니다.

코로나가 얼른 없어졌으면 좋겠네요!

수정 이력

2020-11-26 23:28:34 에 아래 내용에서 변경 됨 #1