[항해99] 미니 프로젝트 후기 #1 /geolocation

배운 점

 

이번 주 미니 프로젝트에서 앞전에 쓴 WIL은 일기 형식이라서 뒤를 이어 추가로 썼던 기능에 대해서 이야기해 보고자 한다.

 

미니 프로젝트에서 geolocation을 활용했었는데, 우선 이걸 활용한 이유는 항해 99를 하면서 다들 이제 몸과 마음이 지쳐가고 있는데 "이 와중에 약국은 또 언제가!"라는 말에 우리 BE리더님이 그럼 주변에 있는 약국을 찾아주면 되겠네?라는 생각으로 주변 위치에 있는 약국을 찾아주는 서비스를 만들기 시작했던 것이었다.

 

 현재 위치의 정보를 불러왔는 데 사용했던 방법에 대해서는 아래와 같이 기재되어 있다.

const [myLocation, setMyLocation] = useState({
    lat: 37.4979517,
    lng: 127.0276188,
  }); //useState로 위도, 경도의 기본값을 서울특별시 강남구로 지정해 두었다.
  const navigater = useNavigate();
  useEffect(() => {
    if (navigator.geolocation) {
      //navigator은 사용자의 상태와 신원정보 조회(읽기전용) // geolocation 사용자 위치 검색
      navigator.geolocation.getCurrentPosition(success, error);
    }
    function success(pos) {
      // 성공했을때 위치임
      let crd = pos.coords;
      setMyLocation({
        lat: crd.latitude, //position.cords.latitud로 사용자 위치에 있는 위도임
        lng: crd.longitude, //위와 같으나 경도임
      });
    }
    function error() {
      setMyLocation({ lat: 37.4979517, lng: 127.0276188 });
    } //에러 났을때 위치임
  }, []);

이렇게 geolocation을 활용하게 된다면 자신의 현재 위치의 위도와 경도를 불러올 수 있게 되는데 BE 쪽에서 혹시 이걸 위도와 경도 말고 시와 구로 필터링을 해서 자신들에게 쏴줄 수 있는지 여쭤보았고,  역지요 코딩으로 다시 변환한 후에 BE 쪽으로 쏴줬다.

해결 방법은 아래와 같다.

  useEffect(() => {
    const { naver } = window;
    async function reverseGeo() {
      //역지오 코딩이다. 주소 반환
      await naver.maps.Service.reverseGeocode(
        {
          location: new naver.maps.LatLng(myLocation.lat, myLocation.lng), //기본주소가 먼저 나옴
        },
        function (status, response) {
          let result = response.result; // 결과 응답
          let items = result.items; //결과 아이템
          let sido_arr = items[0].addrdetail.sido.split(' '); // 시도 (서울시) split으로 ''으로 쪼개면 충청북도 청주시
          let gugun_arr = items[0].addrdetail.sigugun.split(' '); // 시구군 (강남구)
          let sido = undefined; //시도는 언디파인 (그냥 빈값 처리한거임) else에 있기 때문에 귀찮아서 선언한거임
          let gugun = undefined; //구군 언디파인
          if (sido_arr.length == 1) {
            //충청북도[1] 청주시[2]이기 때문에 1보다 이상임
            sido = sido_arr[0]; //시도의 첫번쨰 내용 ex) 충청북도 청주시
            gugun = gugun_arr[0]; // 구군 첫번째 내용
          } else if (sido_arr.length > 1) {
            // 그게 아니라면 1보다 크다면 시도에
            console.log('here!!!!!!!!!!!!');
            sido = gugun_arr[0]; //sido gugun_arr[0]를 넣음
            gugun = gugun_arr[1]; // gugu gugun_arr[1] 그거에 두번째 인덱스
          }
          if (status === naver.maps.Service.Status.ERROR) {
            alert('서버에 오류가 있어요. 다음에 다시 시도해주세요😰'); //주소 잘못요청하면 서버에 오류가 뜰 경우에는 이렇게 뜸
          }
          console.log(sido, gugun);
          dispatch(__getSeung([sido, gugun]));
        }
      );
    }
    reverseGeo();
  }, [myLocation]); //위도 경도를 찾을때만 useEffectㅇ 실행
  // navigator.geolocation.getCurrentPosition(onGeoOkay, onGeoError);
  //state 에 넣어서 사용함 slecter에 데이터 넣어서 처리하는것도 가능함

 

느낀 점

정말 처음 해보는 지오코딩과 역지요 코딩을 하면서 계속되는 삽질에 이거 정말 어떡하지라는 생각만 계속 들었는데, 결국에 딱 실행시켰는데 어? 이게 되네?라는 생각에 내가 하고 정말 당황했다 ㅋㅋㅋㅋㅋ

그리고 하나하나 콘솔이랑 주석을 다시 달면서 이게 왜 이렇게 되는지 흐름을 다시 깨우치면서 마지막까지 이해하도록 노력했다.

 

아쉬운 점

솔직히 내가 지오코딩을 했다는 것도 감격스러워서 아쉬운 점이 별로 없기는 한데 굳이 뽑자면 다른 프런트 앤드 쪽에서 맡은 네이버 지도를 보여주는 작업을 내가 안 해봤다는 게 그저 아쉬울 뿐이다.

그리고 분명 get을 이용해서 리듀서 안에 넣고 상태 관리를 했는데 다음 페이지 갔다가 이전 페이지로 돌아가면 초기 세팅으로 해두었던 서울시 강남구가 자꾸 떠서 제대로 되지 않은 느낌이라서 찝찝하기는 하다.