[Vue3 + vite + tailwindCSS] firestore onsnapshot 기능

 

이제 작성한 트윗들을 가져올거임

 

firestore에는 onsnapshot이라고 실시간으로 문서를 가져오는 기능이 있음

 

https://firebase.google.com/docs/firestore/query-data/listen?hl=ko&_gl=1*1x1q27w*_up*MQ..*_ga*ODIwMDU5NDc2LjE3MTA4MzI2MTE.*_ga_CW55HF8NVT*MTcxMTA3NDI4OS4yLjAuMTcxMTA3NDI4OS4wLjAuMA..

Cloud Firestore로 실시간 업데이트 가져오기  |  Firebase

 

 

 

그래서 이 기능을 사용해서 작성한 트윗들이 바로바로 반영되게 만들어 보겠음

 

 

 

 

https://goodteacher.tistory.com/543

[vue 3] 12.Vue 객체의 라이프 사이클

 

onBeforeMount를 사용하여 tweets 를 가져온다.

 

    const tweets = ref([]);

    //트윗 실시간 가져오기

    onBeforeMount(() => {

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

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

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

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

            tweets.value.splice(change.newIndex, 0, change.doc.data());

          }

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

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

          }

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

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

          }

        });

      });

    });

 

• change.type === "added": 새로운 문서가 추가되었을 때는 tweets 배열에 해당 문서 데이터를 삽입합니다.
• change.type === "modified": 기존 문서가 수정되었을 때는 tweets 배열에서 해당 문서 데이터를 수정합니다.
• change.type === "removed": 문서가 삭제되었을 때는 tweets 배열에서 해당 문서 데이터를 제거합니다.

라는 뜻임 

 

그리고 그 배열을 return으로 전달 한 후 

    return { currentUser, tweetBody, onAddTweet, tweets };

 

트윗 컴포넌트에 tweet이라는 이름으로 전달한다. 

      <!-- 트윗 -->

      <Tweet

        v-for="tweet in tweets"

        :key="tweet.id"

        :currentUser="currentUser"

        :tweet="tweet"

      />

    </div>

 

 

 

 

 

트윗 컴포넌트에서는 props로 tweet을 받아서 사용할거임 

<script>

import moment from "moment";

export default {

  props: ["currentUser", "tweet"],

  setup() {

    return {

      moment,

    };

  },

};

</script>

 

 

 

근데 create_at의 경우 우리가 아는 날짜 형식으로 나오지 않기 때문에 

 

moment 라는 라이브러리를 설치하여 쉽게 우리가 원하는 형식으로 바꿔줄거임 

 

 

 

 

 

 

 

moment(tweet.created_at)만 작성하면 날짜 전체가 나오고 format도 변경이 가능하나

이번에 구현하고자 하는 것은 이 트윗이 몇 시간 전에 생성이 되었는지를 

표시하고자하기에 fromNow를 사용했다. 

<!-- 트윗들 -->

  <div

    class="flex px-3 py-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer"

  >

    <img

      :src="currentUser.profile_image_url"

      class="w-10 h-10 rounded-full hover:opacity-80 cursor-pointer"

    />

    <div class="ml-3 placeholder:flex-1 flex flex-col">

      <div class="text-sm space-x-1">

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

        <span>@</span>

        <span class="text-gray-500 text-xs">.</span>

        <span class="text-gray-500 text-xs">{{

          moment(tweet.created_at).fromNow()

        }}</span>

      </div>

      <!-- 트윗 바디 -->

      <div>

        {{ tweet.tweet_body }}

      </div>

      <!-- 트윗 아이콘 -->

      <div class="flex justify-between">

        <div class="text-gray-500 hover:text-primary">

          <i class="far fa-comment hover:bg-blue-50 rounded-full p-2"></i>

          <span class="ml-1 text-sm">{{ tweet.num_comments }}</span>

        </div>

        <div class="text-gray-500 hover:text-green-500">

          <i class="fas fa-retweet hover:bg-green-50 rounded-full p-2"></i>

          <span class="ml-1 text-sm">{{ tweet.num_retweets }}</span>

        </div>

        <div class="text-gray-500 hover:text-red-500">

          <i class="far fa-heart hover:bg-red-50 rounded-full p-2"></i>

          <span class="ml-1 text-sm">{{ tweet.num_likes }}</span>

        </div>

        <div class="text-gray-500 hover:text-primary">

          <i class="far fa-share-square hover:bg-blue-50 rounded-full p-2"></i>

        </div>

      </div>

    </div>

  </div>

</template>

 

 

 

위와 같이 코드를 수정하면  이렇게 출력된다. 

현재 uid부분이 문제인데 이것은 다음 포스트에서  트윗의 uid를 통해 email을 가져오도록 코드를 수정할 예정

 

 

 

https://www.npmjs.com/package/moment

moment