Expo로 날씨 앱 만들기 (도시 이름 가져오기, 화면 refresh, publish로 배포하기)

새싹·2021년 12월 9일
0

일단 까먹기 전에 휘갈기기

1. 도시 이름 가져오기

처음에는 open weather map에서 json 객체 안에 있는 name을 그대로 가져와 사용했는데, 영어로만 가져올 수 있다는 점은 둘째치고 정확도가 떨어졌다.
위도 경도 정보는 정확한데 이 api의 지역 정보가 정확하질 않아서 옆동네 이름이 뜨기도 하고 (도시 이름만 가져오면 상관없을텐데 꼭 동 이름까지 가져오는 경우가 있다. 근데 안정확함ㅋ) 지금 사라진 동네 이름이 뜨기도 했다......

그래서 처음엔 위도 경도로 도시 이름 찾고 -> 도시 이름으로 날씨를 가져와야하나? 라고 생각했는데 완전 간단한 해결방법이 있었다
바로 reverseGeocodeAsync를 쓰면 된다
위도 경도에 따라 우편번호 포함된 주소를 가져오는 라이브러리라 거의 정확하다!!!

import * as Location from "expo-location";

try {
  	// 위치 권한 허용 확인
    await Location.requestForegroundPermissionsAsync();
  
  	// 현재 위치 가져오기
    const {
      coords: { latitude, longitude },
    } = await Location.getCurrentPositionAsync();
  
  	// 날씨 정보 가져오기
    const {
      data: {
        main: { temp },
        weather,
      },
    } = await axios.get(
      `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    );
  
  	// 위치 정보 가져오기
    const location = await Location.reverseGeocodeAsync({ latitude, longitude}, { useGoogleMaps: false });
    console.log("location", location);
  
    setState({
      isLoading: false,
      condition: weather[0].main,
      temp,
      // city가 null일 경우에 region 정보로 대체
      name: location[0].city === null ? location[0].region : location[0].city,
    });

더 자세한 코드 설명은 노마드코더 유튜브 영상을 보시면 됩니다 거기 코드랑 똑같음...

location에서 city정보가 없는 경우가 있는데 (예시 : city가 null이고 region이 서울, district가 동작구로 뜸)
나는 도시 정보를 가져오고 싶어서 city가 null일 때는 region으로 이름을 설정했다

그리고 개꿀인점!!!
이렇게 도시 이름을 가져오면 자동으로 휴대폰 설정 언어에 맞게 뜬다!!

2. 화면 refresh해서 정보 업데이트하기

앱을 재시작하지 않으면 화면에 표시된 정보가 바뀌지 않았다.....
리액트 네이티브 생명주기 찾아보며 별 짓을 다 했는데 useEffect의 의존성 배열 값을 추가해주면 됐다

useEffect(() => {
    getWeather({setState});
  }, [state.temp, state.condition, state.name]);

의존성 배열 [] 안에 들어있는 요소가 바뀔 때마다 useEffect가 화면을 리렌더링 해준다!
나는 temp(온도), condition(날씨정보), name(도시이름 / 위치)가 바뀌면 리렌더링 하는걸로 해줬다

3. 앱 publish로 업데이트 배포하기

처음 배포하는 거라면 expo build:android, expo build:ios를 해야겠지만 이미 배포한 상태에서 업데이트만 해주는 상황이라면 명령어 단 1나만 써주면 된다

expo publish

오로지 이거 단 1나면 된다.
패키지 설치? 그런 거 필요없음
이게 expo의 가장 큰 장점일듯...

0개의 댓글