---
tags: meme-db, side project
---

# meme-db: 2.Firebase 簡介

## Firebase
Firebase 為 Baas(後端即服務)，讓前端開發者能快速的建立並使用後端服務(資料庫、API)
除了 web 也應用在 mobile app 或 遊戲

## Javascript SDK v9
從 v8 到 v9 最大的差異就是從 dot-chained namespace 改為 模組化引入
大幅降低 APP 體積，也更符合現今潮流

v8

import firebase from 'firebase/app';
import 'firebase/auth';

// 初始化
firebase.initializeApp({ /* config */ });
const auth = firebase.auth();

// 使用監聽
auth.onAuthStateChanged(user => { 
  // Check for user status
});

v9

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

// 初始化
const firebaseApp = initializeApp({ /* config */ });
const auth = getAuth(firebaseApp);

// 監聽
onAuthStateChanged(auth, user => {
  // Check for user status
});

v9 中仍可以繼續使用 v8 的語法

// 加上 compat 引入 v8 的 libaray
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

## 模組
| 名稱 | 說明 |
| -------------------------------------------------------------------------------- | -------------- |
| [Auth](https://firebase.google.com/docs/auth/web/start) | 身份驗證 |
| [Firestore](https://firebase.google.com/docs/firestore/quickstart#web-version-9) | 資料庫 |
| [Storage](https://firebase.google.com/docs/storage/web/start) | 儲存空間(圖片) |

[參考文章](https://modularfirebase.web.app/get-started/why-change)
[github公告](https://github.com/firebase/firebase-js-sdk/discussions/4791)
[youtube影片介紹](https://www.youtube.com/watch?v=zd6ffqoK_EU)
[官方升級文件](https://firebase.google.com/docs/web/modular-upgrade)