[API] Argument of type '{ date: string; sabun: string; }' is not assignable to parameter of type 'AxiosRequestConfig<any>'.
보통 delete method에선 input이 없어야 하는데 온보딩 요구사항대로 하면 input이 존재해야 한다.
🧙 이러한 경우 객체로 보내고자 하는 데이터들을 data 객체로 감싸주면 된다.
const res = await instance.delete(`/record`, { date, sabun });
// ===========> fix
const res = await instance.delete(`/record`, { data: { date, sabun } });🔗 Error Argument is not assignable to parameter of type 'AxiosRequestConfig'
[Axios] api 호출시 마다 매번 header를 업데이트하지 못하는 현상
axios.create()로 api instance 생성하여 headers에 바로 토큰을 넣어서 api 요청시 로그인 후 새로고침하지 않으면 토큰을 정상적으로 받아오지 못하는 현상이 발생했다.
이는 axios가 매번 header를 업데이트하지 않아서 토큰도 이에 따라 새로고침 전까지는 authorization에 토큰 값이 들어가 있지 않게 된 것이다.
🧙 로그인 후 새로고침을 한번 해줘야 토큰을 받아오고, 토큰에 따른 접근 권한을 받아와 생성, 수정, 삭제 기능을 처리할 수 있다.
이에 대한 해결 방안을 찾아보다가 interceptor를 사용하는 방법을 알게 되어 적용해보았고, 정상적으로 새로고침을 하지 않아도 토큰을 잘 받아오게 되었다.
interceptor는 axios가 요청을 발생할 때마다 작동하여 토큰을 바로바로 업데이트할 수 있게 해주기 때문에 정상적으로 동작하게 됨!
🔗 axios request마다 authorization 업데이트 하는 방법 ( interceptor ) - 짜구's WIKI
🔗 axios interceptor을 이용한 토큰 처리
🔗 axios interceptor를 이용해서 headers 설정하기
[React-Toastify library] 아이콘 크기 깨짐 현상
라이브러리를 그대로 사용할 경우 아래와 같이 style의 size가 깨져보이는 현상이 발생한다.
🧙 import "react-toastify/dist/ReactToastify.css"; css파일을 함께 Import해주면 해결!
[React-Query] useQuery 사용시 받은 매개변수가 있는 경우 데이터가 변경되지 않는 현상
useQuery의 첫번째 파라미터 배열 내의 2번째 원소는 params를 뜻하는데 이를 써줘야 상세 페이지에서 params 즉, Id 값이 바뀔 때마다 이에 해당하는 데이터를 호출해주게 된다.
두번째 원소를 써주지 않으면 데이터가 바뀌지 않음,,
const { data: detailData } = useQuery(["getDetailData", id], () => getSingleUserData(id!));