Nuxt4의 네비게이션 이동
작성자
- 현우
작성시각
카테고리
Empty
상태
Empty
담당자
Empty
참여자
최근활동
현우
아래 로직이 있다고 가정을 해보자
async function handleLogin() {
errorMessage.value = "";
isPending.value = true;
try {
await auth.login(email.value, password.value);
const userId = auth.user!.id;
navigateTo(path.user(userId));
} catch (e: any) {
errorMessage.value = e?.data?.message ?? "로그인에 실패했습니다.";
} finally {
isPending.value = false;
}
}자꾸 로그인이 완료되었는데, 로딩 처리가 마친 후 (이때, 버튼의 텍스트는 로딩 중.. 에서 로그인하기로 바뀐 상태) 30초 있다가 유저 상세 페이지로 이동하게 되어 버튼의 텍스트가 이상하게 보이는 현상이 발생했다.
navigateTo 는 내부적으로 Promise 를 반환하게 되는데, await 을 붙이면 페이지 이동이 완전히 끝날 때까지 try 블록에서 기다리게 된다. 그래서 현재 위의 상황에서는 navigateTo 에서 await 키워드가 없었기에 네비게이션 중에도 isPending = false 버튼이 잠깐 다시 활성화될 수 있는 것이다.
여기서 await 키워드 없이 호출하고 있던 것은 navigateTo Promise를 호출하면서 "나중에 알아서 백그라운드에서 처리해" 라고 백그라운드에 던져두고 다음 코드를 실행하는 것이기 때문에 네비게이션 자체는 백그라운드에서 계속 진행되고 메인 흐름은 finally 로 넘어가게 되는 것이다.
await
await은 Promise가 resolve 될 때까지 기다리는 것이지, Promise를 실행시키는 것이 아니다.
navigateTo(path.user(userId)); // 실행 O, 결과 기다림 X
await navigateTo(path.user(userId)); // 실행 O, 결과 기다림 O