Firebase (3)

* Edit Profile

//어떻게 필터링 할지, 어떤 순서로 필터링 할지, 원하는만큼 쿼리를 엮을 수 있음

const nweets = await dbService

      .collection("nweets")

      .where("creatorId", "==", userObj.uid)

      .orderBy("createdAt")

      .get();

    console.log(nweets.docs.map((doc) => doc.data()));

  };

-> 에러: noSQL 기반 DB라서 몇몇 기능은 이렇게 작동될 수 없음

해당 쿼리에는 index가 필요함 => pre-made query를 만들어야 한다는 뜻

우리가 이 쿼리를 사용할 거라고 데이터베이스에게 알려줘야 함

에러 메세지에 뜨는 링크를 눌러서 색인을 만들어줘야 함

 

- updateProfile

firebase.google.com/docs/reference/js/firebase.User#updateprofile

User | JavaScript SDK  |  Firebase

· updateProfile은 2가지(displayName, photoURL)를 업데이트할 수 있게 해줌

파이어베이스의 한계: 유저 프로필에 많은 정보를 담을 수가 없음

displayName, photoURL 두 가지 밖에 못가짐

email을 바꾸고 싶으면 다른 메소드를 써야함 (verifyBeforeUpdateEmail, sendEmailVerification)

 

-> header엔 업데이트가 바로 적용되지 않음

· 같은 userObj를 여기저기에 공유해서 사용하는가?

(1) uid를 사용해야하기 때문

(authService.currentUser.uid로도 사용 가능함)

그렇지 않으면 이쪽에서 새 authService를 적용하고 저쪽에선 또 새로운 authService를 적용해야 하는데 한 소스만으로 통일해서 사용하게 되면 그 한 userObj의 정보의 변화만으로 전체에 영향을 줄 수 있음

react 덕분에 우리가 새로운 정보를 적용했을 때 (새로운 정보를 적용하거나 상태의 변화가 있을 때) react가 새 정보를 인식한 후 모든 요소들을 다시 렌더링 해줌

App.js - application에 지정된 userObj가 제일 처음으로 적용되는 상태

-> userObj만 변화를 주면 됨

userObj에 새로운 상태를 적용시켜주면 전체에 변화를 줄 수 있음

 

  const refreshUser = () => {

    setUserObj(authService.currentUser);

  }

 

우리가 updateProfile을 사용하게 되면 firebase 쪽에 있는 user를 새로고침 해주게 되는데 우리의 header, 우리 navigation은 firebase 쪽이 연결되어 있지 않음

navigation은 userObj에 연결되어 있음 (즉, react.js)

 

위 코드로 실행하면 상태 변화가 발생했음에도 제대로 변화가 적용되지 않음

console.log(authService.currentUser); 를 해보면 덩치가 엄청 크다는 걸 볼 수 있음

이런 경우 react가 과연 현재의 상태가 과거의 상태와 다른가를 결정하기 힘들어짐

 

해결 방법 (1) object의 크기를 줄여주기

: 원래 크기만큼의 방대한 정보가 우리한테 필요 없기 때문

이 방법이 버그도 훨씬 적고 개인적으로 더 선호

setUserObj({

          displayName: user.displayName,

          uid: user.uid,

          updateProfile: (args) => user.updateProfile(args),

        });

 

해결 방법 (2)

setUserObj(Object.assign({}, user));

Object.assign은 target과 source가 요구됨

기본적으로 빈 object랑 source가 필요한데 결과적으로 이 빈 object 안에 원래 user의 사본이 새 object의 형태로 생성되는데 이 때문에 react.js가 새로운 object가 생성됐다고 인지하고 다시 렌더링을 하게 됨