JavaScript에서 firebase 사용하기

SIHA·2024년 12월 13일

Firebase

구글의 클라우드 기반 NoSQL 데이터베이스
데이터를 컬렉션(Collection), 문서(Document), 필드(Field)라는 구조로 저장

컬렉션(Collection): 데이터를 그룹화하는 컨테이너 역할
문서(Document): 컬렉션 안에 저장되는 개별 데이터 항목. JSON과 유사한 구조를 가짐
필드(Field): 문서 내의 키-값 쌍으로 저장된 데이터

★ 타 데이터베이스와 비교

항목	Firestore	MySQL	MongoDB
데이터 구조	컬렉션 > 문서 > 필드로 계층 구조	테이블 > 행(Row) > 열(Column) 구조	컬렉션 > 도큐먼트(Document)
스키마	스키마 없음	고정된 스키마 사용	스키마 없음
데이터 타입	JSON 기반	테이블 데이터(정형 데이터)	BSON 기반
특징	서버리스, 실시간 지원	강력한 정규화, 관계 표현 가능	대용량 비정형 데이터에 최적화

Firebase 초기 설정

<script type="module">
        // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
          const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_PROJECT_ID.appspot.com",
            messagingSenderId: "YOUR_SENDER_ID",
            appId: "YOUR_APP_ID"
          };

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

Firestore 주요 함수
1) initializeApp
Firebase 애플리케이션을 초기화하는 함수. firebaseConfig를 인자로 받아 Firebase 서비스를 사용할 수 있도록 설정.

2) getFirestore
Firestore 인스턴스를 반환하는 함수. Firestore에 데이터를 추가하거나 가져올 때 사용.

3) collection
특정 컬렉션을 지정하는 함수. 첫 번째 인자로 Firestore 인스턴스를, 두 번째 인자로 컬렉션 이름을 받음.

4) addDoc
컬렉션에 새 문서를 추가하는 함수. 비동기로 작동하며, 성공 시 생성된 문서의 참조를 반환함.

5) getDocs
컬렉션의 모든 문서를 가져오는 함수. 비동기로 작동하며, 문서 스냅샷(QuerySnapshot)을 반환함.

addDoc

await addDoc(collection(db, "albums"), doc);
alert('저장완료!');
window.location.reload();

await:
- 비동기 작업이 완료될 때까지 기다림
- 이 경우, Firestore에 문서를 추가하는 작업(addDoc)이 끝날 때까지 기다림

addDoc(collection(db, "albums"), doc):
- collection(db, "albums"):
- "albums" 컬렉션에 doc 객체를 새 문서로 추가함.
- 여기서 collection 함수는 특정 컬렉션에 접근할 수 있는 collectionReference를 반환함.

doc:
- Firestore에 저장할 데이터 객체를 나타냄.
- 예를 들어, doc이 {"title": "My Album", "author": "John"}이라면, "albums" 컬렉션에 해당 데이터를 문서로 추가함.

window.location.reload():
페이지를 새로고침하여 변경된 데이터를 다시 로드함.
예를 들어, Firestore에 새로 저장된 데이터를 UI에서 즉시 확인 가능하게 만듦.

getDocs

let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();
            let image = row['image']
            let title = row['title']
            let content = row['content']
            let date = row['date']

await getDocs(collection(db, "albums"))

Firestore의 "albums"라는 이름의 컬렉션에 저장된 모든 문서를 조회함.
collection(db, "albums")은 Firestore에서 "albums"라는 컬렉션의 참조(CollectionReference)를 생성함.
getDocs는 해당 컬렉션의 모든 문서를 읽고, 결과로 QuerySnapshot 객체를 반환함.
결과는 docs 변수에 저장됨.

docs.forEach((doc) => {...})