[앱개발]-서버리스(파이어베이스), API

이호현·2022년 4월 1일

API async/await axios json tryCatch 서버리스 파이어베이스

📚 개발 일지 📚

목록 보기

9/10

📕 네 번째 일지

[일지 내용]

앱과 서버
서버리스와 파이어베이스
API

💡 앱과 서버

앱에 모든 데이터를 담을 순 없다.

1. 앱 용량이 커질 수도 있고
1. 앱 개발자가 새로운 데이터를 사용자에게 제공하려면, 새로운 데이터를 담아 다시 배포해야 한다.

🔍 서버리스( serverless )

진짜 서버가 없다는것이 아니라 서버를 직접 만들 필요가 없다는 정도로 이해하면 쉽다.

서버를 만드는 일은 쉬운일이 아니기 때문에
이 서버를 대신 만들어놓고 필요한 기능,

데이터 생성
데이터 조회
데이터 삭제/수정 등을 제공해주는 서비스들이 존재한다.

이를 서버리스라고 부르고 그중 하나로 파이어베이스가 있다.

파이어베이스( Firebase )

파이어베이스(Firebase)는 2011년 파이어베이스(Firebase, Inc)사가 개발하고 2014년 구글에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼이다.
서버에 대한 지식이 그렇게 깊지 않아도
서버적인 기능들을 사용할 수 있게끔 도와주는 서비스이다.

파이어베이스를 이용하는 절차는 아래와 같다.

파이어베이스에 가입한다
파이베이스 프로젝트 생성
사용 할 파이어베이스 서비스 활성화

💡 API

앱과 서버의 동작 방식

앱에서 서버에 데이터를 요청하거나 데이터를 보내는 대화를 하려면
서버가 정한 규칙에 따라 대화 요청(Request)을 해야한다.

정한 규칙에 따라 요청을 하지 않으면 응답(Response)이 오지 않는다.
서버 쪽에서 정한 규칙을 우린 보통 API(Application Programming Interface)라고 부른다.

그 규칙의 형태는 다음과 같이

www.MAIN.com/getdata ←- 데이터 조회 API
www.MAIN.com/setData ←- 데이터 저장 API

서버가 제공하는 도메인일수도 있고

db.ref('/like/').on('value') ←- 데이터 조회 API
db.ref('/like/').set(new_like); <-- 데이터 저장 API

서버가 만들어놓은 함수를 그냥 이용해서 사용하는 규칙일 수도 있다.

🔍 서버 API란?

앞에 두 API유형 중

서버가 제공하는 도메인을 그대로 사용하는 방식이다.

🔍 try/catch

try/ catch 는 API 사용 할 땐 주로 사용하는 에러 처리 방지 코드이다.

서버 측에서 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수 있다. 이런 상황들을 처리하는 코드이다.

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

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

🔍 async/await

단순히 외부 API 호출 및 휴대폰 기기에 대한 정보/파일 등에 접근할 때 사용하는 키워드라고 생각하면 쉽다.
쓰는 이유는 함수의 실행 순서를 정한대로 고정하기 위해서이다.

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

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

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

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

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

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