날씨 서버 외부 API
우리 앱에서의 서버가 정한 규칙에 따라 요청을 하지 않으면 응답 (Response)이 오지 않는다
서버 쪽에서 정한 규칙을 우린 보통API(Application Programming Interface)라고 부른다
1)서버가 제공하는 도메인 사용 www.sparta.com/getdata ←- 데이터 조회 API www.sparta.com/setData ←- 데이터 저장 API
2)서버가 만들어놓은 함수 사용 db.ref('/like/').on('value') ←- 데이터 조회 API db.ref('/like/').set(new_like); <-- 데이터 저장 API
- useEffect
앱 화면을 보자마자 실행되야 하는 작업들이 모여 있는 곳
useEffect(()=>{ //서버 API 사용 //이 화면에서 사용 할 데이터 준비 },[])
- 앱 위치 정보 권한 설정
expo 에서 제공하는 도구 사용
- expo install expo-locationtry/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
- 함수 실행 순서를 정해주는 async / await
const func = async function(){ await func01() await func02() }
const func = async () => { await func01() await func02() }
async function func(){ await func01() await func02() }
-날씨API사용
API는 API를 만든 서버 개발자가 사용법을 정리해서 알려줌
외부도구 설치 yarn add axios
const temp = result.data.main.temp; const condition = result.data.weather[0].main
API를 사용할때는 API제공 업체측에 회원가입 후 부여받은 API키값을 같이 줘야하는 경우도 있다고 함.
const [weather, setWeather] = useState({ temp : 0, condition : '' }) 컨포넌트에서 날씨 데이터를 다루게 되었으니 데이터 변경 시점에 따라 화면을 다시 그리기 위해서 날씨데이터를 상태 관리 할수있게 적용!```
파이어베이스(firebase)
파이어베이스는 구글에서 만든 서버에 대한 지식이 깊지 않아도 서버적인 기능들을
사용할 수 있게 도와주는 서비스
- 서버리스?(serverless)
서버를 직접 구현, 구성 할 필요없이
필요한 서버 기능을 제공하는 곳에서 서비스를 사용
-파이어베이스 프로젝트 생성
1)가입하기구글에 가입되어 있고 로그인 되어 있다면
파이어베이스 홈페이지 화면에 시작하기가 바로 뜸
2) 프로젝트 생성
생성 할 프로젝트 이름을 정하여 기입
현재 작업중인 앱 이름 그대로 가는것이 편리하다고함
3)사용 할 파이어베이스 서비스 활성화
-앱 연동 및 파일 스토리지 사용
1)파이어베이스 프로젝트 내에서 앱 생성하기안드로이드, iOS 앱 전용 개발을 Expo에서 따로 하고 있지 않고 자바스크립트로만 개발을 하고 있기 때문에 웹 SDK를 이용하면 쉽게 파이어베이스 사용 가능
호스팅 설정은 체크 X 저장위치 asia
2)파일 저장소 스토리지(storage)
파일 저장소 생성 -> 파이어베이스 사이트 왼쪽 콘솔창에서 storage클릭 후 시작하기
새로운 파일 생성해서 이미지를 업로드만 해줘도 바로 주소가 제공됨
끝
vscod에서 외부에 저장 된 이미지를 주소로 불러올때 사용할수있음
리얼타임 데이터베이스 -설정
리스트, 딕셔너리 구조, 즉 JSON 형태로 저장/관리되는 데이터베이스 서비스
파이어베이스에서 제공해주는 함수들을 이용하기만 하면 데이터 저장/수정/삭제가 가능
리얼타임 데이터베이스인 이유는, 플랫폼과 실시간 데이터 주고 받는 것에 특화되어있어서임.
이미지 저장 → 파일 저장소 스토리지
JSON 데이터 → 리얼 타임 데이터베이스
파이어베이스 사이트 좌측에 리얼타임 테이터베이스를 클릭 후 생성 설정하게 되면
나만의 저장소 주소를 가지게됨 , vscode에서 data.json 안에있는 데이터를
데이터 가져오기를 통해 업로드 할수있고
가져온 데이터는 리얼타임 테이터베이스 안에 보관하며 수정도 가능하다
리얼타임 데이터베이스 - 전체 데이터 읽기
전체 데이터를 가지고 오려면 리얼타임 데이터베이스(집 주소) 안에 구체적인 방 (tip) 을 가리켜야함.
- 파이어베이스 API함수 찾기
실시간 데이터베이스 화면 상태에서 오른쪽 상단에 문서 모양 또는 문서텍스트를 클릭 후
드래그해서 아래로 내리면 참조 문서 에서 원하는 API주소를 찾아서 사용할수 있다
//방안에 들어 있는 전체 데이타 조회 함수
//ref('/tip') 이 부분에서 /tip 영역에 가지고 오고 싶은 데이터의 주소를 넣어주면 됨
//firebaseConfig.js에서 이미 파이어베이스 계정을 세팅했기 때문에,기본 주소와 정보들은 앱 내에서 사용하는 파이어베이스 함수들이 알고 있음으로 기본주소는 생략되어있다
firebase_db.ref('/tip').once('value').then((snapshot) => {
let tip = snapshot.val();
})
```!)서버리스를 이용하여 데이터베이스를 조회하기 위해,파이어베이스 측에서 정해놓은 API 사용방법
firebase_db.ref('/tip').once('value').then((snapshot) => {})
조회한 데이터는 snapshot 부분에 담겨서 {} 내부에서 사용할 수 있는데, 그 중 실제 우리에게 필요한 데이터는 snapshot.val()로 가져와 변수에 담아 사용할 수 있다.
리얼타임 데이터베이스 - 특정 데이터 읽기
특정 데이터 읽기를 하려면 이해는 간단하다 리얼타임 데이터베이스(집)에속한 tip(방)안에 또 다른 방(idx)번호를 적어주면 특정 데이터를 집어낼수있다.
const { idx } = route.params;
firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {
let tip = snapshot.val();
setTip(tip)('/tip/'+idx) 방 안에 방
리얼타임 데이터베이스 - 쓰기
사용자마다 고유한 정보들을 관리하려면, 사용자 고유 ID 값 정도의 데이터가 필요합니다.
Expo는 만든 앱을 사용할 사용자들의 고유 아이디를 생성해서 알려줌. 이를 통해 사용자들마다 고유한 ID 값으로 데이터를 관리할 수 있다.
expo install expo-application
import * as Application from 'expo-application'; const isIOS = Platform.OS === 'ios'; let uniqueId; if(isIOS){ let iosId = await Application.getIosIdForVendorAsync(); uniqueId = iosId }else{ uniqueId = Application.androidId } console.log(uniqueId)
- 리얼타임 데이터베이스 에서 저장 할 딕셔너리
리얼타임 데이터베이스는 딕셔너리 구조의 데이터, 즉 JSON 형태로 관리 되기 때문에, 우리가 저장할 때도 이에 맞게 딕셔너리 구조로 저장해야한다.
const [tip, setTip] = useState({
"idx":9,
"category":"재테크",
"title":"렌탈 서비스 금액 비교해보기",
"image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
"desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
"date":"2020.09.09"
})
//넘어온 데이터는 route.params에 들어 있습니다.
const { idx } = route.params;
firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {
let tip = snapshot.val();
setTip(tip)
});- 사용자 고유아이디 생성
위에서 설치한 expo-application 를 이용해 사용자 고유 아이디를 생성함
import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';- 리얼타임 데이터베이스 저장 함수
파이어베이스 공식 문서 사용법 그대로 리얼타임 데이터 베이스에 저장하게 해주는 함수를 사용
const like = async () => {
// like 방 안에
// 특정 사용자 방안에
// 특정 찜 데이터 아이디 방안에
// 특정 찜 데이터 몽땅 저장!
// 찜 데이터 방 > 사용자 방 > 어떤 찜인지 아이디
let userUniqueId;
if(isIOS){
let iosId = await Application.getIosIdForVendorAsync();
userUniqueId = iosId
}else{
userUniqueId = await Application.androidId
}
console.log(userUniqueId)
firebase_db.ref('/like/'+userUniqueId+'/'+ tip.idx).set(tip,function(error){
console.log(error)
Alert.alert("찜 완료!")
});
}'/like/'+userUniqueId+'/'+ tip.idx ->데이터가 저장될 경로를 결정함
.set() 부분 첫 번째 인자로는, 저장할 데이터(tip 상태)를
두 번째 인자로는 혹시 에러가 발생하면 나중에 처리 할 함수를 둡니다.
끝.
4주차 쉬운듯 쉽지않음 역시.
숙제도 장난아님.
나도 장난아님.
때려칠까.
숙제해설 보고 숙제를 어영부영... 완성한 이후
파이어베이스에서 데이터 가져왔습니다 !!
빠릿빠릿 하구만.. 귀여워 (헥헥) 달려있음 더 좋겠네
헥헥
자라나라 새싹새싹