이제 프로필 화면을 뜯어 고쳐보자!
프로필 화면을 구성할 내용은 다음과 같다.

• 로그아웃 ✅
• 프로필 화면에 내가 쓴 트윗 가져오기
• 프로필 업데이트

로그아웃 기능은 이미 해 뒀고, 로그인한 사용자의 트윗을 볼 수 있도록 해보자!

✅ 프로필 화면에 내 트윗 가져오기

1. Router에서 Profile로 userObj 보내기

---

누구의 프로필인지 알아야 그 유저의 트윗만 가져올 수 있다.
Router.js에서 Profile.js로 `prop으로 userObj를 보내주면 이 프로필의 유저가 누구인지 알 수 있다.

📍src > components > Router.js

//...

<Route
  path="/profile"
  element={<Profile userObj={userObj} />}
  ></Route>

//...

📍src > routes > Profile.js

import { dbService } from "fbase";
import { useNavigate } from "react-router-dom";

//🔥 로그인한 유저 정보 prop으로 받기
const Profile = ({ userObj }) => {
  const navigate = useNavigate();
  const onLogOutClick = () => {
    authService.signOut();
    //home으로 돌아가기 위해 react router dom의 useNavigate() 메서드 사용
    navigate("/");
  };
  
  return (
    <>
      <button onClick={onLogOutClick}>로그아웃</button>
    </>
  );

export default Profile;

2. useEffect() 사용하여 프로필 페이지 렌더링 후 사용자 트윗 보이게 하기

• useEffect( fn, [props.source] ): 조건부 effect 발생
  effect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생하게 하지만, useEffect에 두 번째 인자를 전달하면 props.source가 변경될 때에만 구독이 재생성된다.

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

1. useEffect() 함수 생성

import { authService } from "fbase";
import { useEffect } from "react";
import <{ useNavigate } from "react-router-dom";

//로그인한 유저 정보 prop으로 받기
const Profile = ({ userObj }) => {
  const navigate = useNavigate();
  const onLogOutClick = () => {
    authService.signOut();
    //home으로 돌아가기 위해 react router dom의 useNavigate() 메서드 사용
    navigate("/");
  };

  //🔥 내 Tweets 얻는 function 호출
  useEffect(() => {
    getMyTweets();
  }, []);

  return (
    <>
      <button onClick={onLogOutClick}>로그아웃</button>
    </>
  );
};

export default Profile;

2. 내 Tweets 얻는 function인 getMyTweets 함수 생성하기

getMyTweets 함수를 생성하고 함수 안에 내 Tweets을 얻는 코드를 작성하자.
참고: 컬렉션에서 여러 문서 가져오기

2.1. firebase/firestore에서 collection, query, where, getDocs를 import 하여 데이터베이스의 컬렉션에서 여러 문서(트윗)를 가져오기

import { collection, query, where, getDocs } from "firebase/firestore";

2.2. 데이터베이스에 userObj.uid와 같은 creatorId 가진 모든 문서 쿼리(요청)하기

현재 디비서비스 안에 있는 컬렉션에서 "tweets"문서를 쿼리해 와야 한다. 그중에서도 특별히 userObj.uid와 동일한 값을 가진 creatorId를 가지고 있는 문서만 가져와야 한다. 그래야 자기 트윗만 가져올 수 있기 때문이다.

그러기 위해 where() 메서드를 사용하면 되는데, 이 메서드는 특정 조건을 충족하는 모든 문서를 쿼리(요청)할 수 있다.

• where(filePath, opStr, value)
  • filePath: string | firebase.firestore.FiledPath
  • opStr("오퍼레이션 스트링" 즉, 연산자) | firebase.firestore.WhereFilterOp
  • value(값): any

따라서 다음과 같이 쿼리문을 작성하면 된다.

const q = query(
  collection(dbService, "tweets"),
  where("creatorId", "==", userObj.uid)
);

• 첫 번째 인자: dbService의 컬렉션 중 "tweets" Docs 컬렉션을 가져와 달라고 요청
• 두 번째 인자: 그 중에서, userObj의 uid와 동일한 creatorID를 가진 Docs만 가져와 달라.

2.3. getDocs() 메서드 사용하여 쿼리해온 모든 문서의 결과 가져오기

where()를 사용하여 특정 조건을 충족하는 모든 문서를 쿼리한 후, getDocs() 메서드를 사용하여 결과를 가져올 수 있다.

예시

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

따라서 다음과 같이 작성하면 된다.

import { authService, dbService } from "fbase";
import { collection, getDocs, query, where } from "firebase/firestore";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

//로그인한 유저 정보 prop으로 받기
const Profile = ({ userObj }) => {
  const navigate = useNavigate();
  const onLogOutClick = () => {
    authService.signOut();
    //home으로 돌아가기 위해 react router dom의 useNavigate() 메서드 사용
    navigate("/");
  };

  //내 Tweets 얻는 function 생성
  const getMyTweets = async () => {
    
    //트윗 불러오기
    //dbService의 컬렉션 중 "tweets" Docs에서 userObj의 uid와 동일한 creatorID를 가진 모든 문서를 가져오는 쿼리(요청) 생성
    const q = query(
      collection(dbService, "tweets"),
      where("creatorId", "==", userObj.uid)
    );
    
    //🔥getDocs()메서드로 쿼리 결과 값 가져오기
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      console.log(doc.id, "=>", doc.data());
    });
  };
  
  //내 Tweets 얻는 function 호출
  useEffect(() => {
    getMyTweets();
  }, []);

  return (
    <>
      <button onClick={onLogOutClick}>로그아웃</button>
    </>
  );
};

export default Profile;

• creatorId가 같은 Tweets 문서를 가져오는데 성공!
  

이렇게 데이터를 필터링해서 가져올 수 있다.

2.4. 트윗한 시간 순서대로 정렬하여 문서가져오기

- orderBy()
예시

import { query, orderBy } from "firebase/firestore";
//여러 필드를 기준으로 정렬할 수도 있다.
//예를 들어 주를 기준으로 정렬한 후 각 주 안에서 인구에 따라 내림차순으로 정렬하는 방법은 다음과 같다.
const q = query(citiesRef, orderBy("state"), orderBy("population", "desc"));

import { authService, dbService } from "fbase";
//🔥 orderBy 가져오기
import { collection, getDocs, query, where, orderBy } from "firebase/firestore";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

//로그인한 유저 정보 prop으로 받기
const Profile = ({ userObj }) => {
  const navigate = useNavigate();
  const onLogOutClick = () => {
    authService.signOut();
    //home으로 돌아가기 위해 react router dom의 useNavigate() 메서드 사용
    navigate("/");
  };

  //내 Tweets 얻는 function 생성
  const getMyTweets = async () => {
    
    //트윗 불러오기
    //dbService의 컬렉션 중 "tweets" Docs에서 userObj의 uid와 동일한 creatorID를 가진 모든 문서를 가져오는 쿼리(요청) 생성
    //🔥 트윗한 순서대로 정렬하기
    const q = query(
      collection(dbService, "tweets"),
      where("creatorId", "==", userObj.uid),
      orderBy("createdAt", "desc")
    );
    
    //getDocs()메서드로 쿼리 결과 값 가져오기
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      console.log(doc.id, "=>", doc.data());
    });
  };
  
  //내 Tweets 얻는 function 호출
  useEffect(() => {
    getMyTweets();
  }, []);

  return (
    <>
      <button onClick={onLogOutClick}>로그아웃</button>
    </>
  );
};

export default Profile;

2.5 index 에러발생!

⚠️ 에러 발생
Uncaught (in promise) FirebaseError: The query requires an index. You can create it here: url 블라블라

Firestore는 noSQL 기반 DB라서 몇몇 기능은 이렇게 작동될 수가 없기 때문에 이런 에러가 뜬다고 한다.
해당 쿼리에 index가 필요하다고 하는데 이는 pre-made query를 만들어야 한다는 뜻이다.
데이터베이스가 쿼리를 만들 준비를 할 수 있도록, 이 쿼리를 사용할 거라고 데이터베이스에게 알려줘야 한다.

• 에러 뜬 url 클릭해서 composite index(복합색인)를 만들어 보자 ^3^..
  

• 복합색인 만들기 완성
  

• 오케이! 콘솔을 확인해 보자. createdAt 내림차순(가장 먼저 쓴 트윗이 제일 아래로)으로 잘 나오고 있다.
  

요약

쿼리(요청) 필터링하기

• 참고 문서
  • 컬렉션에서 여러 문서 가져오기
  • 데이터 정렬 및 제한

//✅ v.9

import { authService, dbService } from "fbase";
import { collection, getDocs, query, where, orderBy } from "firebase/firestore";
import { useEffect } from "react";
//...

//1. 로그인한 유저 정보 prop으로 받기
const Profile = ({ userObj }) => {
//...

//2. 내 nweets 얻는 function 생성
const getMyNweets = async () => {
//3. 트윗 불러오기
//3-1. dbService의 컬렉션 중 "nweets" Docs에서 userObj의 uid와 동일한 creatorID를 가진 모든 문서를 내림차순으로 가져오는 쿼리(요청) 생성
const q = query(
collection(dbService, "nweets"),
where("creatorId", "==", userObj.uid),
orderBy("createdAt", "desc")
);

//3-2. getDocs()메서드로 쿼리 결과 값 가져오기
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
console.log(doc.id, "=>", doc.data());
});
};

//4. 내 nweets 얻는 function 호출
useEffect(() => {
getMyTweets();
}, []);

return (
<>
로그아웃
</>
);
};

export default Profile;