파이어베이스 데이터 다루기

오늘은 한글날 기념으로 한글로만 기록을 적어봐야지

(정보 전달을 위해 꼭 필요한 것이 아니라면..)

신병훈련소(부트캠프) 5일차

• 오늘은 한글날, 부트캠프는 안 쉬는 줄 알고 공부하고 과제를 하다가 기록을 남긴다.

오늘의 문제

• 조원 상세화면에 조원들의 정보를 데이터 창고(DB)에서 모두 가져와 화면을 그리는 것.
• 특정 조건을 만족하는 정보를 가져오는 것.

접근 방식

• 공식 문서

해결

공식 문서에 간결하게 정리되어 있기 때문에 쉬웠다.
파이어베이스 공식문서

• 모든 정보를 가져오는 것

<모듈 방식>
import { collection, getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

const citiesRef = await getDocs(collection(db, "cities"));
citiesRef.forEach((data) => {
  // cities라는 이름을 가진 컬렉션의 정보가 object 형태로 하나씩 출력된다.
  console.log(data.data());
});
}

• 특정 조건을 만족하는 정보를 가져오는 것
  (자주 쓸 거 같아서 나는 함수로 작성해두었다.)
• 알아둘 것: 파이어베이스에서 쓰는 쿼리와 쿼리 조건
  파이어베이스 공식문서 - 쿼리

< 예시 > 
const q = query(컬렉션 ,where(key, 연산자, 값))

<모듈 방식>
import { getDocs } from `https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js`;
import { query, where } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// 접근하고자 하는 컬렉션을 변수로 만들어둔다. (나 같은 경우에는 DB의 'message' 컬렉션)
const messageRef = collection(db, 'message')

// 이름이 일치하는 데이터를 모두 가져오는 함수
const getByName = async (name :string) => {
  // 파이어베이스에서 사용하는 쿼리를 설정
  const q = query(messageRef, where("username", "==", name)) 
  // 쿼리를 적용한 가져오기_getDocs(쿼리)
  let docs = await getDocs(q);
  // 쿼리의 조건을 만족한 데이터 뭉탱이를 순회하며 하나씩 출력
  docs.forEach((doc) => {
    console.log(row.data());
  });
}