[ReactNative] Expo 날씨(expo-location) 서버 외부 API 사용 방법(1) - 서버가 만들어놓은 함수 사용

안드로이드 IOS 개발할 땐 코드를 일정 부분 좀 써줘야 되는데 expo로 빠르게 해결할 수 있다.

도구 설치

expo install expo-location

외부 API 요청 작업은 try / catch로 감싸기

API 호출을 제대로 호출 했지만
서버나 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수도 있다. 우리가 잡지 못할 오류가 발생할 가능성이 있는 이런 상황들을 처리하는 코드이다.

• try{ } 부분엔 API요청 같은 작업 코드를
• catch{ } 부분엔 에러가 발생 했을 때 실행 할 코드를 작성한다.

try {
      await Location.requestPermissionsAsync();
      const locationData= await Location.getCurrentPositionAsync();
			console.log(locationData)
    } catch (error) {
      //혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
      Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껐다 켜볼까요?");
    }

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

a b c 라는 코드가 각각 다른 실행 속도를 가지고 있고,
코드 실행 순서를 안 지켜도 된다면 실행 순서가 빠른 순서대로 바로바로 앱 결과를 보여 준다면 앱 퍼포먼스가 좋아진다.

자바스크립트의 장점이자 단점인 "비동기" 라는 특징 때문이다.

외부 네트워크 작업(API 호출)이나 휴대폰의 파일 시스템 또는 위치정보 가져오기 같이 무거운 작업들을 하는 경우 어떤 작업부터 할지 알수가 없다.

async / await 을 이때 쓰는 이유는 함수의 실행 순서를 딱! 고정하기 위해서이다. 내가 작성한 코드를 순서대로 실행 시키기 위해서이다. 단점보완!

외부 API 작업과
앱이 아닌 휴대폰 자체 기능(위치 정보 권한 물어보기 등) 을 사용할 때 async / await 키워드를 사용한다 생각하면 편하다.

사용 방법은 함수들을 감싸는 함수 선언 부 앞에 async를,
사용하는 함수들 앞엔 await 이다.

const func = async function(){
   await func01()	실행1
   await func02()	실행2
}

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

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

위도경도 가져오기

//날씨 가져오기 도구 적용
await Location.requestForegroundPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
//위도 경도 데이터만 추출해오기
console.log(locationData['coords']['latitude'])
console.log(locationData['coords']['longitude'])