[React] Geolocation API의 느린 문제 (2) - 해결방안

문제정의 및 원인 파악 글

https://hyorish03.tistory.com/22

[React] Geolocation API의 느린 문제 (1) - 문제정의

 

 

원인

• Geolocation API + React + 크로미움 브라우저 ⇒ 5초 이상의 지연이 발생.
• Geolocation API의 watchPosition + 바닐라 JS (브라우저 상관X) ⇒ 5초 이상의 지연이 발생.

원인 탐색 과정에서 Geolocation API가 느리다는 것을 알게되었습니다. 따라서 직접적인 해결이 불가능하기 때문에 UX를 위해 다양한 해결방안을 모색했습니다. 

 

해결방안

1. 눈 속임을 한다.

• 파란 화면이 나오는 이유는 지도의 최초 center 위도 경도 값을 0으로 초기화했기 때문이었습니다. (그래서 바다가 찍혔던 것..)
• 초기 위치를 서울과학기술대학교 미래관으로 찍어두고, Geolocation API를 통해 현 위치를 받아오는 5초간 보여지는 화면이 빈 화면처럼 느껴지지 않도록 수정해보았습니다. 

 

변경 전 (빈 파란화면이 5초이상 지속됨)                                                    변경 후 (초기 화면이 파란화면이 아님)

2. RN에서 현 위치를 메시지로 받는다

• RN에서 로그인할 경우 JWT토큰을 웹뷰로 메시지를 보냅니다.

• 이를 활용해 현 위치를 accessToken과 함께 웹뷰로 보내는 방식도 있었습니다.
• 그러나 이와 같은 방식이 웹에서 현 위치를 받는 방식과 속도면에서 큰 차이가 있지 않아 선택하지 않았습니다.

 

3. 로그인 화면에서부터 현 위치를 조회한다 (⭐️NEW !) - 최종선택

• 프로젝트는 웹뷰 기반 Expo 앱이었습니다. 로그인과 마이페이지는 React Native로, 나머지 기능은 웹뷰로 구현한 상황이었습니다.
• 프로젝트 진행 중 로그인을 웹에서 진행하도록 기능이 수정되었습니다. 이 덕분에 문제를 더 쉽게 해결할 수 있었습니다. 
• 해결 방법 : 회원가입 화면에서 현 위치 조회
  
  • 회원가입 화면에서 현 위치를 조회하면, 유저가 회원가입하는 동안 5초 정도의 Geolocation 지연 시간이 해결되기 때문에, 메인 화면에 진입할 때는 정확한 위치를 지도에 표시할 수 있었습니다.
  • 받은 GPS 정보는 localStorage에 저장해, 재로그인이나 재접속 시 기본 위치로 설정하였습니다.
  • 이후 위치 변경이 감지되면 해당 위치로 업데이트하는 방식으로 구현했습니다.