[JAVASCRIPT 공부일지] 4주차 - 4 (리얼타임 데이터베이스 - Realtime Database)

파이어베이스에서 제공하고있는 Realtime Database(리얼타임 데이터베이스) 에 대해서 공부해보겠습니다.

---

<리얼타임 데이터베이스 -  특정 데이터 읽기>

만약 어떠한 컨텐츠를 누르면 특정 페이지로 넘어가는 기능을 구현하고자할떄
그 컨텐츠에 담긴 모든 데이터를 특정 페이지로 넘기게 될 수 있습니다. 하지만 이러한 방식은 모든 상세 데이터를 넘기는 것이므로 느려지거나 무거울 수 있습니다. 
예를 들어 인스타그램이나 페이스북처럼 실시간으로 댓글이 달리고 수정되는 서비스에서 모든 상세 데이터를 특정 페이지에 넘긴다고했을때 문제가 될 수 있는 것입니다. 댓글같은 경우엔 실시간으로 데이터가 변경될 수도 있기 때문입니다.

이를 개선하여
그 컨텐츠의 인덱스를 조회해서 그 인덱스에 해당하는 컨텐츠를 누를때마다 최신 데이터를 가져오게 해야합니다.

실습)
data.json에는 idx:1 처럼 인덱스 번호가 붙어있는데,
3을 호출하면 3에 대해 파이어베이스에서 최신데이터를 불러오게끔 만드는 것이 개선사항일 것입니다.

1. A페이지 컨텐츠에서 B페이지에 전달데이터로 (idx) 넘겨주기 (인덱스 넘겨주기)

2. B페이지에서는 넘겨받은 (idx)의 상세 데이터 조회하기

기존에는 export default function 부분에서 
navigation >> content를 모두 넘겼었는데

개선하여
idx:content.idx 
// 컨텐츠에서 인덱스만 넘겨줄 수 있습니다.
// 실제 상세 데이터의 번호만 넘겨줄 수 있습니다.

B페이지에서 이 인덱스를 받아 실제 Firebase에서 맞는 데이터를 실시간 데이터를 조회해서 가져오게됩니다.

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

// 기존 '/tip/' -->> /tip/idx 로 개선
// 인덱스 번호를 꺼내서 가져오고 있는 것입니다.

>> 리얼타임 데이터베이스에 접속하여 실제 인덱스 값을 눌러보면 주소가 바뀌는 것을 확인할 수 있습니다.

---

<리얼타임 데이터베이스 - 쓰기>

- 데이터를 조회하는 것만이 아닌 데이터를 수정할 수 있는 것을 배워보려고합니다.
- 장바구니나 위시리스트 등의 기능을 구현하고자할때는 사용자가 그 버튼을 눌렀을때 리얼타임 데이터베이스에 그 사용자가 찜한 데이터만 보여주어야합니다.

1. 앱에서 파이어베이스로 데이터를 보내 저장하는 상황은 찜하기 or 장바구니 버튼을 눌렀을때 일 것입니다.
>> 파이어베이스에 어떤 식으로 저장해야할지 생각해봐야합니다.

기존 데이터인 data.json을 보면

인덱스 번호 idx
이미지 image
제목 title
내용 desc

등의 구조로 저장되어있는데
이 4가지를 활용해서 구조를 짤 수 있습니다.

2. 특정 사용자 인식?
데이터베이스에 특정 사용자가 누를때마다 사용자들의 데이터가 쌓일겁니다.
이때마다 사용자마다의 고유한 정보들을 관리하려면 사용자 고유 ID값정도의 데이터가 필요합니다.

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

expo-application 공식문서에 들어가보시면
>> https://docs.expo.dev/versions/latest/sdk/application/#api

expo install expo-application

설치 후 최상단에 import 시킵니다.

import * as Application from 'expo-application';

그리고 react-Native로부터 import꺼내올때 Platform 이라는 것도 있었는데, 여기서 OS 또한 꺼내올 것입니다.

import React,{useState,useEffect} from 'react';
// 여기서의 Platform
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share,Platform } from 'react-native';
import * as Linking from 'expo-linking';
import {firebase_db} from "../firebaseConfig";
import * as Application from 'expo-application';

// Platform에서 OS꺼내기
const isIOS = Platform.OS === 'ios';

 

여기서 OS는 어떤 디바이스 운영체제에서 실행되고 있는지 알아낼 수 있는 도구입니다.

OS가 중요한 이유?
: 리액트 네이티브 개발하면서 자바스크립트 문법 하나로 개발을 하지만
안드로이드나 ios운영체제에 맞게 화면크기나 조건처리할 필요가 있는데, 그때마다 고유번호를 갖고오는 방식이 다르기 떄문에 사용해야합니다.

>> Platform.OS === 'ios'; 
처럼 삼항연산자로 ios인지 검사하고 맞으면 isIOS 변수에 true가 담기고 아니면 false가 담길 것입니다.

그다음에 if(isIOS) 만약 애플폰이면 

let uniqueId;
if(isIOS){
  let iosId = await Application.getIosIdForVendorAsync();
  uniqueId = iosId
}else{
  uniqueId = Application.androidId
}

console.log(uniqueId)

처럼 조건처리를 하는 것입니다.

3. 찜하기 버튼을 눌렀을때 
>> onPress로 popup()만 뜨게 하는 것이 아닌 파이어베이스 기능을 추가하면 됩니다.
>> 파이어베이스에 데이터를 전송하는 함수가 필요합니다.
>> onPress에 외부함수 연결하기.

4. onPress에 외부함수 연결
onPress에 like() 함수를 실행하게끔 한다음 like()함수를 만들어줍니다.

// 이 함수 자체를
const like = async () => {
	console.log(userUniqueId)
       firebase_db.ref('/like/'+userUniqueId+'/'+ tip.idx).set(tip,function(error){
             console.log(error)
             Alert.alert("찜 완료!")
         });
} 

// 유저의 공간을 만들어서 tip.idx방을 만들어서 저장을 할 것이라는 의미입니다.
// like 안에 userUniqueID 안에 tip.idx 에 저장을 하는 것입니다.

set함수를 이용해서 첫번쨰 인자로 어떤것을 넘길 것인지 작성해줍니다. -->> set(tip,function~~~)

여기서 set(tip,function)는 중복을 제거해주는 함수이기때문에 동일 데이터를 계속 찜하기 했을때
동일데이터가 쌓이는 것이 아닌 단 하나의 고유 데이터만 쌓이게끔 만들어주는 것입니다.

---

<실습>

<Like 페이지 구현>

1) LikePage에 찜데이터 모두 리스트화시키기
2) Like 안에 user_id 공간을 새로 만들어서 가져오기
3) 만약 찜한 데이터가 없을때는 조회하고자 할때 에러가 생길수있으므로 예외처리 필요
>> 데이터가 없는 상황에서 오류가 나는 것이므로 분기처리가 필요
>> 데이터를 가져와 if(tip.length) 로 데이터 리스트의 길이를 분석하여 리스트의 길이가 '0' 이면 로딩화면으로 처리하는 조건문 

if(tip.length){
	setTip(tip)
    setReady(false)
}

4) 찜 해제하기 기능 => Firebase 공식문서의 'remove' 함수에 대한 것을 구현할 수 있습니다.

정리하자면,

1) 찜 해제 버튼에 remove 함수를 만들어 연결
2) remove 함수 구현
3) 파이어베이스 삭제 함수에 경로 삽입
>>'/like/'+userUniqueId+'/'+content.idx
4) 저장 완료 후 navigation.navigate('LikePage') 로 새로고쳐진 페이지 데이터 구현

LikePage.js 전체코드

import React,{useState, useEffect} from 'react';
import {ScrollView, Text, StyleSheet,Platform} from 'react-native';
import LikeCard from '../components/LikeCard';
import Loading from '../components/Loading';
import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';
import {firebase_db} from "../firebaseConfig"

export default function LikePage({navigation,route}){
    
    const [tip, setTip] = useState([])

    const [ready,setReady] = useState(true)
 
    useEffect(()=>{
        navigation.setOptions({
            title:'프로젝트 제목'
        })
        getLike() // getLike()버튼 = 찜하기 버튼을 함수 작성
    },[])

    const getLike = async () => { // getLike함수는 async함수로 구현
        let userUniqueId; // user의 고유한 아이디를 가져올 변수 선언
        if(isIOS){ // 만약 이 플랫폼이 ios이면 
        let iosId = await Application.getIosIdForVendorAsync(); // ios에 고유키값을 담는 ios전용 코드
            userUniqueId = iosId // 그 후 userUniqueId (유저의 고유아이디) 를 iosId로 최신화 시킨다.
        }else{ // 만약 이 플랫폼이 android이면
            userUniqueId = await Application.androidId // 안드로이드의 고유키값을 가져오는 이 코드를 사용
        }

        console.log(userUniqueId) // 콘솔창에 user의 고유키값을 표시하도록 하고,
        firebase_db.ref('/like/'+userUniqueId).once('value').then((snapshot) => {
            console.log("파이어베이스에서 데이터 가져왔습니다!!")
            let tip = snapshot.val();
            let tip_list = Object.values(tip)

            if(tip_list && tip_list.length > 0){
                // 즉 데이터가 있을때만 상태변경을하여 화면을 다시 그립니다.
                // 가져온 데이터는 setTip함수를 통해 새롭게 업데이트 시킴
                setTip(tip_list)
                setReady(false)
            }
            
        })
    }

    return (
        <ScrollView style={styles.container}>
           {
               tip.map((content,i)=>{
                   return(<LikeCard key={i} content={content} navigation={navigation} tip={tip} setTip={setTip}/>)
               })
           }
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:"#fff"
    }
})

---

다음 공부일지에서는 수익성 앱에 광고를 넣는 과정을 공부해보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.