React Native X Expo X 파이어 베이스 리얼타임 데이터 베이스 설정 및 조회, 추가, 삭제 기능 구현

리얼 타임 데이터 베이스란?

플랫폼과 실시간 데이터를 송신할 수 있는 기능이라고 생각하시면 됩니다

그리고 기능을 사용하기 위해서는 파이어 베이스가 가지고 있는 고유한 기능들을 사용하면

쉽게 데이터를 주고받을 수 있습니다

 

이전에 포스팅을 했던 파일 저장소 스토리지는 이미지 파일을 정장하는 것이라면

리얼 타임 데이터베이스는 JSON 데이터를 받아

파이어 베이스의 데이터베이스에 저장하게 됩니다

 

두 가지의 기능의 차이점을 기억하시고

이제 리얼 데이터베이스를 생성하도록 하겠습니다

 

 

이전 포스팅에서 firebaseConfig.js 파일 생성한 것 기억하시나요?

 

 

2022.07.05 - [Server/Firebase] - React Native X Expo X 구글 파이어 베이스 서버 구축, 기본 세팅하기

React Native X Expo X 구글 파이어 베이스 서버 구축, 기본 셋팅하기

 

한번 확인해보시고 그럼 계속 진행하겠습니다

 

 

 firebaseConfig.js를 생성하셨으면

아래의 url 주소를 복사하셔서

firebaseConfig의 databaseURL에 value 값으로 지정해주시면 됩니다

 

리얼 타임 데이터 베이스 생성 #1

 

 

그럼 데이터 베이스에 데이터를 업로드를 한번 해보겠습니다.

이 방법은 파이어 베이스에서 직접 데이터를 업로드하는 방식입니다.

JSON 파일로 업로드가 가능하기 때문에

JSON 파일로 데이터를 만들어 놓았다면 쉽게 업로드는 하실 수 있을 겁니다.

 

오른쪽 상단 토글 아이콘을 선택하면 

JSON 데이터 불러오기라는 항목이 노출됩니다

 

 

리얼 타임 데이터 베이스 생성 #2

 

 

like라는 하위 경로에 데이터를 넣을지 아니면 최상위 경로에 넣을지도 정할 수 있습니다.

상위 경로로 이동하려면 아래의 파란색 블록으로 되어있는 url를 클릭하시면

이동이 가능합니다.

 

 

JSON 가져오기를 클릭하면 내 컴퓨터 내에서. JSON 파일을 업로드할 수 있는 창이 활성화됩니다.

 

 

 

리얼 타임 데이터 베이스 생성 #3

 

 

아래와 같이 창이 활성화되면 JSON 파일 업로드를 할 수 있습니다.

데이터 위치도 확인할 수 있어요!!

 

 

리얼 타임 데이터 베이스 생성 #4

 

 

저는 tip에 데이터를 넣었습니다.

그래서 아래와 같이 데이터가 구성이 되었네요

 

그럼 아래의 데이터를 읽어오는 방법을 구현해보겠습니다.

 

데이터 구조

 

 

Firebase 리얼 타임 데이터 베이스 Total Data Read. once() 함수 활용

 

ref()는 api통신을 할 수 있는 url 주소를 인자 값으로 받는다

그러면 통신이 이루어지고 특정 함수를 통해 데이터를 추가, 수정, 삭제를 할 수 있다

 

처음 databaseURL에 할당했던 url 주소가 기본 주소로 할당되어있어

전체 주소를 할당하지 않아도 됩니다

 

. then()은 자바스크립트의 api 통신 후 받은 데이터를 핸들링할 때 사용합니다.

 

아래의 함수는 파이어 베이스에서 데이터를 조회하기 위해

만들어 놓은 함수이기 때문에 그 규칙에 맞게 사용하면 되겠습니다.

공식문서에 맞게 사용하시면 됩니다.

 

snapshot이라는 변수명으로. val()를 사용하여 데이터를 리턴해올 수 있습니다.

그리고 그 데이터를 tip에 넣는 작업을 진행한 것입니다.

 

/tip이라는 경로에 있는 전체 데이터를 가져오게 되며

/tip/0이라는 경로에 있는 전체 데이터를 가져오게 된다는 의미는 위의 글과 같습니다

하지만 우리가 0에는 한 개의 데이터만 넣게 된다면

한개의 데이터만 읽어 올 수 있게 됩니다

 

그래서 데이터 구조의 요건을 어떻게 정립하는지가 더 중요할 수 있습니다

 

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

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

 

 

Firebase 리얼 타임 데이터 베이스 Save Data. set() 함수 활용

 

/like라는 곳에 데이터를 저장하려 합니다

저장할 때 사용하는 함수. set()입니다

 

내가 좋아하는 페이지를 저장하기 위해서는 누가, 무엇을 저장하는지에 대한 데이터가 필요합니다

유저의 유니크 아이디는 expo에서 제공하는 휴대폰 디바이스의 고유 키값을 사용합니다

그것을 활용하여 유저를 구분하는 인식 값으로 사용할 수 있습니다

 

유니크한 키값과 페이지의 시퀀스 넘버를 url경로로 지정하면 

아래와 같이 사용할 수 있습니다

 

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
}

firebase_db.ref('/like/'+userUniqueId+'/'+ tip.idx).set(tip,function(error){
    Alert.alert("찜 완료!")
});

 

 

 

파이어 베이스 플랫폼의 리얼 타임 데이터 베이스에 저장한 목록을 볼 수 있습니다

 

 

데이터 저장 현황

 

Firebase 리얼 타임 데이터 베이스 Delete Data. remove() 함수 활용

 

삭제할 데이터의 시퀀스 번호와 누구의 정보를 삭제할 것인지에 대한 유니크한 키값을 

url로 지정하여. remove() 함수를 통해 데이터를 삭제합니다.

 

삭제가 성공적으로 되었다면 

실시간으로 목록이 없어져야 합니다.

 

이때. ref(). once()함수를 사용하여 재조회를 해도 되지만

다시 조회한다면, 부하를 받을 수 있기 때문에 이렇게 처리하는 것이 좋을 수도 있습니다.

목록에 데이터 구조가 복잡하거나 부하가 되지 않는 상황이라면 구지 할 필요는 없을 것 같습니다.

 

아무튼 내부에서 자바 스크립터 filter를 활용하여 목록을 추출할 수 있습니다.

api를 호출하지 않고 목록에서 추가 삭제할 수 있다는 것만은 기억합시다.

 

const remove = async (cidx) => {
    let userUniqueId;
    
    if(isIOS){
        let iosId = await Application.getIosIdForVendorAsync();
          userUniqueId = iosId
    }else{
          userUniqueId = await Application.androidId
    }

    firebase_db
        .ref('/like/'+userUniqueId+'/'+cidx)
        .remove()
        .then(() => {
            Alert.alert("삭제 완료");
            let result = tip.filter((data,i)=>{
              return data.idx !== cidx
            })
            console.log(result)
            setTip(result)
    })
}

 

 

이것으로 파이어 베이스 세팅과 기능 구현을 끝이 났습니다.

파이어 베이스만 이러한 기능들을 구현하고 있고

다른 데이터 관리 툴들은 또 다른 기능들을 가지고 있습니다

여러 툴을 사용해야만 한다면 공부는 필수 겠지요!

 

오늘도 이렇게 포스팅을 마치며 한걸음 나아갑니다

 

언제나 그렇듯 힘들도 지치지만 힘내세요

아직 모험은 끝이 나지 않았으니까요!!