Nuxt4의 네비게이션 이동

현우

Apr 25, 202614h ago

Created by

현우

Created at

Apr 25, 2026 10:26 AM

카테고리

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