inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

라우터 네비게이션을 이용한 데이터 호출 방법

mixin에서 기존 fetch내용을 주석처리 해야 하나요?

242

주니어백엔드

작성한 질문수 25

1

영상의 진행과 제 실행결과가 좀 달라 질문드립니다.

영상 내용에서, /news 라우트에 beforeEnter() 안에 fetch 하는 내용을 집어넣으면서, ListMixin안에 있던 fetch하는 코드를 제거하신 건지 아닌지 영상에서는 명확하지가 않습니다.

영상 속에서는 웹페이지가 ask->news로 라우트를 변경할 때는 아무것도 변화가 없고, ask->jobs로 라우트를 변경할 때는 잘 변경됩니다.

영상 속에서 ListMixin의 fetch하는 코드를 제거한 건지 그대로 두고 진행한 건지 헷갈려서 저는 두 가지 모두로 진행해봤는데요, 어느 경우에도 영상과 같은 결과가 나오지 않았습니다.

우선 

내비게이션 가드는 위와 같이 news에만 적용한 상태이고, ask와 job는 건들지 않았습니다. next();를 끝에 첨가하지 않은 상태입니다.

 

1. ListMixin의 fetch하는 코드를 제거하지 않은 경우

 

위와 같이, ask-> news로 넘어갈 때 news 컴포넌트는 로딩이 되지 않지만(여전히 ask가 검정색입니다.)

아래의 list-item은 news 를 fetch한 결과대로 바뀌어 있습니다. 영상 속에서는 아예 ask가 로딩되어 있을 때 모습 그대로였는데 말이죠.

제 생각에는 next(); 가 없어 아직 news 라우트로 넘어가진 않았지만 그 앞의 fetch()는 이미 진행이 되어 store의 list의 내용이 변경이 되었기 때문에 그것이 바로 반영된 것인 것 같습니다.

ask->jobs로 넘어갈 때는 영상과 동일합니다.

 

 

2. ListMixin에서 fetch하는 코드를 제거한 경우

ask->news로 넘어갈 때는 영상과 동일하게 아예 ask일때 모습그대로 변화가 없지만,

위 사진과 같이 ask->job로 넘어갈 때는 라우트는 완전 jobs로 변경이 되었지만, list-item들이 여전히 ask의 것입니다.

beforeEnter는 routes/index.js에서 /news에만 적용되어있고, ListMixin에서조차 fetch하는 코드가 사라져서 jobs의 정보를 불러오지 못해 store.state.list의 내용이 바뀌지 않은 것이라고 생각했습니다.

그러나 영상에서는 ask->jobs로 넘어갈 때는 아무런 문제가 없죠.

 

정리하면, 영상 내에서와 같은 상황이 도저히 안 만들어집니다. ListMixin 속 fetch하는 코드를 없애지 않은 경우와 없앤 경우 둘다 시도해보아도 영상과 같은 상황은 나오지 않았습니다.

왜인지 알려주시면 감사하겠습니다!

 

javascript vuejs

답변 1

0

캡틴판교

안녕하세요, 강의에서 전달해 드린 아래 2가지 포인트를 견지하시면서 다시 강의 내용 살펴보시면 좋을 것 같습니다 :)

- 페이지 진입 전 데이터를 모두 준비해 놓고 페이지에 진입할 때는 beforeEnter

- 페이지에 진입하자마자 바로 데이터를 호출해 올 때는 created

깃 권한 요청 드립니다

0

68

1

깃 권한 신청

0

62

1

깃 권한 요청드립니다.

0

120

1

깃허브 권한 요청 드립니다

0

154

1

깃허브 권한 요청 드립니다

0

169

1

깃허브 권한 요청 드립니다

0

176

1

깃허브 권한 요청 드립니다.

0

158

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

214

1

ide 타입추론 기능 사용할 수 없을까요??

0

218

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

239

1

Vue3로 진행중입니다

1

341

1

Vue router-link 사용시 같은 url이면

1

512

1

vue3 에러 메세지...

1

686

2

id ="app" 중복

0

278

2

use undefined 에러가 나옵니다.

1

330

2

깃허브 권한 요청드립니다.

1

366

2

권한요청드립니다.

1

305

2

Vue3에서 구글 애드센스 탑재하기

1

441

2

코드가 정상 작동 되는건지 ...

1

315

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

254

1

vuex 적용시 질문

1

298

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

388

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

458

2

권한요청 드립니다!

1

278

2