inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

getPosts(params.value) 이슈

375

Boai

작성한 질문수 2

0

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

0

Boai

추가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를 설치하세요!

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

 

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

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"
  }

0

짐코딩

안녕하세요.

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

  • params.value 가 기대하는 값이 제대로 넘어가는지 확인

  • 그리고 json-server 라이브러리도 강의 버전과 동일한지 확인

2

Boai

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: ''
})

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

0

Boai

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

질문드립니다.

0

32

0

unplugin-vue-components 질문드립니다.

0

37

2

강의듣다가 헷갈려서 질문드립니다.

0

31

1

와 짐코딩님 강의 들으면서 느끼는게 많네요.

0

32

1

질문드립니다.

0

31

2

라우터 인스톨 후 실행안됨

1

48

2

코드 자동 포매팅 질문

0

68

2

필터 watchEffect 질문입니다.

0

50

1

json-server 오류가 다른게 뜨네요

0

112

1

미리보기가 안됩니당...

0

69

2

unplugin-vue-components

0

80

2

TypeError 질문

0

51

1

v-model="show" :show="show" 같이 사용?

1

56

1

hash 모드 배포의 필요성?

0

61

2

.eslintrc.cjs 가 없습니다

0

95

2

title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.

0

98

3

_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.

0

64

1

@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.

0

71

2

중첩된 컴포넌트 문제

0

75

2

교안에 있는 부분이 아닌가요?

0

109

2

useAxios Proxy(Object) RefImpl

0

113

1

axios timeout

0

325

3

강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.

0

122

2

컴포넌트 분리 부분에서 오류가 나요ㅠㅠ

0

167

2