Algorithm Cinema

0. TanStack Query의 대한 기본지식클래식한 API 통신은 클래식한 방식 (useEffect + useState을 활용하여 아래처럼 한다.const [data, setData] = useState(null);const [loading, setLoading] = useState(false);const [error, setError] = useState(null);useEffect(() => { setLoading(true); fetch('/api/users') .then(res => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false));}, []);어떤 문제상황이 발생할까?컴포넌트가 언..

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

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