Geolocation API를 사용하는데 되게 느리다

이효린·2024년 3월 26일

React

목록 보기

8/8

😫 문제 현상 설명

Geolocation의 Watchposition 훅을 사용해 위치 변화가 감지될 때마다 현 위치를 새로 받아와 보여주는데새로고침을 하거나 초기 접속 시 파란 빈 화면이 5초 이상 나타났습니다.

1. 내가 코드를 잘못 짠 것인가 ?

그럴리가 없었습니다.. MDN의 예제 코드를 그대로 사용했기 때문에 제 코드의 문제는 아니라고 판단했습니다.

2. 해당 페이지 성능 문제인가 ?

해당 페이지에는 정말 많은 컴포넌트와 비동기 작업이 많이 일어났기 때문에 단순 성능 문제일 수 있다 판단했습니다.
따라서 저는 모든 코드를 주석처리 후 watchPostion 훅만 실행했습니다. 그러나 동일하게 지연이 발생했습니다.

3. 브라우저 문제 ?

본 프로젝트는 ReactNative를 사용해 웹뷰를 띄우는 방식으로 개발을 하고있었기에 크롬과 사파리를 동시에 띄워 개발하고있었습니다.
그러던 중 사파리에서는 지연이 발생하지 않고, 크롬에선 지연이 발생하는 것을 확인할 수 있었습니다.
따라서 이 지연이 크롬의 문제일 수 있다 판단했고, firefox(비 크로미움), 사파리(비 크로미움), 크롬(크로미움), 웨일(크로미움) 삼성인터넷(크로미움)에서 테스트 해보았습니다.
사실 Firefox에서 테스트가 매우 힘들었습니다.. 이상하게 브라우저 자체에서 렉이 많이 걸리더라구요 ..? 새로고침은 아예 작동하지 않아 새 창을 켜서 localhost로 접속하는 방식을 채택했습니다 (이 또한 창이 많아지면 렉이 걸려 테스트의 한계가 있었습니다)

브라우저 테스트 결론

브라우저 환경	테스트 방식	지연시간
Firefox (비크로미움)	새 창을 열어 http://localhost 접속	거의 없음
Safari (비크로미움)	새로고침 15회	1초 이내 ~ 2초
Chrome (크로미움)	새로고침 15회	5초 이상
웨일 (크로미움)	새로고침 15회	5초 이상
삼성 인터넷 (크로미움)	새로고침 15회	5초 이상

사실 크롬에서 지연이 발생하는 것은 큰 문제가 없었습니다.
어차피 웹뷰로 띄워 사용할 예정이니 삼성 인터넷과 Safari에서만 지연이 발생하지 않으면 됐지만 삼성인터넷에서도 지연이 발생했습니다.
이쯤 되니 API가 느린건가..? 라는 생각 + 스택오버플로우에서 봤던 원래 API가 느리다는 글이 맞을 것 같다는 생각이 들었습니다.

4. React 렌더링 문제 ?

그냥 쌩 HTML + 바닐라 JS로 해보면 이게 진짜 API 문제인지 확인할 수 있다 생각해 HTML 파일을 만들어 크롬에서 실행시켜보았습니다.

아래 코드에선 watchPostion과 getCurrentPosition이 동시에 사용되고 있지만, 실제 실행시엔 둘 중 하나를 주석처리하고 각각 테스트를 진행했습니다.

테스트 결과

watchPostion의 경우 느리게 동작하는데
두 함수를 동시에 실행시키니 watchPosition이 실행 완료 될 때까지 getCurrentPosition에 대한 InnerHTML도 실행이 안 되는 것을 볼 수 있었습니다.

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="getLat"></div>
    <div id="getLon"></div>
    <div id="watchLat"></div>
    <div id="watchLon"></div>
    <script>
      const getLett = document.getElementById("getLat");
      const getLonn = document.getElementById("getLon");
      const lett = document.getElementById("watchLat");
      const lon = document.getElementById("watchLon");
      lett.style.color = "red";
      lon.style.color = "red";
      getLett.style.color = "blue";
      getLonn.style.color = "blue";
      (function () {
        window.onload = function () {
          var getPos;
          var getSuccess = function (position) {
            getPos = position;
            document.getElementById("getLat").innerHTML =
              getPos.coords.latitude;
            document.getElementById("getLon").innerHTML =
              getPos.coords.longitude;
          };

          navigator.geolocation.getCurrentPosition(getSuccess);

          var watchPos;
          var Success = function (position) {
            watchPos = position;
            document.getElementById("watchLat").innerHTML =
              watchPos.coords.latitude;
            document.getElementById("watchLon").innerHTML =
              watchPos.coords.longitude;
            console.log(watchPos.coords.latitude, watchPos.coords.longitude);
          };
          navigator.geolocation.watchPosition(Success);
        };
      })();
    </script>
  </body>
</html>