Firebase - Firestore Database 가져오기, 쓰기
Post

Firebase - Firestore Database 가져오기, 쓰기

들어가기

  • 공식 문서에 너무 잘 정리가 되어있지만 완전 처음 사용할 때 헛갈렸던 부분이 있어서 정리
  • 웹 버전 9 (modular) 기준

데이터 쓰기 (혹은 덮어쓰기)

set() 메서드

  • setDoc()을 사용함.
  • 문서가 있으면 덮어씌움
  • 문서가 없다면 새로 생성
1
2
3
4
5
6
7
8
import { doc, setDoc } from "firebase/firestore";

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});
  • doc() 메서드 가장 마지막에 있는 인자가 문서의 이름이 됨.
  • 위 예제로 따지면 아래와 같은 데이터 구조가 됨.
1
2
- cities (root)
    -LA (cities/LA)
  • 데이터를 더 깊게 넣으려면 뒤를 계속 추가하면 됨.

  • ex) doc(db, "abc", "abc_in", 'abc_in_in', 'post_id')
  • 이런식으로 계속 깊게 넣어줄 수 있음.

문서의 ID를 자동으로 추가해서 데이터 쓰기

  • 이때는 setDoc()이 아니고 collectionaddDoc() 메서드를 사용.
1
2
3
4
5
6
7
8
import { collection, addDoc } from "firebase/firestore";

// Add a new document with a generated id.
const docRef = await addDoc(collection(db, "cities"), {
  name: "Seoul",
  country: "Korea"
});
console.log("Document written with ID: ", docRef.id);
  • 위 코드의 경우 cities 안에 자동으로 생성된 ID로 문서가 생성됨.
  • ID를 자동으로 생성한 경우 자동 정렬을 지원하지 않기 때문에 타임스템프 값을 추가해야 함.

데이터 읽어오기

get() 메서드 (단일 데이터)

  • doc(), getDoc() 메서드를 사용
1
2
const ref = getDoc(doc(db, "Cities", "ID"));
console.log(ref.data()) // 데이터 값이 객체로 나옴.

데이터 리스트 가져오기

  • getDocs() : 문서 리스트 가져오기
  • orderBy : 정렬
  • collection : 컬렉션
1
const ref = getDocs(collection(db, "Cities"), orderBy("date"));
  • Cities안에 있는 데이터들을 "date" 기준으로 정리해서 불러오는 예시 코드