본격 연동 #5. 비동기 처리의 이해로 로그인 후 리다이렉션 처리

🔹 1. 문제 상황 및 개요

📌 문제: 로그인 후 예산 데이터를 확인하기 전에 페이지가 먼저 이동하는 문제

• 사용자가 로그인하면 기존 예산 데이터를 확인한 후 페이지를 이동해야 함
• 하지만 비동기 요청(fetchBudget())이 완료되기 전에 페이지 이동 코드가 실행됨
• 결과적으로, 예산이 있는 경우에도 /goal-setting으로 이동하거나 잘못된 데이터를 표시하는 문제 발생

🛠 해결 목표

✅ 로그인 성공 후, 기존 예산 데이터를 가져온 후 페이지 이동
✅ 비동기 요청(fetchBudget())이 끝날 때까지 goalAmount 값을 기다린 후 페이지 전환
✅ UI 깜빡임을 방지하고 자연스러운 화면 전환 제공

---

🔹 2. 비동기 요청과 await의 개념

📌 비동기 요청이란?

• 비동기(asynchronous) 요청은 백엔드 서버에 데이터를 요청한 후, 응답이 올 때까지 기다리지 않고 코드가 계속 실행되는 방식
• 예를 들어, 로그인 요청을 보냈을 때 서버 응답을 기다리는 동안 다른 코드가 먼저 실행될 수 있음
• 결과: fetchBudget()이 실행되었지만, 완료되지 않은 상태에서 페이지가 이동하여 잘못된 goalAmount 값이 사용될 수 있음

📌 await은 무엇인가?

• await은 비동기 요청이 완료될 때까지 기다리는 기능
• await을 사용하면, 해당 요청이 끝날 때까지 코드 실행을 멈추고 기다림
• 결과적으로, 예산 데이터가 확실히 로드된 후 페이지가 이동할 수 있도록 보장할 수 있음

---

🔹 3. 기존 코드에서 발생한 문제  ( 비동기 함수에 await을 넣지 않았음)

const handleLogin = async (e) => {
  e.preventDefault();
  setLoading(true);

  try {
    const data = await login(email, password);
    const { accessToken, refreshToken } = data.data;

    localStorage.setItem('accessToken', accessToken);
    localStorage.setItem('refreshToken', refreshToken);

    setFetchingBudget(true);
    const budgetAmount = fetchBudget(); // ❌ 여기에서 await이 없으면 비동기 요청이 완료되기 전에 다음 코드 실행됨
    setFetchingBudget(false);

    // ❌ 비동기 요청이 끝나지 않은 상태에서 budgetAmount를 확인하여 페이지 이동
    if (budgetAmount !== null && budgetAmount > 0) {
      navigate('/main');
    } else {
      navigate('/initial');
    }
  } catch (error) {
    console.error('로그인 실패:', error);
  } finally {
    setLoading(false);
  }
};

⚠️ 문제점  -> 예산을 가지고오기도 전에 바로 navigate될 가능성이 농후함.. ㅠ

1. fetchBudget()이 실행되었지만, 완료되지 않은 상태에서 budgetAmount 값을 확인하려고 함
2. 비동기 요청이 끝나기 전에 navigate()가 실행되어 잘못된 페이지로 이동할 수 있음
3. 결과: 기존 예산이 있는 사용자도 /goal-setting으로 이동할 가능성이 있음

---

🔹 4. 해결 방법: await을 사용하여 비동기 요청이 끝날 때까지 기다리기

const handleLogin = async (e) => {
  e.preventDefault();
  setLoading(true);

  try {
    const data = await login(email, password);
    const { accessToken, refreshToken } = data.data;

    localStorage.setItem('accessToken', accessToken);
    localStorage.setItem('refreshToken', refreshToken);

    setModalMessage({
      type: 'success',
      message: '로그인 성공! 예산 데이터를 불러오고 있습니다!',
    });

    // ✅ fetchBudget()이 완료될 때까지 기다림
    setFetchingBudget(true);
    const budgetAmount = await fetchBudget();
    setFetchingBudget(false);

    console.log('🏦 로그인 후 받은 예산 금액:', budgetAmount);

    // ✅ 비동기 요청이 끝난 후 페이지 이동 (500ms 대기 → UI 깜빡임 방지)
    setTimeout(() => {
      navigate(budgetAmount !== null && budgetAmount > 0 ? '/main' : '/initial');
    }, 500);
  } catch (error) {
    console.error('로그인 실패:', error);
    setModalMessage({
      type: 'error',
      message: '로그인 실패! 다시 시도해주세요.',
    });
  } finally {
    setLoading(false);
  }
};

---

🔹 5. await이 적용된 후 비동기 특성을 고려한 흐름

📌 로그인 버튼 클릭 → 로그인 요청 → 로그인 성공 → fetchBudget() 실행 → 데이터가 로드될 때까지 await으로 대기 → budgetAmount 확인 → 페이지 이동

 

1️⃣	handleLogin() 실행	사용자가 로그인 버튼을 클릭하면 실행
2️⃣	await login(email, password)	로그인 요청을 보내고 응답을 받을 때까지 기다림
3️⃣	토큰 저장	accessToken, refreshToken을 localStorage에 저장
4️⃣	await fetchBudget()	서버에서 예산 데이터를 가져올 때까지 기다림
5️⃣	budgetAmount 확인	예산이 있으면 /main으로 이동, 없으면 /initial으로 이동
6️⃣	setTimeout()	UI 깜빡임 방지를 위해 500ms 대기 후 페이지 이동

---

🚀 최종 정리

✔️ 비동기 요청(fetchBudget())이 완료될 때까지 await을 사용하여 대기
✔️ 기존 예산 데이터를 완전히 가져온 후 페이지 이동
✔️ UI 깜빡임을 방지하고 자연스러운 화면 전환을 제공 (setTimeout(500ms))

---

🎯 최종 결론

🔥 await fetchBudget()을 사용하여 서버에서 데이터를 가져올 때까지 기다린 후 페이지를 이동함으로써
✔️ 잘못된 페이지 이동 방지
✔️ UI 깜빡임 방지
✔️ 사용자 경험(UX) 개선

이제 로그인 후 기존 예산이 있는 사용자는 바로 메인 페이지로 이동하고,
새로운 사용자는 예산을 설정하도록 안내하는 /goal-setting 페이지로 이동할 수 있습니다! 🚀🔥