4주차에선 사용자들에게 보여주고 싶은 데이터와 사용자들이 앱을 사용하면서 발생하는 데이터를 관리 및 보여주는 방법에 대해 배웁니다
1) 앱과 서버: 데이터가 담겨있는 곳, 즉 서버와 앱과의 관계를 살펴봅니다. 2) 서버리스: 서버를 직접 구축하지 않고 서버를 사용하는 방법을 알아봅니다. 3) 파이어베이스: 서버리스의 한 종류인 파이어베이스 사용방법을 익힙니다.
앱과 서버 앱에 모든 데이터를 담을 순 없습니다.
1) 앱 용량이 커질 수도 있고 2) 앱 개발자가 새로운 데이터를 사용자에게 제공하려면, 새로운 데이터를 담아 다시 배포해야 겠죠?
그래서 데이터가 담긴 곳, 즉 서버라 부를 곳을 배우고 앱에서 서버의 데이터를 가져오고 변경하는 방법에 대해 배웁니다.
서버리스(serverless) 서버를 만드는 일은 쉬운일이 아닙니다.|
이 서버를 대신 만들어놓고 필요한 기능, 1) 데이터 생성 2) 데이터 조회 3) 데이터 삭제/수정 등을 제공해주는 서비스들이 존재합니다.
이를 서버리스라고 부르며 이에 대해 배웁니다.
파이어베이스서버리스를 제공해주는 서비스들은 많습니다. 이 중 하나인 구글의 파이어베이스에 대해 배웁니다.
나만의 꿀 팁앱에 필요한 기능 하나하나 붙여가며 적용합니다.
[앱과 서버] 우리 앱에서의 서버
앱과 서버의 동작 방식 👌"로마에 가면 로마법을 따라라"
앱에서 서버에 데이터를 요청하거나 데이터를 보내는 대화를 하려면 서버가 정한 규칙에 따라 대화 요청(**Request**)을 해야합니다.
정한 규칙에 따라 요청을 하지 않으면 응답(**Response**)이 오지 않습니다. 서버 쪽에서 정한 규칙을 우린 보통 **API**(Application Programming Interface)라고 부릅니다.
그 규칙의 형태는 다음과 같이
서버에서 주는 데이터 형식 JSON 👏서버가 앱에 데이터를 줄 땐 JSON 형태로 데이터를 전달해줍니다. JSON 형태는 리스트와 딕셔너리의 복합 구조로 우리가 3주차까지 계속 다루던 데이터 형식입니다.
리액트 네이티브에 주로 데이터를 준비하는 시점 리액트 네이티브로 앱을 만들면서 서버와 통신(대화)하는 시점은 크게 두 가지입니다.
앱 화면이 그려진 다음 데이터를 준비 ←useEffect useEffect가 뭐죠? >> "앱 화면을 보자마자 실행되야 하는 작업들이 모여 있는 곳" 데이터를 준비하는 시점은 useEffect안
그래서 우리는 보통 앱 화면이 그려진 다음 서버측에서 제공해주는 API를 이용해 필요한 데이터들을 준비합니다.
useEffect(()=>{
//서버 API 사용
//이 화면에서 사용 할 데이터 준비 등...
},[])
앱에서 사용자가 저장 버튼을 눌렀다! 👀예를 들어 나만의 꿀팁 앱에서 데이터 저장 시점은, 사용자가 꿀팁을 보고 팁 찜하기 버튼을 눌렀을 때 일겁니다. >> 사용자가 찜한 데이터를 저장 좀 해줘~~ 그렇다면! 차근차근 꿀팁 앱에 서버 기능을 하나씩 달아봅시다!
[앱과 서버]날씨 서버 외부 API - 휴대폰 위치 가져오기
서버 API란? openweathermap api
날씨 앱에 날씨 API 사용해보기 API를 통해 날씨 데이터를 가져온다는 것은 다음 순서로 진행되어야 할 겁니다.
1) 현재 위치(좌표)데이터 필요, 가져오기 (어디의 날씨인지 알아야 하니까요!) 2) 위치 데이터를 이용해 현재 위치 날씨 데이터 가져오기
이게 다입니다!
그럼 우림 위치 데이터를 서버에 보내주면 날씨 데이터를 주는 API를 사용하면 될것 같네요!
[실습 ✍️] 날씨 API 사용 (1)
앱 위치 정보 권한 설정 Expo에선 역시나 그렇듯 쉽게 현재 위치 데이터를 얻게 해주는 도구를 제공해줍니다.
expo install expo-location
설치가 끝났으면 check! 팝업이 뜬 모습 expo-location 가져오기 , import의 또다른 사용 방법!! ***expo-location도구를 코드 집단에 다 전부 가지고 올건데, 이 도구를 지칭을 할때 Location으로 지칭을 하겠다. = * as~ 별칭 설정***
1) expo-location 도구를 이용해 위치를 가져올 수 있는 권한을 얻었고 2) 위치 데이터를 가져왔습니다
✅코드 분석 1) 외부 API 요청 작업은 try /catch로 감싸기
>try/ catch는 API 사용 할 땐 주로 사용하는 에러 처리 방지 코드입니다.
여러분들은 API 호출을 제대로 호출 했을 수도 있지만 서버 측에서 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수 있습니다. 이런 상황들을 처리하는 코드입니다. try{} 부분엔 API요청 같은 작업 코드를 catch{} 부분엔 에러가 발생 했을 때 실행 할 코드를 작성합니다.
try {
await Location.requestPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
console.log(locationData)
} catch (error) {
//혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껐다 켜볼까요?");
}
2) 함수 실행 순서를 정해주는 async/ await 코드 상에 `async/ await` 키워드를 볼 수 있습니다. 이는 단순히 외부 API 호출 및 휴대폰 기기에 대한 정보/파일 등에 접근할 때 사용하는 키워드라고 생각하면 쉬운데요!
이걸 이때 쓰는 이유는 함수의 실행 순서를 딱! 고정하기 위해서입니다. 외부 네트워크 작업(API 호출)이나 휴대폰의 파일 시스템 또는 위치정보 가져오기 같이 무거운 작업을들 하는 경우 어떤 작업부터 할지 알수가 없습니다.
자바스크립트의 특징인 "`비동기`" 라는 특징 때문인데,,,, 이에 대해 자세히 알기 보다,
a. 외부 API 작업과 b. 앱이 아닌 휴대폰 자체 기능(위치 정보 권한 물어보기 등)을
사용할 땐 `async/ await`를 사용한다 생각하면 편합니다
사용 할 땐 함수들을 감싸는 함수 선언 부 앞에`async` 사용하는 함수들 앞엔 `await` 입니다
✅다음 예시를 보시면 금방 이해가 됩니다
👀위도 경도
console.log()로 찍어본 locationData에는 위치 좌표가 들어 있습니다. 딕셔너리 안에 말이죠! 그럼 latitude, logtitude이 두 좌표는 다음과 같이 꺼낼 수 있을 것 같습니다.
[앱과 서버] 날씨 서버 외부 API - API 적용
[실습 ✍️] 날씨 API 사용 (2)
✅API 사용 API는 API를 만든 서버 개발자가 사용법을 정리해서 알려줍니다. 우리가 사용할 날씨 앱 API는 이 공식 문서에 설명서가 적혀 있습니다 https://openweathermap.org/api 서버가 제공하는 도메인 형식의 API를 사용하려면, 사용을 위한 도구가 필요합니다. 이를 axios 라고 부릅니다. > 도메인을 요청하는 코드를 사용할 수 있게 다음과 같이 설치를 진행합니다 (yarn키워드를 통해서 javascript도구를 설치! - 도메인을 인터넷 브라우저에 치는 것처럼 코드단에서 도와주는 도구)
yarn add axios
날씨 API 사용법에 따라 간단히 위도 경도만 주소에 넣어주면 날씨 데이터를 건네주는 API를 다음과 같이 준비해놨습니다.
(** `key` 값은 스파르타코딩 클럽에서 무료 버전으로 준비해놨습니다. API를 사용할 땐 API 제공 업체측에 가입을 한 다음 부여받은 키 값을 같이 줘야 하는 경우가 있습니다.)
주소에 바로 latityde랑 lonitude써쥬기...+ axios get함수!! 날씨 API 가 주는 데이터는 다음과 같이 엄청 깁니다 이 이후로도 엄청 길게있음,, 여기서 우린 필요한 데이터만 취하면 됩니다
API 공식문서를 보면 어떤 키값은 어떤 데이터를 뜻하는지 나와 있습니다. 찬찬히 읽어보면 어려울 것 없이 아! 이게 이거구나라고 아실거에요!
우린 딱 날씨와 현재 날씨 상태만 알면되므로, 다음과 같은 데이터를 찾아서 추려봤습니다. >>딕셔너리에서 특정값을 취하는 연습이 필요! 그럼 이 데이터를 가지고 MainPage.js 우측 하단에 표시해봅시다. 튜텨님 이거 찍으실때 더우셧네요...흐린날에...지금은 10.5도>_ㅇ코드 요까지 API사용준비끝!
컴포넌트에서 데이터를 다루게 되었고, 데이터 변경 시점에 따라 화면을 다시 그리니 날씨 데이터를 상태 관리 해야겠죠
[서버 리스] 서버를 사용만 하자! 서버리스(serverless)
서버리스(serverless)란? 서버리스란 이름 그대로 서버가 없다는건 아니구요! 서버를 직접 만들 필요가 없다는 정도로 이해하면 됩니다.
여러분들은 서버를 직접 구현, 구성 할 필요없이 필요한 서버 기능을 제공하는 곳에서, 서비스를 사용하기만 하면 됩니다.
앱 서비스에서 필요한 기능들 👀나만의 꿀팁 앱에서는 필요한 서버적 기능이 어떤게 있을까요? 1. 꿀팁을 서버로 부터 가져오기 ⇒ 왜 서버에서 가져와야 하나! 라고 생각을 해본다면, 반대로 서버로부터 가져오지 않을때를 생각해보면 명확합니다.
앱 내에 데이터로써 존재한다면, 꿀팁을 업데이트 하고 싶을때 어떻게 해야할까요? 앱을 항상 마켓에 재배포 해야하고, 사용자들은 항상 다시금 다운로드를 받아야 합니다. 너무 불편하죠?
그렇기 때문에 서버에 데이터를 저장해두고, API 형태로 불러와서 사용하면 실시간 업데이트 현황도 앱에 반영이 될거에요
2. 꿀팁 찜하기 ⇒ 꿀팁 찜하기 기능도 서버에서 관리를 해야합니다.
나만의 꿀팁 앱은 현재 로그인 로그아웃 기능이없지만, 여러분들이 다른 휴대폰에서 로그인 했을때 여러분의 데이터를 확인할 수 있으려면, 어디선가 관리되어야 해요! 그래야 사용자 데이터를 어디서든 관리하고 보여줄 수 있겠죠?
