인프런 커뮤니티 질문&답변

페이지 구현을 모두 완료했지만 게시글이 나오지 않습니다.

여기저기 찾아봐도 알 수가 없네요.

뭔가 문제인 건가요?.. Axios API, 컴포넌트 매핑도 확인했고 dev서버, db서버도 모두 확인했습니다.

  {
    path: '/posts',
    name: 'PostList',
    component: PostListView,
  },

import axios from 'axios';

export function getPosts(params) {
  return axios.get('http://localhost:5000/posts', { params });
}

// PostListView.vue

<template>
  <div>
    <h2>게시글 목록</h2>
    <hr class="my-4" />
    <form @submit.prevent>
      <div class="row g-3">
        <div class="col">
          <input v-model="params.title_like" type="text" class="form-control">
        </div>
        <div class="col-3">
          <select v-model="params._limit" class="form-select">
            <option value="3">3개씩 보기</option>
            <option value="6">6개씩 보기</option>
            <option value="9">9개씩 보기</option>
          </select>
        </div>
      </div>
    </form>
    <hr class="my-4" />
    <div class="row g-3">
      <div v-for="post in posts" :key="post.id" class="col-4">
        <PostItem :title="post.title" :content="post.content" :createdAt="post.createdAt" @click="goPage(post.id)">
        </PostItem>
      </div>
    </div>
    <nav class="mt-5" aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item" :class="{ disabled: !(params._page > 1) }">
          <a class="page-link" href="#" aria-label="Previous" @click.prevent="--params._page">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li v-for="page in pageCount" :key="page" class="page-item" :class="{ active: params._page === page }">
          <a class="page-link" href="#" @click.prevent="params._page = page">{{ page }}</a>
        </li>
        <li class="page-item" :class="{ disabled: !(params._page < pageCount) }">
          <a class="page-link" href="#" aria-label="Next" @click.prevent="++params._page">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <hr class="my-5" />
    <AppCard>
      <PostDetailView :id="1"></PostDetailView>
    </AppCard>
  </div>
</template>

<script setup>
import PostItem from '@/components/posts/PostItem.vue';
import PostDetailView from './PostDetailView.vue';
import AppCard from '@/components/AppCard.vue';
import { getPosts } from '@/api/posts';
import { ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { computed } from '@vue/reactivity';

const router = useRouter()
const posts = ref([])
const params = ref({
  _sort: 'createdAt',
  _order: 'desc',
  _page: 1,
  _limit: 3,
  title_like: ''
})

// Pagination
const totalCount = ref(0)
const pageCount = computed(() => {
  Math.ceil(totalCount.value / params.value._limit)
})

const fetchPost = async () => {
  try {
    const { data, headers } = await getPosts(params.value);
    posts.value = data;
    totalCount.value = headers['x-total-count']
  } catch (error) {
    console.error(error)
  }
}
watchEffect(fetchPost)

const goPage = (id) => {
  router.push({
    name: 'PostDetail',
    params: { id }
  })
}
</script>

<style lang="scss" scoped></style>