역지오코딩(Reverse geocoding) - feat. google API...

호떡집사·2024년 8월 29일
ExpoJavaScriptReverse GeocodingTROUBLESHOOTINGgoogle apireact native

trouble shooting

목록 보기
1/1
post-thumbnail

❗️삽질❗️을 많이 했기 때문에 일단 trouble shooting으로 분류했다.. ㅎㅎㅋ...

ReactNative로 날씨 어플 만들기.. ReactNative로 만들어 보고 싶은 어플이 있기 때문에 처음부터 차근차근 배워보고자 시작했다.

인강은 with 니꼬쌤!😎

개발 플랫폼 : Expo-CLI
third party : Expo SDK 51 사용

//package.json
   "dependencies": {
    "expo": "~51.0.28",
    "expo-status-bar": "~1.12.1",
    "react": "18.2.0",
    "react-native": "0.74.5",
    "expo-location": "~17.0.1"
  },

🤢 맞닥뜨린 문제

import { useEffect, useState } from 'react';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [city, setCity] = useState('...loading');
  const [placeId, setPlaceID] = useState(null);
  const [ok, setOk] = useState(false);

    const { status } = await Location.requestForegroundPermissionsAsync();

    if (status !== 'granted') {
      return;
    }

    setOk((prev) => !prev);

    const {
      coords: { latitude, longitude },
    } = await Location.getCurrentPositionAsync({ accuracy: 5 });

    setLocation({ latitude, longitude });
  
//...코드는 일부만 가져옴
  • 현재 기기의 위치를 갖고 오기 위해 Location.requestForegroundPermissionsAsync() 을 사용해서 권한을 먼저 요청 후 Location.getCurrentPositionAsync()을 이용해 현재 기기 기준의 위치값을 가져와 필요한 위도(latitude) 경도(longitude) 값을 불러온다.
    - accuracy 옵션 (1~6까지의 수치로 설정 가능)을 이용해 위치정확성을 조절할 수 있다.
const response = await Location.reverseGeocodeAsync({location.latitude,location.longitude},{useGoogleMaps:false});

옵션을 사용하지 않는다 했음에도 불러와지지 않는 오류.. 이거 나의 문제일까..?

그래서 다시 찾아봤다.

Location.reverseGeocodeAsync()

Geocoding web api를 더 이상 지원하지 않는단다;; 좀 제대로 읽어볼 걸.. Place Autocomplete를 대신 쓰라는데 일단 들어가봄

Place Autocomplete 서비스는 장소를 반환하는 웹 서비스입니다. HTTP 요청에 대한 응답으로 요청은 검색 문자열과 선택적 지리적 경계가 있습니다. 이 서비스는 텍스트 기반 지역 검색을 위한 자동 완성 기능을 제공합니다. 업체, 주소 및 관심 장소 같은 장소를 확인할 수 있다.

꼭 필요한 파라미터 값이 input -> 텍스트 스트링을 받는다. 그런데 우리는 받아 넘길 값이 위도 경도 숫자다.

물론 Place API를 활용할 일이 있어 보인다. 매우 유용해 보인다. 장소 세부 정보 및 상소 사진, 주변 지역도 검색 가능하고, 후에 해당 API를 활용할 토이플젝도 해보고 싶다. (딱 기다려..)

아무튼 그래서 찾은게 역지오코딩(Reverse geocoding) 가보자고.

요약하자면 사람이 읽을 수 있는 지도 주소로 변환해 준다. 필요한 파라미터도 latlng, key

내가 원하던거다..!



🌏 역지오코딩(Reverse geocoding) 써보자

1. 키 발급

역지오코딩(Reverse geocoding) 공식문서 링크

공식 문서 링크로 들어가면 상단에 시작하기 버튼 눌러 들어가 api를 발급하자 그래야지 key 파라미터로 전달해 api를 호출할 수 있다.



2. 써보자

1) 요청 base Url

//json형태 응답
https://maps.googleapis.com/maps/api/geocode/json

//xml형태 응답
https://maps.googleapis.com/maps/api/geocode/xml

2) parameters

필수 옵션

  • latlng :위도 및 경도 가장 가까운 위치를 지정하는 좌표
    ex)latlng=위도(latitude),경도(longitude)
    -> ,(콤마)로 구분

  • key : 발급받은 내 key

선택적 옵션

  • language : 결과 반환 언어
    지원되는 언어 참고!
    한국 - ko
    영어 - en

  • region : ccTLD로 지정된 지역 코드

    ccTLD...? 뭔데..?

    국제적으로 나라 또는 특정 지역 그리고 국제 단체 등을 나타내는 인터넷의 도메인 이름에 배당한 고유 부호

    feat.위키피디아
    코드가 궁금하다면 클릭

  • result_type : 하나 이상의 주소 유형 필터입니다. 파이프 (|)로 구분 ->검색 후 필터 역할 (아니면 전부 다 불러와서 쓸데없이 불러 오는 데이터의 크기가 커진다..)

    • street_address 는 정확한 상세 주소를 나타냅니다.
    • route 는 이름이 지정된 경로(예: 'US 101')
    • intersection은 일반적으로 두 주요 도로의 주요 교차로
    • political은 정치적 독립체
    • country는 전국적인 정치적 독립체를 나타내고 일반적으로 지오코더에서 반환하는 순위가 가장 높은 유형
    • administrative_area_level_1은 국가 수준 아래 첫 번째 행정 독립체를 나타냅니다. 미국에서 이 행정 구역 수준은 주입니다. 모든 국가에 이러한 행정 구역 수준이 표시되지는 않습니다. 대부분의 경우 거의 일치하지만 지오코딩 결과는 다양한 신호와 위치 데이터를 기반으로 하기 때문에 이러한 일치가 보장되지는 않음
      • level은 administrative_area_level_1~administrative_area_level_7까지 있음 자세한 부분은 공식 문서 참고
    • colloquial_area는 일반적으로 사용되는 독립체의 대체 이름을 나타냅니다.
    • locality는 도시 또는 마을로 통합된 정치적 독립체를 나타냅니다.
      sublocality는 지역 아래 첫 번째 행정 독립체를 나타냅니다.

그 외에도 값이 많으니 필요한건 공식문서를 참고!

3) 코드 수정

불러오는 응답 값의 구조를 보면 (값은 보기 편하게 삭제했다) 원하는 데이터는 results에 담기며 그 배열의 첫 번째 요소인 address_components의 첫 번째 요소 long_name이 내가 원하는 값이다


{
    "plus_code": {
        "compound_code",
        "global_code"
    },
    "results": [
        {
            "address_components": [
                {
                    "long_name",
                    "short_name",
                    "types": []
                },
                {
                    "long_name" ,
                    "short_name",
                    "types": []
                }
            ],
            "formatted_address",
            "geometry",
            "place_id",
            "types": []
        }
    ],
    "status"
}

코드 추가

import { useEffect, useState } from 'react';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [city, setCity] = useState('...loading');
  const [placeId, setPlaceID] = useState(null);
  const [ok, setOk] = useState(false);

  const { status } = await Location.requestForegroundPermissionsAsync();

  if (status !== 'granted') {
    return;
  }

  setOk((prev) => !prev);

  const {
    coords: { latitude, longitude },
  } = await Location.getCurrentPositionAsync({ accuracy: 5 });

  setLocation({ latitude, longitude });
  
  //추가
  
  try {
   	 const response = await fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${process.env.EXPO_PUBLIC_GOOGLE_MAP_API}&result_type=administrative_area_level_1&language=en`);
     const { results } = await response.json();
     setPlaceID(results[0].place_id);
     setCity(results[0].address_components[0]?.long_name);

  } catch (error) {
     console.error(error);
  }
  
... 아래 코드 생략



추가

1) Expo 에서 환경변수 사용 방법
root 경로에 .env 파일 생성 후 EXPO_PUBLIC_[NAME]=VALUE 형태로 생성 후 아래 변수 형태로 불러와 서 쓰면 된다. 

process.env.EXPO_PUBLIC_MY_API

부족한 내용이 있을 수 있으니 더 살펴보고 첨삭해야지...!

profile
호떡집사
성장하는 Front-End 개발자를 목표로!(✿◡‿◡)

0개의 댓글