2025/02/10 2

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

🔹 1. 문제 상황 및 개요📌 문제: 로그인 후 예산 데이터를 확인하기 전에 페이지가 먼저 이동하는 문제사용자가 로그인하면 기존 예산 데이터를 확인한 후 페이지를 이동해야 함하지만 비동기 요청(fetchBudget())이 완료되기 전에 페이지 이동 코드가 실행됨결과적으로, 예산이 있는 경우에도 /goal-setting으로 이동하거나 잘못된 데이터를 표시하는 문제 발생🛠 해결 목표✅ 로그인 성공 후, 기존 예산 데이터를 가져온 후 페이지 이동✅ 비동기 요청(fetchBudget())이 끝날 때까지 goalAmount 값을 기다린 후 페이지 전환✅ UI 깜빡임을 방지하고 자연스러운 화면 전환 제공🔹 2. 비동기 요청과 await의 개념📌 비동기 요청이란?비동기(asynchronous) 요청은 백엔드..

본격 연동 #4 로그인 후 기존 컨텍스트(데이터)가 있으면 메인 페이지로 이동하는 방법 (React + Context API + Axios)

🚀 개요 및 문제상황사용자가 처음 회원가입 후 로그인을 하면, 매달 자신의 첫 가계부에 필요한 예산을 설정합니다. 저는 이 예산을 전역 상태 관리로 하였습니다. -> goalContext.jsx 그러나, 분명 로그인 로직에는 goalAmount가 있으면 -> mainPage.jsx, 없으면 -> goal-setting.jsx로 가게끔 설계를 했는데제 코드의 의도와는 다르게 계속 오류가 났습니다. 심지어, 이미 로그인을 하여 예산 설정을 한 사용자도 다시 goal-setting으로 가는 문제상황이 발생했습니다. -> 서버(백엔드 개발자)는 한 달에 딱 한번 예산을 설정할수 있게 설계를 했는데 이 땜에 두 번 예산 설정을 하면 오류가 나는 최악의 상황이었습니다. 정리하면1. 의도치않은 리다이렉션 불가2. ..