페이지 구현을 모두 완료했지만 게시글이 나오지 않습니다.여기저기 찾아봐도 알 수가 없네요.뭔가 문제인 건가요?.. 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>

만약 페이지네이션이라면 어떻게 할지 궁금해서 여쭤봅니다. 물론 구글링도 해보고 혼자만든 플젝에서 더미데이터 등을 이용해서 페이지네이션은 해봤지만 제가 원하는 부분을 정확히 못 찾은 것 같기도 하고, 페이지네이션을 이용해서 서버와 연동은 안해봐서 궁금합니다! 먼저 게시판이라고 예를 든다면 서버와 연동할 때 1|2|3|4|5 이런 페이지가 만약에 있다면 1페이지를 누르면1-10까지의 글을 보여주고, 2페이지를 누르면 11-20까지를 보여준다면,  페이지 번호와 limit을 서버에 보내주고 받은 게시글 데이터들을 배열에 저장해서 보여주는 식으로 가는 것이 맞을까요 ? 또 궁금한 점이 노드버드에서는 스크롤링을 해서 concat으로 추가를 해주는 형식인데, 페이지네이션에서는 concat 처럼 추가가 되는 것이 아닌 페이지 번호 클릭 혹은 next,prev 버튼 클릭시 마다 보여주는 목록이 다르기 때문에 클릭시 마다 서버에서 받아온 값으로 초기화를 시켜주는 것이 맞을까요 ?

안녕하세요? 섹션 4 강의 컬렉션 조회 페이징을 보고 질문 드립니다. 주문 조회 V3.1에서 페이징을 위해 jpa.properties.hibernate.default_batch_fetch_size=100, @BatchSize를 사용하거나 또는 V5에서 Map, groupBy를 이용하여 DTO 직접 조회Order에 대하여 페이징이 가능하다는 것을 알았습니다. 그런데 만약 Order 페이징 + OrderItem 페이징(예를 들어 주문을 10건 중 비싼 아이템 2건만 조회하기)같은 경우에는 어떻게 적용이 가능한가요? public List<OrderQueryDto> findAllOpt(){ List<OrderQueryDto> result = findOrders(); // 기존의 ToOne 쿼리 List<Long> orderIds = result.stream() // in 쿼리를 위한 id 뽑기 .map(o -> o.getOrderId()) .collect(Collectors.toList()); List<OrderItemQueryDto> orderItems = findMap(orderIds); Map<Long, List<OrderItemQueryDto>> orderItemMap = orderItems.stream() .collect(Collectors.groupingBy(OrderItemQueryDto::getOrderId)); result.forEach(o -> o.setOrderItems(orderItemMap.get(o.getOrderId()))); return result; } public List<OrderItemQueryDto> findMap(List<Long> orderIds) { return em.createQuery( "select new queryDto(파라미터들)" + " from OrderItem oi" + " join oi.item i" + " where oi.order.id in :orderIds", OrderItemQueryDto.class) .setFirstResult(0) .setMaxResults(2) .setParameter("orderIds", orderIds) .getResultList(); ) } 이렇게 Limit를 걸었을 때 UserA 2건 뜨고 UserB는 null 이 뜨더군요.  다른 방법을 찾아본 결과 https://bottom-to-top.tistory.com/45 처럼 방향을 반대로 하여 ManyToOne으로 조회하는 방법도 있다는것을 알았습니다. 결국엔 Order 페이징 + OrderItem 페이징 까지 접목시키려면 ManyToOne으로 조회하는 방법밖에 없을까요?