Q&A 게시판 구현하기 - Part 3 게시글 조회수 업데이트

 Q&A 게시판에서 조회수를 업데이트하는 기능을 구현 방법 기록

---

사용자가 게시글을 클릭하여 상세 내용을 확인할 때마다 해당 게시글의 조회수를 증가시키는 기능입니다. 이 기능을 통해 게시글의 인기도와 관심도를 측정할 수 있습니다.

 

1. 조회수 업데이트 로직 구현

조회수 업데이트 로직은 게시글 상세보기 컴포넌트인 BoardDetail.vue와 Vuex 상태 관리 모듈을 통해 구현됩니다.

 

Vuex 상태 관리 모듈 (board/index.js)

먼저, Vuex 상태 관리 모듈에서 조회수 업데이트를 위한 mutation 함수를 정의합니다.

import dayjs from "dayjs";

export default {
  state: {
    boardList: [], // 게시글 목록 데이터
    answerList: [], // 답변 목록 데이터
  },
  mutations: {
    // 새로운 게시글을 추가하는 변이 함수
    on__Insert(state, payload) {
      let { writer, date, subject, content, status } = payload;
      let id = state.boardList.length ? state.boardList[0].id + 1 : 1;
      state.boardList.unshift({
        id,
        subject,
        writer,
        content,
        date,
        hit: 0,
        status,
      });
    },
    // 게시글에 대한 답변을 추가하는 변이 함수
    on__answer(state, payload) {
      let date = dayjs().format("YYYY-MM-DD");
      state.answerList.push({ answer: payload.answer, id: payload.id, date });
      state.boardList.find((item) => item.id === payload.id).status = true;
    },
    // 조회수를 업데이트하는 변이 함수
    hit__Update(state, payload) {
      state.boardList.find((item) => item.id == payload).hit++;
    },
  },
  getters: {
    fnGetBoardList: (state) => state.boardList,
    fnGetAnswerList: (state) => state.answerList,
  },
};

위 코드에서 hit__Update 변이 함수는 payload로 전달된 게시글 ID에 해당하는 게시글의 조회수를 1 증가시킵니다. state.boardList에서 id가 payload와 일치하는 게시글을 찾아 hit 값을 증가시킵니다.

 

 

2. 게시글 상세보기 컴포넌트 (BoardDetail.vue)

BoardDetail.vue 컴포넌트는 사용자가 게시글을 클릭하여 상세 내용을 확인할 때 조회수를 업데이트하도록 구현됩니다.

<script>
export default {
  data() {
    return {
      item: null,
      managerDate: "",
      answer: "",
      answerList: null,
      managerEamil: "",
    };
  },
  created() {
    // 게시글을 클릭할 때 조회수를 업데이트합니다.
    this.$store.commit("hit__Update", this.$route.params.id);
    // Vuex 상태에서 게시글 데이터를 가져옵니다.
    this.item = this.$store.getters.fnGetBoardList.find(
      (item) => item.id === this.$route.params.id
    );
    // Vuex 상태에서 답변 데이터를 가져옵니다.
    this.answerList = this.$store.getters.fnGetAnswerList.find(
      (item) => item.id === this.$route.params.id
    );
    this.managerEamil = this.$store.getters.fnGetLogined.email;
  },
  computed: {
    show() {
      return this.managerEamil === "manager@gmail.com";
    },
    changeDarkMode() {
      return this.$store.getters.fnGetDark;
    },
  },
  methods: {
    answerPost() {
      this.$store.commit("on__answer", {
        answer: this.answer,
        id: this.$route.params.id,
      });
      this.answerList = this.$store.getters.fnGetAnswerList.find(
        (item) => item.id === this.$route.params.id
      );
    },
  },
};
</script>

created 라이프사이클 훅에서 this.$store.commit("hit__Update", this.$route.params.id)를 호출하여 게시글을 클릭할 때마다 조회수를 업데이트합니다. 이때, this.$route.params.id는 현재 라우트의 id 파라미터를 사용하여 해당 게시글을 식별합니다.

 

 

3. 주요 포인트 정리

• 조회수 업데이트 로직: 게시글 ID를 이용하여 Vuex 상태 관리 모듈에서 조회수를 업데이트합니다.
• 변이 함수: hit__Update 변이 함수는 state.boardList에서 해당 게시글을 찾아 hit 값을 증가시킵니다.
• 게시글 상세보기 컴포넌트: BoardDetail.vue 컴포넌트의 created 라이프사이클 훅에서 조회수를 업데이트합니다.
• 라우트 파라미터: 현재 라우트의 id 파라미터를 사용하여 특정 게시글을 식별합니다.

조회수를 잘 봐주세요