서론

회사에서 차량의 위치와 경로를 표시하는 기능을 구현한 적이 있다.
GoogleMap에서 JS로 구현할 수 있어서 사용하려고 하였으나 회사 페이지는 react 기반 웹페이지라서 라이브러리를 이용할 수 밖에 없었다.

많은 라이브러리가 있었으나 두 개의 라이브러리를 압축되었다.
1. @react-google-maps/api
2. @googlemaps/react-wrapper

1번 라이브러리가 weekly downloads 숫자가 2번 라이브러리보다 월등히 높아서 사용을 하게 되었다.
(현재는 GoogleMaps JS와 2번이 연계가 되어 공식사이트에서 사용방법도 적혀있다)

화면전환시 googleMap이 Load되지 않는 이슈 발견

초기 구현시 Load의 이슈가 없었다. 다른 기능이 추가되고 테스트를 하던 도중 발견을 했다.

이슈 재현을 해보았다.
1. 구글맵이 로드되는 화면을 들어간다. (첫번째사진)
2. 내장되어 있는 뒤로가기 버튼 또는 브라우저로 뒤로가기를 한다.
3. 1번을 다시 실행한다.
4. 화면이 로드가 되지 않는다. (두번째사진)
5. 새로고침을 하면 다시 잘 나오지만 1번과정으로 되풀이 된다.

이슈 해결과정

1. 서버에서 data가 내려오지 않는가?

출발지와 도착지가 위도, 경도를 서버에서 받아와 화면에 뿌려주는 방식을 이용했었다.
그래서 개발자도구의 network를 보니 잘 내려고 있다.

2. 조건문을 통과하는가?

서버의 자료를 받아서 setState를 하여서 그 data 유무에 따라서 맵을 보여준다. 개발자도구의 HTML를 보았더니 조건문을 통과하여 구글맵의 Wrapper까지도 통과를 한다.

그럼 이제 구글맵이다.

3. 구글맵이 Load가 잘 되는가?

구글맵이 로드되는 화면을 들어갈 때, GoogleMap API와 통신을 한다. 처음에는 진입을 해서 값을 받아온다. 그러나 두번째 진입시 GoogleMap API와 통신을 하지 않는다.
아래 사진의 빨간색 동그라미가 GoogleMap API와 통신을 한다는 것이다.

기존에 잘 되던 것이 안된다?
@react-google-maps/api 라이브러리를 먼저 보았다.

4. @react-google-maps/api 구조 살펴보기

  const {isLoaded} = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
  });

@react-google-maps/api의 useLoadScript() 메서드가 있다. 이 메서드는 컴포넌트의 변수로써 Google Maps API script를 로드해주는 역할을 한다. 이 스크립트를 통해서 Google Map을 그려주는 방식이다.

      <GoogleMap
        onLoad={(map) => {
          const bounds = new window.google.maps.LatLngBounds();
          map.fitBounds(bounds);
        }}>

GoogleMap 컴포넌트를 리턴할 때 props onLoad의 콜백함수로 맵을 로드할 수 있다.
그 중 google.maps.Map의 인스턴스의 메서드인 fitBounds를 이용해서 원하는 위치로 맵을 옮길 수 있다.
이 두줄의 코드가 없으면 회색화면 나오는 것이다.

bounds 변수의 문제인가? map.fitBounds(bounds);의 문제인가?
bounds 를 임의값을 할당을 하니까 동일한 증상이 발생한다.
즉, const bounds = new window.google.maps.LatLngBounds();에는 문제가 없다는 이야기.
그렇다면 map.fitBounds(bounds); 이 코드인데....

5. @react-google-maps/api github issue 확인

라이브러리 깃허브에 가보면 issue 탭이 있다.
사용자들이 사용하면서 버그나 사용법을 질문하면 다른 유저와 개발자가 댓글을 달아준다.
라이브러리의 버그이면 라이브러리 개발자가 버전을 업데이트해주기도 한다.

검색을 해보니 fitBounds과 load를 검색하니 비슷한 상황의 이슈가 있었다.

댓글을 확인하니
googleMaps-api가 버전 업데이트를 하였고 그로 인해 fitBounds의 변경점이 생겼다고 한다.
그리고 아래와 같이 사용하라고 다른 유저가 올렸다.

  const {isLoaded} = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
    version: '3.47'
  });

이 라이브러리도 googleMaps-api로 개발을 한거니까 영향을 받은 것이다.

결론

버.전.문.제.
라이브러리의 한번 감싼 Wrapper 라이브러리의 위험성을 깨달았다.
그냥 좋다고 쓰는 것보다 직접 구현을 했으면 이런 문제가 발생되지 않았을 것이다.

그래도 이런 이슈를 유추하는 진행을 해봄으로써 성장했다고 느낀다.

에피소드

글의 진행을 위해 5번 github의 issue 확인에서 큰 에피소드가 있었다.

처음 구글에서 검색을 했다. google 검색을 해도 안나온다.
검색어의 문제일 수도 있겠지만 다 찾아봐도 내가 원하는 답을 찾기 힘들었다.
stackoverflow에서도 열심히 찾아봤지만 내가 못 알아먹은것인지 도통 감이 오지를 않는다.
그래서 라이브러리의 이슈란을 뒤졌다.
load가 안된다... fitBounds의 문제인거 같다...
없다. 없다. 사용법만 나오고 있다.

그래서 회사에 이야기를 했다. 현재 이런 이슈가 발생하였고 임시방편으로 새로고침 기능을 넣어서 작동이 되도록 하겠다.
주말동안 시간을 주시면 더 서치해보고 안되면 라이브러리를 변경하여 진행하겠다 라고 이야기를 했다.

그렇게 주말이 지났지만 방법은 나오지 않았다.
월요일에 출근하여 다른 라이브러리를 사용하겠다 라고 이야기하고 @googlemaps/react-wrapper를 사용하기로 하였다.

@googlemaps/react-wrapper 개발자가 유튜브에 기본설명을 하는게 있어서 하는데 에러가 난다.
하... 관련한 에러를 찾다가 다시 @react-google-maps/api으로 유입이 되었다.
설마하는 마음으로 fitBounds를 확인해보니 한 유저가 나와 같은 상황이 벌어졌다고 올렸다.
비슷하다. 거기에 달린 댓글대로 하니까 된다.

된다.!!!!!!

아... 댓글 달아주신 분께 Thank you를 외쳤다 ㅋㅋㅋㅋ

간단요약

react에서 @react-google-maps/api 라이브러리 사용 중 페이지 전환시 구글맵이 로드가 되지 않는다면 버전을 바꿔라.

  const {isLoaded} = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
    version: '3.47' // 버전으로 바꾸면 된다.
  });