TIL_220103

와 새해다! 실감이 안난다 우와~~
FireBase에 대해 배워봤다.

1.파이어베이스에 프로젝트 설정

2.VS코드 터미널에 expo install firebase 설치

3. firebaseConfig.js 파일을 하나 생성

4.databaseUrl에 본인 파이어베이스 주소 복붙

import firebase from "firebase/compat/app";

// 사용할 파이어베이스 서비스 주석을 해제합니다
//import "firebase/compat/auth";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
import "firebase/compat/storage";

// Initialize Firebase
//파이어베이스 사이트에서 봤던 연결정보를 여기에 가져옵니다
const firebaseConfig = {
  apiKey: "AIzaSyBKG2xY91x23W8PF1231k5OUJ5o9kHSKYQeNWUw",
  authDomain: "sparta-psytest-gun.firebaseapp.com",
  databaseURL: "여기에 본인의 주소 복붙",
  projectId: "sparta-psytest-gun",
  storageBucket: "sparta-psytest-gun.appspot.com",
  messagingSenderId: "781790378482",
  appId: "1:78179037128482:web:ddbca5330779f67b947136b",
  measurementId: "G-3F5L9F3340Q3"
};

//사용 방법입니다. 
//파이어베이스 연결에 혹시 오류가 있을 경우를 대비한 코드로 알아두면 됩니다.
if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database()

5.리얼타임 데이터베이스 생성 =>권한을 모두 공개

6.데이터를 서버에 올려서 관리

• (이제 앱에서 사용하는 데이터가 변경된다면, 우린 파이어베이스의 리얼타임 데이터베이스 내용만 바꾸기,
  그럼 앱을 다운 받은 사용자 모두에게 적용)
  

7. 전체 데이터 가져오기

• MainPage.js 맨 위 import

import {firebase_db} from "../firebaseConfig"

• 파이어베이스의 리얼타임 데이터베이스 전용 함수에 데이터 저장 위치를 알려주면서 데이터를 가져올 수 있음.
  👇파이어베이스 측에서 정해놓은 API 사용방법

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

• ref('/tip') 이 부분에서 /tip 영역에 가지고 오고 싶은 데이터의 주소를 넣어주기,(이 주소 앞부분에는 https://sparta-myhoneytip.firebaseio.com/ 과 같은 기본 주소가 생략)

8.idx 번호만 넘겨준다음 DetailPage.js 에서 idx로 상세 꿀팁 정보를 서버로부터 조회하도록 넘겨줌( 큰 데이터들은 무거워지니깐 )

card.js

export default function Card({content,navigation}){
    return(
        //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
        <TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage',{idx:content.idx})}}>
            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
            </View>
        </TouchableOpacity>
    )
}

9. 사용자 고유 ID

Expo는 개인이 만든 앱을 사용할 사용자들의 고유 아이디를 생성해서 알려줌. 이를 통해 사용자들마다 고유한 ID 값으로 데이터를 관리할 수 있음.

👇터미널에 설치

expo install expo-application

👇 js에 import 추가

import * as Application from 'expo-application';
const isIOS = Platform.OS === 'ios';

👇 js에 다음과 같이 추가

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)

10. 파이어베이스 저장 구현하기

디테일 페이지의 꿀팁 찜하기 버튼을 눌렀을 때 저장하도록 하기 위해
onPress={()=>like()}와 연결해준다.

<TouchableOpacity style={styles.button} onPress={()=>like()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>

    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/'+user_id+'/'+ tip.idx).set(tip,function(error){
             console.log(error)
             Alert.alert("찜 완료!")
         });
    }