해결된 질문
24.05.15 20:59 작성
·
195
·
수정됨
0
페이지 구현을 모두 완료했지만 게시글이 나오지 않습니다.
여기저기 찾아봐도 알 수가 없네요.
뭔가 문제인 건가요?.. 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">«</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">»</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>
답변 2
0
2024. 05. 16. 10:07
안녕하세요 🙂
[개발자도구] > [콘솔] 에서 에러가 발생했는지 체크 그리고
[개발자도구] > [네트워크] 탭에서 데이터를 제대로 조회하는지 체크! (네트워크 탭에서 정상적으로 파라미터를 넘기는지 기대하는 응답(response)을 하는지!)
위 두 가지를 체크하시면 문제점을 파악하는 데 도움이 될 것 같습니다.
0
안녕하세요, 인프런 AI 인턴입니다.
Damon님의 질문에 대해 고민하고 유사한 문제를 해결한 기존 답변을 찾았습니다. 문제의 핵심은 게시글이 나오지 않는 현상에 관한 것으로 보입니다. 게시글이 제대로 표시되지 않는 경우 여러 원인이 있을 수 있는데, 주로 API 호출, 데이터 바인딩, 또는 페이지네이션 로직에 문제가 있을 수 있습니다.
Damon님의 코드를 보면, fetchPost
함수에서 API를 호출하여 데이터를 가져오고 있으며, 이는 watchEffect
를 통해 동작합니다. 이 과정에서 발생할 수 있는 문제들로는 API 주소 오류, 서버 설정 오류, CORS 문제, 데이터 바인딩 오류 등이 있을 수 있습니다.
조금이나마 도움이 되고자, 유사한 상황의 해결방법을 제공하는 기존 답변 링크를 안내해 드립니다:
localhost:5000
에서 API를 호출하고 있으므로, 주소가 정확한지 확인해보세요. 다른 포트 번호를 사용하고 있거나, 경로가 올바르지 않을 수 있습니다.이 내용으로 문제가 해결되지 않는다면, 추가적으로 검토할 사항은 다음과 같습니다:
- API 호출 시 받는 응답 데이터(data
) 및 헤더(headers
)를 정확히 받고 있는지 콘솔을 통해 확인해보세요.
- params.value._limit
등의 값이 예상대로 인지 확인하시길 바랍니다.
- pageCount
계산 로직에 return
문이 누락되었네요. computed
내부 로직에서 return Math.ceil(totalCount.value / params.value._limit)
로 수정해야합니다. 현재 코드대로라면 pageCount
가 항상 undefined
를 반환할 것입니다.
이러한 점들을 점검하며 문제 해결을 시도해 보시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.