날씨 서버 외부 API - 위치정보 가져오기(openweathermap api )

1. openweathermap api 

※ 적용순서

  - 현재 위치(좌표) 데이터 가져오기

  - 위치 데이터를 이용해 현재 위치의 날씨 데이터 가져오기

 

2. expo-location

expo에서 현재 위치 데이터를 얻게 해주는 도구를 우선 설치해보자.

 

https://docs.expo.dev/versions/latest/sdk/location/

Location - Expo Documentation

 

expo install expo-location

 

도구를 설치함으로써 위치정보를 가져올 권한을 얻었다!

 

3. MainPage.js 에 날씨 서버 외부 API 적용 순서 

 

▶ 도구 가져오기 

    import * as Location from 'expo-location';

 

▶ UseEffect() 에 getLocation() 함수를 실행하여 화면이 그려진이후 날씨 서버 외부 API를 실행한다. 

 

▶  const getLocation = async () => {     

             //수많은 로직중에 에러가 발생하면     

             //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행

            try {       

               //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await       

               await Location.requestPermissionsAsync();       

               const locationData= await Location.getCurrentPositionAsync();       

               console.log(locationData) 
        } catch (error) {       

               //혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다       

               Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");     

        }   

} 

 

expo-location 을 통해서 일반적으로 앱을 사용하다보면은 위치정보를 가져올때 사용자에게 팝업창을 통해 허용을 할것인지 물어보게된다! 이것을 expo-location 을 통해 구현을 할 수 있다.

 * 외부 API 요청 작업은 try/catch 로 감싸주는게 좋다.

   try / catch 는 에러 처리 방지 코드인데, 어떤 원인에 의해 발생할 수 있는 에러를 방지하고자 감싸준다!

 

try : API요청코드

catch : 에러 발생했을때 실행할 코드 

 

* 함수 실행 순서를 정해주는 async / await

자바스크립트의 특징은 비동기 라는 특징때문에 함수의 실행이 끝날떄까지 기다리지않고 다음으로 넘어가게된다.

그런걸 방지하고 실행 순서를 고정하기 위해 코드 상에 키워드를 사용한다. 

 

사용 할 땐 함수들을 감싸는 함수 선언 부 앞에 async 

사용하는 함수들 앞엔 await 

 

console.log(locationData['coords']['latitude'])     

console.log(locationData['coords']['longitude']) 

latitude , logtitude 와 같이 위도/경도 값을 정상적으로 가져올 수 있는걸 볼 수 있다.

 

▶ API 적용하기

 

※ 참고용 공식문서

https://openweathermap.org/api

Weather API - OpenWeatherMap

 

서버가 제공하는 도메인 형식의 API를 사용하기 위한 도구가 필요하다. 이를 axios 라 부른다.

 

- 도구 설치

  yarn add axios

 

- 사용법

위도,경도 값만 주소에 넣어주면 날씨 데이터를 건네주는 API를 본격적으로 사용해보자. (키값은 강의에서 무료로 제공해준다!!)

import axios from "axios";

... 

const API_KEY = "****************";       

const result = await axios.get(         

`http://api.openweathermap.org/data/2.5/weatherlat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`  

 ); 
 
 console.log(result) 

 

위도,경도를 구한다음 위와같이 API요청코드를 작성하면되고

공식문서를 필요한 데이터를 찾아서 필요한 데이터만 꺼내서 사용하면된다.

 

const temp = result.data.main.temp;   

//온도 

const condition = result.data.weather[0].main

// 날씨 

 

 setWeather({        

    temp,condition

})

추려낸 데이터를 객체리터럴 방식으로 딕서녀리 형태로 구성한 후 사용하자.

(객체 리터럴 방식은 중괄호를 이용해 객체를 생성하는 방식)

 

공식문서를 통해 필요한 데이터를 추려서 코드에 작성해주고 이제 화면에 그려주면 되는데!

화면에 그려주기에 앞서 컴포넌트에서 이러한 정보를 관리하는데 있어 가장 중요한 

날씨데이터를 관리할 상태를 만들어줘야 한다.

 

const [weather, setWeather] = useState({     

      temp : 0,     

      condition : ''   

})

* useState() 함수에 초기값을 작성하는 이유는 화면이 그려지는 순서때문!! 

  (로딩 화면을 만들어주는 이유와 마찬가지)

 

마지막으로 실제 화면에서 그려지는 부분에서 추려낸 데이터를 가져와 보여주면 끝!

오늘의 날씨: {weather.temp + '°C   ' + weather.condition} 

 

정리하자면,

이제 useState()함수에서 날씨데이터를 상태 관리하고 있기때문에 앱이 실행되고 첫 화면이 그려지면 설정한 초기값으로 보여질것이다.

 

그리고, UseEffect() 함수가 실행되어 위도경도 값을 구한 후 API요청에 따라 필요한 정보를 가져와서 화면을 다시 그려주게 된다!