HwangSee

221109 TIL | 트위터 클론코딩_(4)

  • 2022년 11월 09일

오늘 한 일

  • 노마드코더 트위터 클론코딩 실습
    • 유저 권한 설정
    • 프로필 등록, 수정
    • 리액트 리렌더링 리팩터링

프로필

  • where을 이용하여 필터링을 할 수 있다.
    • where은 원하는만큼 여러 번 사용할 수 있다.
    • 두번째 인자로 받는 opStr 옵션이 가장 강력하다.

    1

const hweets = await dbService
.collection("hweets")
.where("createId", "==", userObj.uid);
  • 이제 필터링한 데이터를 가져와서 정렬 후 보여주기만 하면 될 것 같지만…
const hweets = await dbService
      .collection("hweets")
      .where("createId", "==", userObj.uid)
      .orderBy("createAt")
      .get();
    console.log(hweets.docs.map((doc) => doc.data));
  • 콘솔을 확인해보면 오류 메세지가 출력된다.
Uncaught (in promise) FirebaseError: The query requires an index. You can create it here:
// 인덱스가 없다고..?
  • firestore는 noSQL 기반 DB이기 때문에 이렇게 작동할 수 없다.
    • pre-made query를 사용해야 한다.
    • 오름차순, 내림차순을 바꾸면 인덱싱을 다시 해야 하기 때문에 인덱스가 필요하다.
  • 에러 메세지의 링크를 타고 들어가면 인덱스를 생성할 수 있다.

2

유저 설정 변경

3

  • firebase에는 User에 관련된 옵션이 많이 없다. (이름, 프로필 사진 끝)
    • 만약 User에 더 많은 옵션을 부여하고 싶다면 firestore의 콜렉션에 user 관련 정보를 추가하는 방법을 이용한다.
const onSubmit = async (event) => {
    event.preventDefault();
    if (newDisplayName !== userObj.displayName) {
      await userObj.updateProfile({
        displayName: newDisplayName,
      });
    }
  };

간단하게 변경할 수 있지만, 변경한 이름이 실시간으로 반영되지 않는다.

유저 설정 버그 수정

  • DB 데이터가 변경되면 리렌더링 하도록 수정한다.

/App.js

  1. refreshUser 생성

     const refreshUser = () => {
   setUserObj(authService.currentUser);
 };

  2. App → AppRouter → Profile으로 props 데이터 전달

     <AppRouter
   refreshUser={refreshUser}
   isLoggedIn={isLoggedIn}
   userObj={userObj}
 />
    
 <Profile userObj={userObj} refreshUser={refreshUser} />

  3. user의 모든 설정을 변경할 필요 없다.

    • firebase의 User에는 정말 많은 정보가 담겨 있다. 많은 정보가 담길수록
    • 어떤 부분만 변경되었는지 React가 확인하기 어렵고,
    • 많은 정보를 불러올수록 느려진다.
    • 필요한 정보만 변경하도록 한다.
const refreshUser = () => {
    const user = authService.currentUser;
    setUserObj({
      displayName: user.displayName,
      uid: user.uid,
      updateProfile: (args) => user.updateProfile(args),
    });
  };

5

검색