<파이어베이스> 필터와 정렬

 

1. 필터

 - 우리는 프로필페이지를 별도로 만들어서 로그아웃 기능을 버튼과함께 넣었었다. 이번엔 프로필 페이지에서 로그인한 사용자의 글만 보이도록 필터링해보자.

 

* 쿼리

 - 파이어베이스의 Cloud Firestore은 컬렉션이나 그룹에서 검색할 문서를 지정하는 쿼리 기능을 제공한다.

 

// Create a reference to the cities collection
var citiesRef = db.collection("cities");

// Create a query against the collection.
var query = citiesRef.where("state", "==", "CA");

 

 - 위는 파이어베이스 공식문서에 나온 예시이다. 위 코드는 db에서 cities 컬렉션으로 Ref를 만들고, 여기서 where을 사용하여 CA 주 도시들을 반환받는 쿼리를 만든 것이다.

 

 - 위를 바탕으로 현 프로젝트에 적용해보자.

 

  const getMyPosts = async() => {
    const posts = await dbService
      .collection('posts')
      .where('creatorId', "==" , userObj.uid)
  }

 

 - dbService는 기존에 만들었던 firebase.firestore() 이다. 공식문서에서는 db로 사용했음을 알 수 있다.

 

 - collection메서드로 컬렉션 ref를 만들고 where로 필터링하였다. where메서드에 쓸 수 있는 쿼리 연산자는 다음과 같다.

 

 <   <=   ==   >   >=   !=   array-contains   array-contains-any   in   not-in

 

 - 여기서는 컬렉션에 지정해두었던 creatorId와 현재 접속된 유저 객체의 uid와 비교하였다.

 

 

* 실행

 - 만든 쿼리를 바탕으로 get 또는 addSnapshotListener와 함께 사용할 수 있다. 여기서는 get을 사용해보자.

 

 - 위의 코드를 조금 수정하여 게시글들을 받아보자.

 

  const getMyPosts = async() => {
    const posts = await dbService
      .collection('posts')
      .where('creatorId', "==" , userObj.uid)
      .get();
    console.log(posts.docs.map(doc => doc.data()))
  }
  useEffect(() => {
    getMyPosts();
  }, [])

 

 - get메서드로 쿼리를 실행 하여 받아왔다.

 

 - map을 사용하여 게시글객체를 하나씩 받아올 수 있도록 하였다.

 

 - useEffect로 페이지렌더링 시에 바로 받아올 수 있도록 하였다.

 

2. 정렬

 - 파이어베이스는 기본적으로 문서id 를 기준으로 정렬을 한다. 하지만 우리는 날짜 순으로 정렬을 하기를 원한다고 가정하자.

 

 - 쿼리는 orderBy메서드를 사용하여 정렬 순서를 지정할 수 있으며, limit메서드로 문서의 수를 제한 할 수 있다.

 

citiesRef.orderBy("name").limit(3);

 

 - 위는 공식문서의 예시이다. 위는 name을 알파벳순으로 오름차순 정렬하고 첫 3개 데이터를 쿼리하는 예시이다.

 

 - 만일 내림차순 정렬을 원한다면 orderBy("name", "desc") 를 사용한다.

 

 - 여러 필드를 기준으로 정렬하기를 원한다면 orderBy을 연달아 사용하면 된다.

 

citiesRef.where("population", ">", 100000).orderBy("population");

 

 - 물론 where 필터와도 결합할 수 있다. 하지만 필터에 범위 비교가 사용되었다면 사용된 필드를 기준으로 1차 정렬이 이루어져야 한다.

 

  const getMyPosts = async() => {
    const posts = await dbService
      .collection('posts')
      .where('creatorId', "==" , userObj.uid)
      .orderBy("createdAt", "asc")
      .get();
    console.log(posts.docs.map(doc => doc.data()))
  }
  useEffect(() => {
    getMyPosts();
  }, [])

 

 - 기존의 코드에서 orderBy만 추가했다. 하지만 위를 실행하면 에러가 나게 된다.

 

 - 에러에서 만약 색인추가가 필요하다며 링크를 제공한다면 클릭 후 자동으로 지정되어있는 색인대로 설정을 하기만 하면된다. 하지만 색인을 못찾는다는 에러만 뜨면 아래와 같이 직접 추가해야한다.

 

 

 - 위 처럼 색인 메뉴에서 복합색인 만들기를 클릭하여 색인을 만든다.

 

 - 위는 틀린 예시이다. 처음에 위처럼 만들었으나 같은 오류가 반복되었다. 위처럼 작성할 예정이라면 붉은 사각형부분을 클릭하여 순서를 바꾸기를 권장한다. creatorId를 우선해야 정렬이 올바르게 된다.

 

 - 위처럼 색인이 생성되면, 올바르게 정렬이 수행된다.

 

 

---

 

 

참고

 

Cloud Firestore에서 단순 쿼리 및 복합 쿼리 실행  |  Firebase

 

Cloud Firestore로 데이터 정렬 및 제한  |  Firebase

 

Watch Now - 노마드 코더 Nomad Coders

 

 

---