Get My Own Nweets

https://firebase.google.com/docs/firestore/query-data/queries

https://firebase.google.com/docs/firestore/query-data/order-limit-data

쿼리문을 작성하여 나의 Nweets를 가져옴
query 함수내 인자로 where함수를 사용해 필터링
where함수 및 orderBy, limit함수를 함께 인자로 넣어 정렬과 개수제한도 가능

// Profile.js
// ...
const getMyNweets = async () => {

		// 내가 작성한 데이터를 시간순으로 오름차순 정렬하여 가져옴
    const q = query(
			collection(fbStore, "nweets"), 
			where("creatorId", "==", userInfo.uid), 
			orderBy("createdAt")
		);

    const nweets = await getDocs(q);
    console.log(nweets.docs.map((doc) => doc.data()));
  };

  useEffect(() => {
    getMyNweets();
  }, []);
// ...

색인 생성

https://console.firebase.google.com/project/nwitter-9aeb9/firestore/indexes

fireStrore는 noSQL기반 DB이기 떄문에 복합쿼리를 실행하기 위해서는 미리 복합쿼리에 대한 색인(index)을 생성해줘야함

설정완료 (시간이 좀 걸림)

Update Profile

https://firebase.google.com/docs/auth/web/manage-users

updateProfile 함수를 사용해 displayName과 photoURL 변경가능
Firebase의 한계 ⇒ userInfo에 많은것을 담을 수 없음

// Profile.js
// ...

const onSubmitHandler = async (event) => {
    event.preventDefault();

    if (userInfo.displayName === newDisplayName) return;

    await updateProfile(userInfo, { displayName: newDisplayName, photoURL: "" });
  };

// ...

변경됭 displayName을 적용시키기 위해서 새로 렌더링해야함
유저 정보를 새로고침하는 함수 생성 → Profile 컴포넌트까지 함수를 내려줌
Profile에서 유저정보를 변경시킬때 함수를 실행시켜줌

// App.js
// ...

const refreshUser = () => {
    setUserInfo(fbAuth.currentUser);
  };

// ...

return (
    <div>
      {loading ? `loading...` : <Router refreshUser={refreshUser} isLoggedIn={isLoggedIn} userInfo={userInfo} />}
      <footer>&copy; {new Date().getFullYear()} Nwitter</footer>
    </div>
  );

// ...

// Profile.js
// ...

const onSubmitHandler = async (event) => {
    event.preventDefault();

    if (userInfo.displayName === newDisplayName) return;

    await updateProfile(userInfo, { displayName: newDisplayName, photoURL: "" });
    refreshUser();
  };
// ...

⇒ userInfo는 방대한 정보를 담고있는 객체이기 때문에 react에서 변경점을 찾지 못해 재랜더링이 되지 않을 수 있음

⇒ 해결법

사용할 userInfo의 크기 줄이기

// App.js
// ...

const refreshUser = () => {
    // setUserInfo(fbAuth.currentUser);
    const user = fbAuth.currentUser;
		// 실제 사용할 정보만 userInfo에 저장해서 사용
    setUserInfo({
      displayName: user.displayName,
      uid: user.uid,
      updateProfile: (args) => user.updateProfile(args),
    });
  };

  useEffect(() => {
    onAuthStateChanged(fbAuth, (user) => {
      if (user) {
        setIsLoggedIn(true);
        // setUserInfo(user);
        setUserInfo({
          displayName: user.displayName,
          uid: user.uid,
          updateProfile: (args) => user.updateProfile(args),
        });
      } else {
        setIsLoggedIn(false);
        setUserInfo(null);
      }

      setLoading(false);
    });
  }, []);

// ...

⇒ v9에서는 updateProfile에 userInfo를 사용하므로 위 방법(강의내용)으로는 변경안됨 ⇒ 추가적인 작업 필요
⇒ 실제 사용하는 정보만 저장해서 사용

Object.assign을 사용해 변경하기
```
// App.js
// ...

const refreshUser = () => {
    setUserInfo(Object.assign({}, fbAuth.currentUser));
  };

// ...
```
⇒ Object.assign을 사용해 새로운 객체를 생성하여 React가 새로 렌더링 하도록 할 수 있음