[JAVASCRIPT 공부일지] 4주차 - 2 (앱에 날씨 데이터 추가 - 날씨 서버 외부 API 사용)

일반적으로 앱 서비스는 실시간으로 변경되어야하는 데이터가 있거나, 인터넷 환경 연결로 상시 업데이트 되는 환경이 중요합니다. 이번에는 앱에 실시간 날씨 데이터를 외부 API로부터 받아와 적용시키는 방법을 공부해보고자합니다.

---

<휴대폰 위치 가져오기>

서버가 제공하는 도메인을 그대로 사용하여, 실제 날씨 데이터를 넣고자합니다.
날씨 데이터는 무료 API인 "openweathermap api" 를 사용합니다.

과정으로는)
1) 현재 위치 (좌표) 데이터 필요, 가져오기
2) 위치 데이터를 이용해 현재 위치 날씨 데이터를 가져오기 가 됩니다.

평소 다른 앱 서비스들을 보면 처음 앱을 시작할때나 특정한 경우에 앱 위치 정보권한을 물어보게 됩니다.
따라서 먼저 앱 위치 정보 권한을 설정하여야하는데, 

expo install expo-location

를 입력하여 설치 후

날씨 데이터를 넣고자 하는 페이지에 (ex. MainPage.js)에 

import * as Location from "expo-location";

const getLocation = async() => {


}

등의 코드를 써줄 수 있습니다.

await Location.requestForegroundPermissionsAsync(); // 앱의 권한을 물어보는 코드

이 코드가 앱의 권한을 물어보는 코드인데, 특정한 상황 (휴대폰 오류, 위치권한 가져오는 도중)에 오류가 있을 수 있습니다. 따라서 이는 try-catch 문으로 감싸주어 예외처리를 해주어야합니다.

try{ } 부분엔 API요청 같은 작업코드,
catch {error } 부분엔 에러가 발생했을때 실행할 코드를 작성합니다.
>> 위치를 못가져올 경우를 대비하여, 안내메시지를 준비합니다.

Alert.alert("위치를 찾을 수 없습니다.", "앱을 재실행 해주세요.")

>> catch { } 안에 error 변수는 오류가 발생했을때 어떤 오류였는지 error변수에 담아 알려주게됩니다.

cf) 더 자세한 사용방법은 expo-location 공식문서에 있습니다.

// 날씨 권한 가져오는 부분

await Location.requestForegroundPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
console.log(locationData)

이 코드들은 필요시마다 사용할 수 있습니다.

---

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

= 에이싱크, 어웨이트라고 불리는 자바스크립트 문법으로, 
기존 자바스크립트 문법은 abc라는 코드가 각각 다른 실행속도를 가지고있을때, 코드 실행순서가 빨리 끝나는 것부터 실행시키게끔 하여 일처리의 성능이 증가시킵니다. 
이러한 문법은 효율적이지만 원하는 순서대로 실행되지 않는다는 단점도 있습니다.

그래서 원하는 순서대로 실행시키기 위해 "async / await 문법"을 사용하는 것입니다.

사용할땐 함수들을 감싸는 함수 선언부 앞에 async
사용하는 함수들 앞엔 await 를 써주면 됩니다.

const func = async function() {
	await func01()
	await func02()
}

예를들어 이렇게 쓰는 것입니다.

아니면 화살표 함수를 사용하여

const func = async( ) => {
	await func01()
	await func02()
}

이렇게 써줄 수도 있습니다.

---

위치정보에 필요한 것은 위도 경도입니다.
실제 API한테 위도, 경도를 주어 날씨데이터를 요청할 수 있습니다.

console.log(loacationData['coords']['latitude']) // 위도
console.log(locationData['coords']['longitude']) // 경도

// 콘솔창에 locationData를 확인할 수 있습니다.

---

<외부 서버 API 사용>

서버가 제공하는 도메인 형식의 API를 사용하기 위해선 axios 라는 도구가 필요합니다. (= axios 도메인 요청방식의 도구 사용)

yarn add axios

// yarn으로 외부도구를 설치합니다.

참고) weather API 공식문서

<API 요청>

1)

import axios from "axios"

처럼 불러옵니다.


2)
위도, 경도를 변수에 담았으면, 

const result = await axios.get(
        `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
      );

// API_KEY 값은 openweather API에 회원가입 후 키값을 받는 방식이 있습니다.

const API_KEY = "xxxxxxxxxxxxxxxx";

이처럼 키가 준비 되었으면, 

여기서 "await" = 순서대로 실행시키기위한 자바스크립트의 문법입니다.
await axios.get(~~) = axios에서 get 함수로 데이터를 받아와 result 변수에 담습니다.

이러한 방식은 openweather 공식문서에 들어가면
1) APICall 부분에서 어떻게 요청해야하는지와
2) Parameter부분에서 어떤것을 넘겨야하는지에 대해 잘 설명이 되어있습니다.

이 문서를 통해 필요한주소, 필요한 파라미터등을 추가로 준비해서 실행시킬수도 있습니다.

const condition = result.data.main.temp; // (날씨상태)
const temp = result.data.weather[0].main // (온도)

 

선언했으면 상태관리는 필수적입니다.

const[weather, setWeather] = useState({
	temp : 0,
	condition : ''
})

// 상단에 기초 초기값을 초기화해놓습니다. (날씨 데이터 상태관리 상태 생성)

이후에

setWeather({
	temp, condition
})

// 처럼 객체 리터럴 방식으로 딕셔너리를 구성합니다.

<Text style={styles.weather}>오늘의 날씨: {weather.temp + '°C   ' + weather.condition} </Text>

처럼 사용할 수 있습니다.

---

다음 공부일지에서는 서버리스인 '파이어베이스' 에 대해서 알아보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.