getPosts(params.value) 이슈

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

axios 모듈 & Vite 환경 변수 설정 (env)

작성

251

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 { data, headers } = await getPosts()로 요청하면 db.json에서 요청한 GET을 모두 가져오는데 params.value만 넣으면 가져오질 않습니다.

Axios 모듈, 라우터 모두 다 점검해 봤지만 에러는 나지 않고 있습니다.

vue.js axios http get postlistview.vue

답변 3

damon

질문자

추가2) json-server의 `title_like` 이슈!!

https://stackoverflow.com/questions/77867124/json-server-get-poststitle-like-server-not-working

게시글 검색하는 기능을 구현하는데 기능이 작동하지 않는 문제를 발견했습니다.

※ 원인: PostListView.vue의 params 객체인 title_like 가 json-server 최신 버전에서 작동되지 않음

json-server 버전에 손 안 대고 문제를 해결해 보려 하였으나.. 해결하지 못 해서

그냥 json-server를 삭제하고 0.17.0 버전으로 다운그레이드 해서 사용했습니다!

(다른 분들은 저처럼 최신버전 설치했다가 시간낭비하지 말고 다운그레이드 하셔서 강의 내용대로 따라하시길..)

짐코딩 강의에서는 json 개발 서버로 설치했으니, npm uninstall -D json-server를 복사하여 삭제하시고

npm i -D json-sever@0.17.0을 복사하여 다시 json-server를 설치하세요!

(혹시나 전역서버로 설치하신 분들은 -D만 g로 바꿔서 그대로 실행하시면 됩니다)

완료하시면 아래의 기존 코드로 잘 작동됩니다:)

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

잠시!! package.json 파일에 json-server가 0.17.0버전으로 설치 잘 되었는지 확인하시기 바랍니다!

"devDependencies": {
    "json-server": "^0.17.0"
  }

짐코딩

지식공유자

안녕하세요.

아래 사항을 체크해 보시겠어요?

params.value 가 기대하는 값이 제대로 넘어가는지 확인
그리고 json-server 라이브러리도 강의 버전과 동일한지 확인

damon

질문자

axios만 점검하고 json-server를 점검해야 하는 줄 몰랐네요!

알고보니 버전이 달라지면서 요청하는 방식도 조금 달라졌습니다.

바뀐방식

GET /memo?_sort=id 
// 오름 차순

GET /memo?_sort=-id 
//내림 차순

출처: https://velog.io/@joyoung/json-server-sort-order-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%84%A4%EC%9D%B4%EC%85%98-%EC%9A%94%EC%B2%AD%EB%B3%B4%EB%82%B4%EA%B8%B0

const params = ref({
  _sort: '-createdAt',
  _page: 1,
  _limit: 3,
  title_like: ''
})

해결했습니다 감사합니다:)

damon

질문자

response 배열은 빈값으로 나옵니다.

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