상사가 준 또 다른 task
기존 Leaflet에 오프라인 시에도 map tileLayers 가 보이게 해달라~!
그간 정신이 좀 딴 데 팔려있어서, research를 잘 못하고 있었다.
다시 온전히 집중하면서 stackoverflow, chatgpt, git을 통해 찾은 자료!
1. 직면한 문제점 : 현재 node version: 15.0.1 그리고 yarn 을 사용하므로 npm을 통해서 leaflet.offline을 받을 수가 없었다.
그래서 stackoverflow롤 통해서 뒤지고 뒤져서 나에게 필요한 다음 정보를 찾았다.
리액트 기반의 프로젝트에 manual로 leaflet offline을 사용하기~!
버전3은 typescript로 release 되어 있어서, 나는 java script가 있는 v2.2.0을 사용했다.
참고했던 Git
https://github.com/allartk/leaflet.offline/tree/v2.2.0
위의 설명대로 필요한 세 가지 파일을 받고 기존 상사가 적어 놓은 코드에 붙여 놓았다.
작동은 하는데 타일이 이미지로 잘 저장 되어있는지 어떻게 테스트를 하지…? 하고 물어보니,
테스트 방식
network – offline 후 새로 고침이 아닌, 다른 탭이나 화면 내의 refresh 버튼을 통해서 fetch request없이 지도의 타일이 화면에 잘 나오는지 체크 해 달라고 했다.
다행히 성공!
2. 중간에 이모티콘 이 + – 로 위의 zoom 기능과 혼선이 있어 이모티콘 변경하려고 하는데 잘 안되는 것이었다. 그리고 user의 편의를 위해서 mouse hover시 tooltip 달아주기!
tooltip은 기존에 있는 leaflet.offline을 실제로 테스트 해보고 코드를 쭉 보니 title이라는 항목이 손을 흔들고 있었다. 나 여기써!
그래서 밥 먹고 와서 좀 졸면서 코드를 보다가, <AiOutlineDownload fontSize={20} title=”Save tiles” /> 넣어줬더니 hover시 툴팁 생김ㅋㅋ
참고로 나는 react icons의 Ant Design Icon 사용!
https://react-icons.github.io/react-icons/
그런데 처음에는 버전을 신경 못쓰고 최신 것에서 넣다보니 자꾸 에러가 떴다. 그래서 react-icon의 버전에 맞춰서 다시 원하는 이미지를 긁어서 버튼에 넣으니 [object object] 라는 문구가 보였다.
chatGPT에 검색하니 import { renderToStaticMarkup } from ‘react-dom/server’; 하라고 한다.
react-dom/server의 renderToStaticMarkup 함수는 React 엘리먼트를 해당하는 HTML 문자열로 변환하는 역할을 합니다. 여러 라이브러리나 프레임워크는 HTML 문자열을 기대하는 경우가 많은데, 이 함수를 사용하면 JSX로 작성된 React 아이콘 등의 엘리먼트를 해당하는 HTML 문자열로 변환하여 사용할 수 있습니다.
예를 들어, <AiOutlineDownload fontSize={20} />와 같은 JSX 코드를 renderToStaticMarkup로 전달하면 이것이 HTML 문자열로 변환되어 Leaflet과 같은 라이브러리에서 적절하게 렌더링할 수 있습니다. 이렇게 변환된 HTML 문자열은 Leaflet 컨트롤의 saveText 또는 rmText 옵션에 전달하여 아이콘이 올바르게 표시되게 할 수 있습니다.
jsx를 html로 바꿔서 적절히 렌더링 시키는 것이라고 보면 되겠구나!
이제 해결 해야 할 것
- marker가 지도 위에 잘 보이게 수정할 것~!
- 옆의 테이블 row를 클릭하면 해당 marker가 커지면서 상단에 툴팁이 보이게 해라
3. Marker를 지도 위에 올려놓기
leaflet-react를 써서 <TileLayer /> 이런 식(용어로 컴포넌트라고 하나)으로 들어가는데 나는 그 부분을 지우고 leaflet.offline 을 사용하기 위해서 그 라이브러리의 React 사용자가 제안한 대로 useEffect 안에 tileLayerOffline.addTo(map); 이렇게 들어가는 형식으로 되어 있었다.
한 마디로 leaflet-react와 leaflet offline 구 버전의 짬뽕설..
그래서 Marker가 보이지 않는 이유의 나의 첫 번째 가설은 leaflet-react은 모두 컴포넌트 형식을 따라주는데, 내가 leaflet.offline 적용을 위해서 그 형식대로 따르지 않아서 마커가 사라진 것이다 라고 생각하고 바꾸려고 보니, Marker 이 외에 다른 부분도 다 leaflet-react형식이 아닌 기존 leaflet 형식을 따라야 해서 고쳐야 할 것이 참 많은 것이었다.
그래서 최후의 수단으로 남겨 놓고, chatGPT를 들들 볶기 시작했다.
그리고 얻어낸 제안, Marker를 감싸고 있는 <ClusterWrapper/>를 따로 옮겨봐라였다.
그래서 주석처리 했더니, 마커가 하잇! 하고 초록 손을 들기 시작했다.ㅋㅋㅋ 어 안녕..!
그래서 어쩌다 보니 Marker 돌아옴.
무튼 오늘은 2번째 작업인 해당 row 클릭 시 옆의 마커가 활짝 열리면서 툴팁이 보이는 작업을 해야 한다.
나름 유지 보수 작업 꽤나 재미있는 것 같다.
뭔가 파피루스에 있는 고대 코드를 보면서, 보물 찾기 하는 느낌?
그런데 코드가 너무 깨끗해서.. 내 더러운 손으로…. 코드를 만져도 되나요…?
삐걱 거려도..일단 앞으로 나가기만 하면.. 작동만 되면 돼…라고 합리화 ㅋㅋㅋ