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

문제정의 및 원인 파악 글

https://hyorish03.tistory.com/22

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

 

 

원인

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

 

해결방안

1. 눈 속임을 한다.

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

 

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

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

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

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

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

• 프로젝트는 웹뷰 기반 expo 앱이었습니다. 
• 따라서 로그인과 마이페이지는 RN으로, 기타 기능은 모두 웹뷰로 구현했습니다.
• 그러나 프로젝트 진행을 하며 로그인 또한 웹에서 진행하자는 의견이 나왔고, 이를 활용해 Geolocation API가 느린 문제를 해결할 수 있었습니다.
• 로그인 페이지에서 현 위치 조회한다면, 유저가 로그인하는동안 Geolocation의 5초 지연 시간이 흐르기 때문에 유저가 메인 화면에 들어갈때쯤엔 정확한 위치를 지도에 그릴 수 있었습니다. 
• /* DB 복구시 추가예정*/