구글에서 만든 서버리스(Serverless) 서비스
Serverless
서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻!
필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다.
프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다.
앱 생성은 현재 개발중인 앱과 연동을 위해 필요한 작업이다.
이미지 저장은 파일 저장소에, JSON 데이터 관리는 리얼타임 데이터베이스에서 하기 때문에, 각각 생성해야한다!
Firebase 가입 -> 프로젝트 생성 -> 프로젝트 내에서 앱 생성(React-native, expo는 웹 앱) ->
"웹 앱에 Firebase 추가"(Firebase 호스팅은 선택 X!) -> 프로젝트 설정 페이지에서 SDK 확인
좌측 메뉴의 Storage -> Storage 생성
좌측 메뉴의 Realtime Database -> 생성 -> "규칙"에서 read/write 모두 true로!
expo install firebase
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();
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"
firebase_db
.ref("/tip")
.once("value")
.then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!");
let tip = snapshot.val();
setState(tip);
setCateState(tip);
getLocation();
setReady(false);
});