try / catch / async / await

코드 예시

const getLocation = async () => {
    //수많은 로직중에 에러가 발생하면
    //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
    try {
      //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
      await Location.requestPermissionsAsync();
      const locationData= await Location.getCurrentPositionAsync();
      console.log(locationData)

    } catch (error) {
      //혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
      Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
    }
  }

try/ catch는 API 사용 할 땐 주로 사용하는 에러 처리 방지 코드
우리가 API 호출을 제대로 호출했다 하더라도
서버 측에서 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수 있음
이런 상황들을 처리하는 코드입니다
error가 발생했을 경우의 수를 처리하는 목적입니다

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

const getLocation = async () => {
    //수많은 로직중에 에러가 발생하면
    //해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
    try {
      //자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
      await Location.requestPermissionsAsync();
      const locationData= await Location.getCurrentPositionAsync();
      console.log(locationData)

    } catch (error) {
      //혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
      Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껏다 켜볼까요?");
    }
  }

try / catch

여기서 try 부분에 API 요청 코드가 존재하고
catch 부분에 에러가 발생했을 때 Alert을 띄우는 걸 볼 수 있다
catch(error)에서 error은 고정으로 들어가는 것 같음

다시 반복!
try는 기본적으로 API를 요청하는 코드이고
혹시나 만에 하나! 에러가 떴을 때 catch를 통해 에러를 처리한다

async / await

코드 상에 async / await 키워드를 볼 수 있습니다
이는 단순히 외부 API 호출 및 휴대폰 기기에 대한 정보/파일 등에 접근할 때 사용하는 키워드라고 생각하면 쉽습니다

이걸 쓰는 이유는 '함수의 실행 순서를 고정하기 위함'입니다
외부 네트워크 작업(API 호출)이나 휴대폰의 파일 시스템 또는 위치정보 가져오기 같이 무거운 작업을들 하는 경우 어떤 작업부터 할지 알수가 없습니다.

자바스크립트의 특징인 "비동기" 라는 특징 때문인데,
이에 대해 자세히 알기 보다,

1) 외부 API 작업과
2) 앱이 아닌 휴대폰 자체 기능(위치 정보 권한 물어보기 등)을

사용할 땐 async / await를 사용한다 생각하면 편합니다

사용 할 땐 함수들을 감싸는 함수 선언 부 앞에 async
사용하는 함수들 앞엔 await 입니다

다음 예시를 보시면 금방 이해가 됩니다

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

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

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

이걸 위의 예시에 대입해보면

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

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

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

그냥 함수 선언 부분 앞에 async가 들어간다라고 이해하면 됩니다

그런데 왜 아래처럼 await을 붙이면 안 되는 것일까?

const locationData = await Location.getCurrentPositionAsync();
//위에 코드가 기존 형태인데 = 뒤에 await이 오는 게 뭔가 어색해보이지 않나?

await const locationData = Location.getCurrentPositionAsync();
//그래서 이렇게 위치를 변경해봤는데 에러가 뜨더라 
//변수 선언할 때는 = 뒤에 await을 선언하면 되는 것 같음