Firebase

특징

구글에서 만든 서버리스(Serverless) 서비스

Serverless
서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻!
필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다.

생성 및 설정

프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다.
앱 생성은 현재 개발중인 앱과 연동을 위해 필요한 작업이다.
이미지 저장은 파일 저장소에, JSON 데이터 관리는 리얼타임 데이터베이스에서 하기 때문에, 각각 생성해야한다!

앱 생성

Firebase 가입 -> 프로젝트 생성 -> 프로젝트 내에서 앱 생성(React-native, expo는 웹 앱) ->
"웹 앱에 Firebase 추가"(Firebase 호스팅은 선택 X!) -> 프로젝트 설정 페이지에서 SDK 확인

파일 저장소 생성(Storage)

좌측 메뉴의 Storage -> Storage 생성

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

좌측 메뉴의 Realtime Database -> 생성 -> "규칙"에서 read/write 모두 true로!

Firebase 설치 및 연동

설치코드

expo install firebase

firebaseConfig.js 생성

App.js가 위치한 폴더에 firebaseConfig.js를 생성한다.
생성했던 Firebase와 연동하기 위한 환경설정을 하는 파일!

firebaseConfig.js

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: "~~~~",
  authDomain: "~~~~",
  databaseURL: "https://sparta-myhoneytip-minbro-default-rtdb.firebaseio.com",
  projectId: "sparta-myhoneytip-minbro",
  storageBucket: "sparta-myhoneytip-minbro.appspot.com",
  messagingSenderId: "~~~~",
  appId: "~~~~",
  measurementId: "~~~~",
};

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

export const firebase_db = firebase.database();

1. 생성한 앱 코드를 firebaseConfig 딕셔너리 안에 입력한다.
2. databaseURL에는 생성한 리얼타임 데이터베이스 링크를 입력한다.

Firebase에서 데이터 가져오기

예시코드

MainPage.js

import React, { useState, useEffect } from "react";
import main from "../assets/jordan.jpg";
import {StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from "react-native";
import data from "../data.json";				// 더이상 사용하지 않고 firebase에서 불러온다!
import Card from "../components/Card";
import Loading from "../components/Loading";
import { StatusBar } from "expo-status-bar";
import * as Location from "expo-location";
import { Alert } from "react-native-web";
import axios from "axios";
import {firebase_db} from "../firebaseConfig"

export default function MainPage({ navigation, route }) {
  console.disableYellowBox = true;

  const [state, setState] = useState([]);
  const [cateState, setCateState] = useState([]);
  const [ready, setReady] = useState(true);
  const [weather, setWeather] = useState({ temp: 0, condition: "" });

  useEffect(() => {
    navigation.setOptions({
        title: "나만의 꿀팁",
      });
    firebase_db
      .ref("/tip")
      .once("value")
      .then((snapshot) => {
        console.log("파이어베이스에서 데이터 가져왔습니다!!");
        let tip = snapshot.val();
        setState(tip);
        setCateState(tip);
        getLocation();
        setReady(false);
      });
  }, []);

.
.
.

사용법

import {firebase_db} from "../firebaseConfig"

1. firebaseConfig에서 export한 firebase_db를 import한다.

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

2. 리얼타임 데이터베이스에 "tip"으로 입력되어있는 데이터(기존 data.json)을 불러오는 함수를 사용하여 tip을 가져온다.
   • 우선적으로 데이터베이스에서 데이터를 가져와야하기 때문에, setTimeout 함수는 이제 사용하지 않는다!
   • 애초에 setTimeout을 사용하여 화면전환 속도를 조절하는것은 결코 좋은 방법이 아니다...