본문 바로가기
프로젝트/코드스테이츠 - 4주프로젝트

새로고침하면 지도가 하얗게 되는 버그 ( +12,+136

by 안뇽! 2021. 12. 4.
반응형
  • 문제 : 새로고침 하면 지도가 하얀지도가 나옴
  1. 메인페이지에서 위치를 받고 위치를 전역변수에 넣는다.
  2. 위치가 필요할때마다 전역변수에서 꺼내쓴다.
  3. 새로고침 하면 전역변수가 초기화 된다
  4. 유저 좌표가 (0,0)으로 전송된다
  5. 하얀지도가 뜬다.

 

문제의 원인인 3,4 번을 찾느라 이틀간 많은 시간을 보냈다.

물론 local storage에 넣을 수 있지만 유저가 서울에있다가 인천에갔을 경우에도 서울의 위치가 나올것이기 때문에 적절한 해결책이 아니다.

 

어떻게든 서버의 힘을 빌리지않고 클라이언트에서 할 수 있는 것들은 클라이언트에서 해결하려 했는데, 

 

새로고침 한방에 모든게 물거품이 된다는 사실을 알았다.

 

  • 해결책
  1. 위치를 홈화면에서 받는다.
  2. 새로고침 할 때 마다 유저의 위치가 업데이트 되어 지도에 표시된다.
  3. 전역변수 아니다.

여기서도 문제가 있었던게 유저위치를 useState로 사용하니깐, 다른홈페이지를 갔다오면 다시 위치가 초기값이 되어 하얀지도가 나왔다.

 

그래서 다시 유저위치를 전역변수로 설정했다. 이번에 유저위치를 전역변수로 설정한 이유는 다른컴포넌트에서 사용하기 위해서가 아니라

값을 항상 유지시키기 위함이다.

 

1. 새로고침할때마다 유저위치가 업데이트 되도록 Home.js에 좌표획득함수를 입력.

2. 좌표는 항상 유지되도록 전역변수에 저장(새로고침하면 초기화되지만 새로고침할때마다 유저위치가 업데이트된다.)

 

 

반응형