---
# System prepended metadata

title: 'meme-db: 2.Firebase 簡介'
tags: [' side project']

---

---
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 
```javascript=
import firebase from 'firebase/app';
import 'firebase/auth';

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

// 使用監聽
auth.onAuthStateChanged(user => { 
  // Check for user status
});
```
v9
```javascript=
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 的語法
```javascript=
// 加上 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)  