Firebase

이번 4주차에는 데이터를 관리하고 사용자들에게 데이터를 보여주는 방법을 배웠다.
서버를 직접 구축하지 않아도 서버를 사용할 수 있는 서버리스인 파이어베이스를 사용해 보았다.

1. 앱과 서버의 동작

① 서버에 정한 규칙(API)에 따라 데이터를 요청(Request) 한다.
② 요청을 하면 서버에서 응답(Response) 한다.(규칙에 따르지 않으면 응답하지 않는다.)

• API : 서버 쪽에서 정한 규칙

규칙의 형태는 **서버가 제공하는 도메인** 이나
www.sparta.com/getdata <-- 데이터 조회 API
www.sparta.com/setData <-- 데이터 저장 API

**서버가 만들어놓은 함수** 가 규칙일 수도 있다.
db.ref('/like/').on('value') <-- 데이터 조회 API
db.ref('/like/').set(new_like); <-- 데이터 저장 API

1-1. JSON

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

• 리스트와 딕셔너리의 복합 구조로 이루어져있다.

  { data: {
      result: { 
          id: 0,
          name: 'seoyeon'
      }
  }}

1-2. 데이터를 준비하는 시점

① 앱이 화면에 그려진 후 데이터 준비

• useEffect에 서버 측에서 제공해주는 API를 이용해 데이터를 준비한다.

  useEffect(()=>{
    //서버 API 사용
    //이 화면에서 사용 할 데이터 준비 등... 
  },[])

② 사용자가 버튼 클릭 시

• 예를 들어 꿀팁 앱에서는 '찜하기'버튼을 클릭했을 때 데이터를 저장한다.

2. 날씨 API 사용하기

2-1. 위치 정보 접근 허용

• expo-location을 통해서 위치 정보를 가져올 때 사용자들에게 허용 여부를 물어본다.

    import * as Location from "expo-location";

2-2. 외부 API 요청 작업

• try/catch를 사용해 API 에러 처리를 방지한다.
• try{} 부분에는 API 요청 코드를, catch{} 부분에는 에러가 발생했을 때 실행할 코드를 작성한다.

    try {
        await Location.requestPermissionsAsync();
        const locationData= await Location.getCurrentPositionAsync();
        console.log(locationData)
    } catch (error) {
        Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껐다 켜볼까요?");
    }

2-3. 함수의 실행 순서

• 외부 API를 호출하거나 휴대폰 기기에 대한 정보에 접근할 때 사용한다.
• 위와 같은 작업들을 할 때 실행 순서를 알 수 없기 때문에 순서를 고정하기 위해서 사용한다.
• aysnc는 함수를 감싸는 함수 선언부 앞에, await는 사용할 함수 앞에 작성한다.

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

2-4. 위도와 경도 가져오기

• 먼저 console.log()로 위치 좌표를 가지고 있는 locationData를 찍어본다.
• 딕셔너리 안에 있는 latitude, logtitude 좌표를 가져온다.
  

2-5. axios

• 서버가 제공하는 도메인 API를 사용하기 위해선 axios를 사용한다.

    const result = await axios.get(
       `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    );

3. 서버리스(serverless)

: 서버리스는 서버를 직접 만들지 않고 필요한 서버 기능을 제공하는 곳이다.

3-1. firebase 연결하기

• firebase 사이트의 연결정보를 작성한다.

    var firebaseConfig = {
      apiKey: "AIzaSyADkaNWYGIU4844QkbpexDi_RDWqEhSUHU",
      authDomain: "sparta-myhoneytip-sykim.firebaseapp.com",
      projectId: "sparta-myhoneytip-sykim",
      storageBucket: "sparta-myhoneytip-sykim.appspot.com",
      messagingSenderId: "588256993727",
      appId: "1:588256993727:web:22487649ff0ffec978410a",
      measurementId: "G-8S0GW7NYK3"
    };

3-2. 파일 스토리지(storge)

• firebase의 파일 스토리지는 이미지나 사용할 파일들을 올려두고 꺼내쓰는 파일 저장소이다.
  

3-3. 리얼타임 데이터베이스(Realtime Database)

• JSON 형태로 저장되고 관리되는 데이터베이스이다.
• firebase에서 제공하는 함수를 이용해 데이터를 저장/수정/삭제한다.
• 이미지는 파일 스토리지에서, JSON 데이터는 리얼타임 데이터베이스에서 사용된다.

4. 리얼타임 데이터베이스

4-1. 전체 데이터 읽기

① 리얼타임 데이터베이스를 생성하고 난 후 고유한 DB주소를 갖게된다.

https://sparta-myhoneytip-sykim-default-rtdb.firebaseio.com/

② DB주소에 데이터 저장 위치를 알려주어 데이터를 가져온다.

• tip이란 방에 꿀팁들이 저장된다.

  https://sparta-myhoneytip-sykim-default-rtdb.firebaseio.com/tip

③ 'ref('/tip')'부분에서 가지고 올 데이터의 주소를 넣는다.

• tip의 앞 주소는 'https://sparta-myhoneytip-sykim-default-rtdb.firebaseio.com/'와 같은 기본 주소가 생략되어 있다.
• 필요한 데이터를 snapshot.val()로 필요한 데이터를 가져와 변수에 담는다.

    firebase_db.ref('/tip').once('value').then((snapshot) => {
        let tip = snapshot.val();
    });

4-2. 특정 데이터 읽기

• 전체 데이터를 상세 페이지로 넘겨주지 않고 index 번호만 넘겨 서버로부터 조회하고 데이터를 뿌려준다.
• 변경된 데이터가 항상 반영되는 데이터베이스에서 가져와야 하는데 전체 데이터 같이 큰 데이터를 이동하게 되면 앱이 무거워진다.
• 그렇기 때문에 'ref('/tip/'+idx)'에서 index 번호만 넘겨서 필요한 데이터를 서버로부터 가져온다.

  const { idx } = route.params;
      firebase_db.ref('/tip/'+idx).once('value').then((snapshot) => {
          let tip = snapshot.val();
          setTip(tip)
  });

4-3. 데이터 저장(쓰기)

• 꿀팁 앱에서 firebase에 데이터를 보내 저장할 때는 꿀팁 찜이라는 버튼을 눌렀을 때이다.
• 사용자가 선택한 꿀팁을 저장하고, 찜한 꿀팁을 보여주는 페이지에서 나열하려면 데이터를 저장해야 한다.
• 사용자마다 고유한 정보들을 구분하여 저장하기 위해서는 사용자 고유의 ID값이 필요하다.
• 'expo-constants'를 이용해 앱에서 사용자들의 고유 ID를 생성하고 데이터를 관리한다.

  import Constants from 'expo-constants';

  const user_id = Constants.installationId;

• ''/like/'+user_id+'/'+ tip.idx'부분은 데이터가 저장될 경로를 저장한다.
• 찜 데이터 방 / 사용자 방 / 어떤 찜인지 아이디
• '.set()'부분의 첫 번째 인자는 저장할 데이터, 두 번째 인자로는 에러 발생 시 처리할 함수를 작성한다.

    const like = () => {
        const user_id = Constants.installationId;
        firebase_db.ref('/like/'+user_id+'/'+ tip.idx).set(tip,function(error){
            console.log(error)
            Alert.alert("찜 완료!")
        });
    }

4-4. 데이터 삭제

• 꿀팁을 모아놓은 페이지에서 찜 해제 버튼을 누르면 firebase 데이터베이스에서도 삭제된다.
• ''/like/'+user_id+'/'+content.idx'부분은 데이터를 삭제할 경로를 작성한다.
• 해당 경로에 remove()를 호출하여 데이터를 삭제한다.
• remove()의 실행이 끝나면 then()dl 호출되고, function()을 실행한다.

    firebase_db.ref('/like/'+user_id+'/'+content.idx).remove().then(function(){
        Alert.alert("삭제 완료");
        navigation.navigate('LikePage')
    })