API 2

백엔드에서 요구한 데이터 구조에 맞춘 API 타입 설계

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

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

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

Project Records 2025.01.24