inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경

then(()=> next()) 와 then(next())

383

ceze

작성한 질문수 14

1

route에서 .then(() => next()) 이렇게 적게 되면

화면이 이동할 때 깜박이는 현상이 있습니다. git 코드를 받아보니 .then(next()) 라고 변경되어 있는걸 확인했습니다.

실제 강의에서는 then( () => next() )

이렇게 진행을 하셨는데, 이렇게 할 경우 list 라는 변수를 공유하고 있기 때문에 데이터를 갱신 한 뒤에,

next가 호출이 되서 이전 화면에서 데이터가 바뀐 데이터로 변경된 뒤에 transition 효과로 사라지기 때문에, 

같은 데이터가 사라지고 (새로운 화면으로 이동하고) 다시 생겨서 마치 깜박이는 것처럼 보이게 되는데 그래서 .then(next())로 변경하신 걸까요 ?

이 경우는 프로미스 실행 전에 수행이 되니까 실제로는 store에서 dispath 하기 전에 next를 불러준 것과 같은 효과 맞을까요 ?

 

답변 부탁드립니다. 미리 감사 드립니다

promise route vuejs javascript

답변 1

0

캡틴판교

안녕하세요 eze님, 말씀하신 then(next())는 틀린 문법인데요. 강의 내용 다시 한번 확인해 주시겠어요? :)

0

ceze

깜박임이 발생해서 차이를 확인하고자 git에서 소스를 받아 보았는데

강의에는 () => next() 라고 설명을 하셨는데 git에는 then(next())로 작성이 되어 있습니다.

https://github.com/joshua1988/vue-advanced/blob/10_refactoring-fetching/vue-news/src/routes/index.js

실제로 동작도 () => next()를 하게 되면 미묘한 깜박임이 발생하고 위의 깃 소스대로 하게 될 경우, 깜박임이 없습니다. 

 

+ 가장 마지막 git 소스를 받아서 실행할 경우 말씀하신대로 () => next()로 되어있지만, 미묘한 깜박임이 발생합니다.

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

145

1

깃허브 권한 요청 드립니다

0

162

1

깃허브 권한 요청 드립니다

0

168

1

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

0

154

1

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

0

209

1

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

0

207

1

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

0

228

1

Vue3로 진행중입니다

1

338

1

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

1

507

1

vue3 에러 메세지...

1

671

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

319

2

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

1

359

2

권한요청드립니다.

1

299

2

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

1

437

2

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

1

303

1

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

1

244

1

vuex 적용시 질문

1

288

2

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

1

385

2

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

1

455

2

권한요청 드립니다!

1

275

2