avatar
Published on

TIL๐Ÿ“š ์•ฑ๊ฐœ๋ฐœ ์Šคํ„ฐ๋”” - 4 week

Authors
  • avatar
    Name
    Haneul
    Twitter

TIL๐Ÿ“š ์•ฑ๊ฐœ๋ฐœ ์Šคํ„ฐ๋”” - 4 week

Firebase ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋Š” ๊ตฌ๊ธ€์—์„œ ๋งŒ๋“  ์„œ๋ฒ„๋ฆฌ์Šค ์„œ๋น„์Šค

  • ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค
  • ์ด๋ฏธ์ง€ ํŒŒ์ผ ์„œ๋ฒ„
  • ํ‘ธ์‹œ ์•Œ๋žŒ ๊ธฐ๋Šฅ
  • ๋กœ๊ทธ์ธ ์ธ์ฆ ๊ธฐ๋Šฅ

Serverless

  1. ๋ฐ์ดํ„ฐ ์ƒ์„ฑ
  2. ๋ฐ์ดํ„ฐ ์กฐํšŒ
  3. ๋ฐ์ดํ„ฐ ์‚ญ์ œ/์ˆ˜์ • ๋“ฑ์„ ์ œ๊ณตํ•ด์ฃผ๋Š” ์„œ๋น„์Šค๋“ค์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์„ค์น˜

npm install firebase
yarn add firebase
expo install firebase

ํŒŒ์ด์–ด๋ฒ ์ด์Šค config ์„ค์ •

์ฒ˜์Œ์— ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์—ฐ๋™์ด ๋˜์ง€ ์•Š์•„ ํ™•์ธํ•ด๋ดค๋”๋‹ˆ ์ง€์—ญ ์„ค์ •์ด ๋งž์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์–ด databaseURL์„ ๋”ฐ๋กœ ์„ค์ •ํ•ด์ฃผ์—ˆ๋‹ค.

// ์‚ฌ์šฉํ•  ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์„œ๋น„์Šค ์ฃผ์„์„ ํ•ด์ œํ•ฉ๋‹ˆ๋‹ค
//import "firebase/compat/auth";
import "firebase/compat/database";
//import "firebase/compat/firestore";
//import "firebase/compat/functions";
import "firebase/compat/storage";

import firebase from "firebase/compat/app";

// Initialize Firebase
//ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์‚ฌ์ดํŠธ์—์„œ ๋ดค๋˜ ์—ฐ๊ฒฐ์ •๋ณด๋ฅผ ์—ฌ๊ธฐ์— ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค
const firebaseConfig = {
  apiKey: "",
  authDomain: "sparta-react-native-11669.firebaseapp.com",
  projectId: "sparta-react-native-11669",
  storageBucket: "sparta-react-native-11669.appspot.com",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
  databaseURL:
    " https://sparta-react-native-11669-default-rtdb.asia-southeast1.firebasedatabase.app",
};
//์‚ฌ์šฉ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.
//ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์—ฐ๊ฒฐ์— ํ˜น์‹œ ์˜ค๋ฅ˜๊ฐ€ ์žˆ์„ ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•œ ์ฝ”๋“œ๋กœ ์•Œ์•„๋‘๋ฉด ๋ฉ๋‹ˆ๋‹ค.
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const firebase_db = firebase.database();

Storage

๋ฉ€๋ฆฌ ์žˆ๋Š” ํŒŒ์ผ ์ €์žฅ์†Œ์— ์ด๋ฏธ์ง€ ๋ฐ ์‚ฌ์šฉ ํ•  ํŒŒ์ผ์„ ์˜ฌ๋ ค๋‘๊ณ , ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ๊บผ๋‚ด ์“ฐ๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉ

const ref = firebase_storage.ref("general/main.png");
const url = await ref.getDownloadURL();

Realtime Database

๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค API

์•„๋ž˜์™€ ๊ฐ™์ด config์˜ firebase_db๋ฅผ ์—ฐ๊ฒฐํ•˜์—ฌ "/tip" ์„ ref๋กœ ๋„ฃ๊ณ  snapshot.value๋กœ ๊ฐ’์„ ๊ฐ€์ ธ์˜จ๋‹ค.

์‚ฌ์šฉ๋ฐฉ๋ฒ•์€ ๊ณต์‹๋ฌธ์„œ์—์„œ ํ™•์ธ!!

firebase API ๐Ÿ‘‰


import { firebase_db } from "../firebaseConfig";

firebase_db
        .ref("/tip")
        .once("value")
        .then((snapshot) => {
          let tip = snapshot.val();
          console.log("MainPage > ํŒŒ์ด์–ด๋ฒ ์ด์Šค์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค!!", tip);

          setState(tip);
          setCateState(tip);
          getLocation();
          setReady(false);
        });

TIL โœ…

ํŒŒ์ด์–ด๋ฒ ์ด์Šค์˜ ์Šคํ† ๋ฆฌ์ง€, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ์ฃผ๋œ ํ•™์Šต ๋‚ด์šฉ์ด์—ˆ๊ณ , weather API ์ ์šฉ๋„ ํ•ด๋ณด์•˜๋‹ค.

expo-constants์˜ installationId ๊ฐ€ deprecated ๋˜์–ด uuid๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•„์ด๋”” ์„ค์ •์„ ํ•˜์˜€๊ณ , ์ถ”ํ›„ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•ด๋ณด์ธ๋‹ค.


์ฐธ๊ณ  : ์ŠคํŒŒ๋ฅดํƒ€ ์ฝ”๋”ฉํด๋Ÿฝ, React Naitve, Firebase,