inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

json-server & axios : CRUD 구현

PostEditView 에서 수정 후, PostDetailView 에서의 데이터 동기 문제

해결된 질문

371

작성자 없음

작성한 질문수 0

0

[문제점]

PostEditView 에서 post 데이터를 수정한 후,

PostDetailView 로 이동했을 때, 수정된 데이터가 아닌

이전 데이터가 출력되는 문제 발생.

 

[테스팅]

json-server 를 최신 버전으로 업해서 테스트 >> 개선안됨.

다양하게 코드를 변경하며 테스트를 해봤지만 개선안됨.

PostDetailView 에서 ref, reactive 를 변경하며 다양하게 시도했지만 개선 안됨.

 

[원인]

  1. updatePost 함수가 수행 후 반환 하더라도 json-server
    내부적으로 실제 데이터 갱신에 시간이 걸리는 것이 아닌지 의심됨.

  2. udatePost 후, getPostById 로 데이터를 가져와 콘솔에 출력하면, 갱신되기 전의 데이터가 출력되는 것으로 보아 vue cache or refresh 문제는 아닐 것으로 생각됨.

 

[임시해결]

const onUpdate = async () => {
	try {
		await updatePost(props.id, form);
		nextTick(async ()=> {
			const { data } = await getPostById(props.id);
			console.log('After updatePost, data: ', data);
			// router.push({ name: 'PostDetail', props: {id: props.id} });
			router.back();	
		});		
	} catch (error) {
		console.log('onUdate error: ', error);
	}
};

 

다음 Tick 에서 getPostById 함수를 이용하여 갱신된 데이터를 조회(시간 지연 및 데이터 확인)하고 PostDetailView 로 이동하면 제대로 출력됨...

a. 위 코드에서 출력되는 데이터는 갱신 전의 데이터가 출력됨.
b. 위 코드에서 getPostById 로 데이터 조회를 빼면 PostDetailView 에 갱신 이전 데이터가 출력됨.

c. 위 코드에서 router push, go, back 함수 무엇을 쓰던 현상은 동일함.

 

보다 정확한 문제 원인 또는 문제 해결 방법이 있을까요 ??

 

vue.js

답변 2

1

초천재

안녕하세요

updatePost 함수 구현 문제였습니다.

promise 객체를 반환하고 있지 않은 상태에서 onUpdate 에서 await 를 수행하고 있었습니다.

또한 json-server 버전이 1.0.0-alpha.21 버전이었는데, ID 가 문자열로 변경되는 문제가 있었습니다.

 

답변 감사드립니다.~

0

짐코딩

안녕하세요 🙂

아래 패키지들은 강의에서 사용한 패키지 버전정보입니다.

"dependencies": {
  "axios": "^0.27.2",
  "bootstrap": "^5.1.3",
  "bootstrap-icons": "^1.8.1",
  "dayjs": "^1.11.2",
  "pinia": "^2.0.14",
  "vue": "^3.2.33",
  "vue-router": "^4.0.15"
},
"devDependencies": {
  "@rushstack/eslint-patch": "^1.1.0",
  "@vitejs/plugin-vue": "^2.3.1",
  "@vue/eslint-config-prettier": "^7.0.0",
  "eslint": "^8.5.0",
  "eslint-plugin-vue": "^8.2.0",
  "json-server": "^0.17.0",
  "prettier": "^2.5.1",
  "unplugin-vue-components": "^0.19.5",
  "vite": "^2.9.5"
}

node_modules 디렉토리와 package-lock.json 파일 삭제 후 npm install 로 재설치해서 다시 시도해 보시겠어요?

json-server 주요 버전이 변경돼서요.

 

그리고 updatePost 함수 내부 코드도 보여주실 수 있을까요?

질문드립니다.

0

32

0

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

0

39

2

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

0

34

1

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

0

33

1

질문드립니다.

0

32

2

라우터 인스톨 후 실행안됨

1

49

2

코드 자동 포매팅 질문

0

68

2

필터 watchEffect 질문입니다.

0

52

1

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

0

113

1

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

0

69

2

unplugin-vue-components

0

83

2

TypeError 질문

0

52

1

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

1

57

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

72

2

중첩된 컴포넌트 문제

0

75

2

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

0

109

2

useAxios Proxy(Object) RefImpl

0

114

1

axios timeout

0

330

3

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

0

123

2

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

0

169

2