[Firebase] 데이터 가져오기 get() | (with 자바스크립트)

단일 데이터 가져오기 getDoc()

 

 

컬렉션 '문서' 가져오기 (문서 참조)

const docRef = doc(collection(db, "{collection}"), "{id}");

• "{`collection`}" : 참조할 컬렉션 명을 넣으면 된다.  
• "{`id`}": 해당 컬렉션에서 찾을 문서`id`를 넣으면 된다.
• 그럼 컬렉션의 id에 맞는 문서를 `docRef` 변수에서 참조할 수 있다. 

 

 

문서의 데이터 가져오기

const docSnap = await getDoc(docRef);
docSnap.data();

• `getDoc()`: 문서를 참조했던 `docRef` 변수 전달
  • 문서의 `고유id`를 넣어 놨기 때문에 단일 데이터 가져옴 (조건에 맞는)
  • `docSnap` 변수에 데이터를 포함한 각종 정보 저장
• `docSnap.data()`: 우리에게 필요한 실질적인 데이터가 저장됨 

 

---

 

다중 데이터 가져오기 getDocs()

 

컬렉션의 문서 전부 가져오기

let docs = await getDocs(collection(db, "{collection}"), doc)

• `docs`: 컬렉션의 전체 문서(데이터포함)를 가져옴

 

가져온 다중 데이터 처리하기

let docs = await getDocs(collection(db, "{collection}"), doc)

docs.forEach((doc) => {
	doc.id;
	doc.data();
})

• `forEach()`를 사용해서 접근이 가능하다. 
  
  • 다른 반복문으로 데이터를 처리하면 더 효율적으로 코드를 작성할 수 있는 경우도 있었는데 방법이 복잡해지거나 불가능한 경우가 많아서 웬만하면 `forEach()`로 승부를 보자..
• `doc.id`: 현재 문서의 `id`값
  • 다른 db들과 다르게 데이터들과 id가 같은 레벨(?)에 있지 않고 더 상위 레벨에 존재
• `doc.data()`: 현재 문서의 데이터 (row) 

 

---

 

조건 처리 where

const usersCollectionRef = collection(db, 'users');
const querySnapshot = await getDocs(query(usersCollectionRef, where('age', '>=', 30)));

• `users`: 라는 컬렉션을 `usersCollectionRef` 에 저장
• `query()`:의 2번째 인자로  where('`필드명`', '`조건`', '`값`') 을 전달해준다. 
  • 조건은 여러개 쓸 수 있다.

 

조건 한줄 처리 (+ 여러 조건 주기)

 let docs = await getDocs(
    query(
        collection(db, "users"),
        where("age", "==", 20),
        where("name", "==", "짱구")
    )
)

• `query()` 안에서 `,` 로 구분해 여러 조건을 줄 수 있다. (`orderBy()`도 쓸 수 있음)

---

 

정렬해서 가져오기 orderBy

let docs = await getDocs(
    query(
        collection(db, "board"),
        orderBy("date", "desc")
    )

• `board` 컬렉션 전체를 가져옴
• 이때 정렬은 `date` 필드 기준으로 내림차순(`desc`)

 

---

 

주의 사항

`firebase`를 직접 설치한 경우는 모르겠지만 외부 링크(SDK)로 사용할 경우 라이브러리를 정확히 `import` 를 해야 사용이 가능하다. 위의 예제에서 사용된 `doc`, `query()`, `getDocs()`, `where()` .... 등을 사용하기 위해서는 꼭! `import`를 해야 한다. 

 

import {
    getFirestore,
    doc,
    getDocs,
    getDoc,
    collection,
    addDoc,
    where,
    setDoc,
    deleteDoc,
    query,
    orderBy,
} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

사용하는 기능에 따라 js 상단에 추가해주면 된다.