API 2

본격 연동 #7. API 함수에서의 능동적인 에러 처리 (409, 404)

제목을 아래 처럼 지을까 고민도 했었습니다만.. API 에러 처리를 통해 Context와 연결하여 해결하는 과정 각설하고, 1. 문제 상황처음 회원가입한 사용자가 getBudget() API를 호출했을 때, 서버에서 409 Conflict 오류가 발생하여 예산 데이터가 없을 경우 앱이 정상적으로 작동하지 않는 문제가 발생했습니다.이 문제를 해결하기 위해:이때 API 함수 내부에서 에러를 처리해야하는지, 아니면 컴포넌트 핸들러에서 처리해야하는지 고민하다 글을 씁니다. 제가 생각한 아이디어는API 함수 내부에서 409 에러를 처리하여 null을 반환하도록 수정하고,Context에서 API 데이터를 불러올 때 null을 안전하게 처리하여 UI가 깨지지 않도록 개선했습니다.사실 2번에 방식에서 null을 안전하..

⏿ 실제 백엔드와 프론트엔드 통신 #4. Axios Instance에서 셋의 비동기적 공존

요청 인터셉터, 응답 인터셉터, 리프레쉬 토큰 함수는 axios Instance에서 비동기 함수로 선언되어있다. 요청 인터셉터와 응답 인터셉터의 역할 1. 요청 인터셉터: 서버와 통신 전 필요한 작업 -> 서버야 주세요! 하기전 작업입니다. 로컬스토리지부터 권한을 받아옵니다.  • 요청 인터셉터는 모든 API 요청 전에 호출됩니다.  • 주 역할: 1. 헤더 추가: • 요청마다 엑세스 토큰(또는 인증 정보)을 자동으로 헤더에 추가.  2. 요청 수정: • 예: URL을 동적으로 변경하거나, 특정 조건에 따라 요청을 수정.  3. 디버깅/로깅: • 요청이 서버에 도달하기 전에 요청 정보를 기록. 2. 응답 인터셉터: 서버 응답 후 필요한 작업 • 응답 인터셉터는 서버에서 응답을 받은 직후 호출됩니다.  •..

FrontEnd Develop 2025.01.24