[스파르타코딩클럽/앱개발종합반] 4주차_API, 파이어베이스(firebase)

3주차까지 화면을 그리는 Frontend 에 대해 배웠다면

이제 데이터를 관리하고, 서버에서 보여주는 방법에 대해 배우자 !

---

앱에 모든 데이터를 담을 순 없다. (앱 용량, 데이터의 문제)

서버(= 데이터가 담긴 곳)에서 데이터를 가져오고, 데이터를 변경할 수 있다.

 

파이어베이스(Firebase) : 대표적 서버리스(serverless)

 

앱에서 서버에 데이터를 요청하거나 데이터를 보내는 대화를 하려면 서버가 정한 규칙에 따라 

대화 요청 (Request)을 해야한다.

정한 규칙에 따라 요청을 하지 않으면 응답(Response)이 오지 않는다.

 

서버 쪽에서 정한 규칙 = API(Application Programming Interface)

1. 서버가 제공하는 도메인

2. 서버가 만들어 놓은 함수를 그냥 이용

 

서버에서 주는 데이터 형식 :JSON

 

useEffect : 앱 화면을 보자마자 실행되야 하는 작업들이 모여있는 곳

useEffect (()=>{

},[])

 

!날씨 API를 사용하여 현재 위치 날씨 온도를 나타내자!

expo install expo-location

위치 정보를 가져올 때 허용을 묻는 팝업을 본적이 있다.

그것이 expo-location으로 구현한 것

 

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

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

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

 

• 파이어베이스(Firebase)

 

파이어베이스 프로젝트를 생성한다.

 

사용할 파이어베이스 서비스: 리얼타임 데이터베이스

JSON 데이터 -> 리얼 타임 데이터베이스

 

 

데이터 업로드 (JSON 가져오기)

data.json 데이터들과 동일하게 불러와졌다.

 

MainPage.js에 적용하기

import {firebase_db} from "../firebaseConfig"

firebase_db.ref('/tip').once('value').then((snapshot) => {
	console.log("파이어베이스에서 데이터 가져왔어요.")
    let tip = snapshot.val();
    setState(tip)
    setCateState(tip)
    getLocation()
    setReady(false)
   
});

기존에 사용했던 data.json 구조와 완전히 동일한 데이터를 리얼타임 데이터베이스에 업로드하여 그대로 사용하기 때문에

파이어베이스 데이터를 넣으면 앱이 정상적으로 동작한다.

 

+달라진 점

useEffect에서 setTimeout 함수를 더이상 사용하지 않는다.

파이어베이스(서버)로부터 데이터를 가져와 준비할 때까지 로딩 화면을 보여줬다가,

데이터가 준비되면 실제 화면을 보여주는 환경이다.

 

앱에서 데이터를 저장해야 하는 상황

->사용자가 저장하기 버튼을 눌렀을 때

 

사용자마다 고유한 정보들을 관리하려면, 사용자 고유 ID 값 정도의 데이터가 필요하다. (구분을 위해)

expo install expo-constants

import Constants from 'expo-constants';
console.log(Constants.installationId)

 

Expo는 사용자들의 고유 아이디를 생성해서 알려줘, 사용자들마다 고유한 ID값으로 데이터를 관리할 수 있다.

expo install expo-application

 

• 파이어베이스 저장 구현하기

디테일 페이지에서 저장하기 버튼을 눌렀을 때 저장해야 한다.

 

'/like/' + user_id + '/' + tip.idx 이 부분이 데이터가 저장될 경로

찜 데이터 방 > 사용자 방 > 방 id(어떤 찜인지)

순으로 방에 들어가는 구조

 

사용자마다 찜하는 데이터가 다르기 때문에

사용자 고유아이디를 생성해야 한다.

expo-constants를 이용해 사용자 고유 아이디를 생성한다.

const user_id = Constant.installationId;

 

---

데이터베이스는 딕셔너리 구조의 데이터(JSON형태)로 관리되기 때문에

저장할 때도 딕셔너리 구조로 저장해야 한다.

 

찜완료 클릭 > 저장된 찜데이터 목록 db

 

저장 목록에 자세히보기&찜 해제 버튼 만들기

자세히보기 클릭 > 디테일 페이지로 구현 / 찜 해제 버튼 > 저장하기 목록에서 데이터 사라짐

 

 

4주차도 끝~

이제 배포준비!