[Vue3 + vite + tailwindCSS] 트윗에 유저 정보 표시하기

트윗 컴포넌트에 props로 데이터를 넘겨줄 때 

그 트윗을 작성한 유저의 정보( email, username)도 함께 넘겨줘야 한다. 

 

그래서 getUserInfo라는 함수를 사용하여

트윗을 작성할 때 uid로 유저정보를 문서에서 검색해서

그 유저의 정보도 tweets에 함께 담아서 props에 전달하면된다.

    //트윗 실시간 가져오기

    onBeforeMount(() => {

      const q = query(collection(db, "tweets"), orderBy("created_at", "desc"));

      const unsubscribe = onSnapshot(q, (snapshot) => {

        snapshot.docChanges().forEach(async (change) => {

          let tweet = await getUserInfo(change.doc.data());

          if (change.type === "added") {

            tweets.value.splice(change.newIndex, 0, tweet);

          }

          if (change.type === "modified") {

            tweets.value.splice(change.oldIndex, 1, tweet);

          }

          if (change.type === "removed") {

            tweets.value.splice(change.oldIndex, 1);

          }

        });

      });

    });

    const getUserInfo = async (tweet) => {

      const docRef = doc(db, "users", tweet.uid);

      const docSnap = await getDoc(docRef); // users에서 user.uid로 검색한 결과 가져옴

      tweet.profile_image_url = docSnap.data().profile_image_url;

      tweet.email = docSnap.data().email;

      tweet.username = docSnap.data().username;

      return tweet;

    };

 

getUserInfo는 아래와 같이 바꿀수도 있음

    const getUserInfo = async (tweet) => {

      const docRef = doc(db, "users", tweet.uid);

      const docSnap = await getDoc(docRef); // users에서 user.uid로 검색한 결과 가져옴

      // tweet.profile_image_url = docSnap.data().profile_image_url;

      // tweet.email = docSnap.data().email;

      // tweet.username = docSnap.data().username;

      tweet = { ...tweet, ...docSnap.data() };

      return tweet;

    };

 

트윗 컴포넌트를 수정한다. 

        <span class="font-bold">{{ tweet.email }}</span>

        <span>@{{ tweet.username }}</span>

 

 

다른 유저를 하나 더 회원가입해서 

접속 후 트윗을 작성해봤다.

 

아래와 같이 유저가 다르지만 다른 유저가 작성한 트윗도 확인이 가능하고

이메일과 username이 정상적으로 출력됨을 확인할 수 있다.