Algorithm Cinema

"기존 백엔드에서 요구한 데이터 구조를 기반으로, 프론트엔드 협업을 위한 API 데이터 타입을 어떻게 정의하고 왜 그렇게 구성하는가?"스스로에게 정말 많이 던졌던 질문이다.한번 파헤쳐보자!1. 실제 백엔드에서 주는 /notices API 응답 구조HTTP Method: GETBody 없음 (GET 요청이기 때문에 일반적으로 body에 데이터를 담지 않음)모든 데이터는 query parameter로 전달됨{ "content": [ { "title": "[공지] ...", "date": "2025.04.08", "category": "career", "link": "https://..." } ], "pageable": { "pageNumber": 0,..

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

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