Vue/Firebase 이용해서 홈페이지 만들기 (9) - Firebase 게시판 실시간 조회로 변경하기

오늘의 목표

게시판을 실시간으로 조회하도록 변경하자. (정적 -> 동적)

---

#1. 기존의 read는 사용하지 않으므로 삭제

#2. subscribe (onSnapshot 구독) / unsubscribe (구독해지)

 

---

#1. 기존의 read는 사용하지 않으므로 삭제

 - 기존의 read는 버튼을 눌러야만 데이터를 가져와서 뿌려주는 방식으로 실시간으로 알아서 읽히도록 (다음에서 좋아요/싫어요 실시간으로 바뀌는 것처럼) read 메소드는 과감히 삭제하자

 

#2. subscribe (onSnapshot 구독) / unsubscribe (구독해지)

 - subscribe : 화면이 렌더링되기 전 (created 메소드) firestore의 게시판을 구독하자. (onSnapshot)

  created () {
    this.subscribe() // 페이지 렌더링 전에 구독
  },
  
  ...
  
  methods: {
    subscribe () {
      this.unsubscribe = this.$firebase.firestore().collection('boards').onSnapshot((sn) => {
        if (sn.empty) {
          this.items = []
          return
        }
        this.items = sn.docs.map(v => {
          const item = v.data()
          return {
            id: v.id,
            title: item.title,
            content: item.content
          }
        })
      })
    },
  ...

 - unsubscribe : 다른 화면으로 전환될 때 (destroyed 메소드) firestore의 구독을 해지하자. (unsubscribe)
                        해당 구독해지를 하지 않으면 내가 다른 페이지를 보고 있을 때 게시판에 누가 글을 쓰거나 댓글을 달 때
                        내 입장에서는 다른페이지의 변경이 일어났지만 읽기를 계속 할 것임. (나중에 비용 문제가 발생할 수 있다.)

  destroyed () {
    if (this.unsubscribe) {
      this.unsubscribe() // 다른 페이지 넘어갈 때 구독 해지
    }
  },

 - 이제 글을 쓰거나 수정, 삭제했을 때 실시간으로 게시판에 바뀌도록 동작한다.

 

※ 해당 내용은 아래의 사이트에서 강의를 보며 실습한 내용입니다.

memi.dev

 

---