개발을 진행하면서 HTTP 요청을 다루게 되는데, 이때 많은 경우에 반복되는 패턴이나 코드를 발견할 수 있다. 토큰을 헤더에 포함시키거나, 공통된 에러처리 등이 그 예다. 이러한 반복적인 코드를 줄이고, 더 효과적으로 코드를 관리하기 위해 Axios 인스턴스와 인터셉터를 사용하는 방법에 대해 알아보자. Axios 인스턴스 생성 먼저, 반복적으로 사용되는 Axios 설정을 추상화하기 위해 Axios 인스턴스를 생성한다. Axios 인스턴스는 주어진 설정으로 초기화된 새로운 Axios 요청을 만들어낸다. 이렇게 생성된 인스턴스는 설정이 미리 적용되어 있으므로, 각 요청에서 이 설정을 반복하지 않아도 된다. // customApi.ts import axios, { AxiosInstance } from 'axi..
배경 개발을 하다 보면 항상 에러를 마주하기 마련이다. 그리고 터미널에 띄워주는 오류는 문제해결을 할 수 있는 아주 큰 도움을 주는 건 사실이다. 하지만 위에 보여주는 에러는 내가 믿고 거르는 에러이다. 보통은 오류의 권고는 아주 유용하지만 이 케이스는 유용하지 않은 경우이다. 오류 메세지를 보면 act에서 코드를 감싸라고 권고하는데 여기서는 그렇게 해선 안된다. 비슷한 에러중 하나는 Warning: Cant' perform a React state update on an unmounted component. 라고 하는 에러다. 이 두 가지 오류 중 하나가 나타났다면 아마도 원인은 테스트가 끝난 뒤에 컴포넌트가 바뀌기 때문이다. 이게 무슨 소리냐면, 일부 비동기 상태 업데이트가 완료되기 전에 테스트 함수..
배경 다음과 같은 간단한 페이지를 테스트하려고 했다. _app.tsx const App = ({ Component, ...rest }: AppPropsWithLayout) => { const { store, props } = wrapper.useWrappedStore(rest); const getLayout = Component.getLayout ?? ((page) => page); return ( {getLayout()} ); }; export default App; Login.tsx const Login = () => { const dispatch = useAppDispatch(); useEffect(() => { dispatch(routerSlice.actions.loadLoginPage()); }..
1. 요즘.. 현재 진행 중인 토이프로젝트인 https://www.link-archive.com/ 는 북마크가 가능한 SNS 서비스이다. 관심 있는 URL을 저장할 수 있고 다른 사람의 URL을 둘러볼 수 있으며 북마크를 해서 가져올 수 있는 서비스이다. 요즘 구직활동 + 이슈해결 + 스터디로 블로깅을 최근에 못했다. 많고 많은 이슈 중에 오늘은 토큰을 재발급하는 이슈를 해결해서 블로그를 작성하려고 한다. 2. 정책 우선 현재 우리 서비스 정책을 간단하게 알려보자면, AccessToken, RefreshToken을 이용 중이고 AccessToken은 JWT로 stateless 하게 보안을 확인 중이다. AccessToken은 만료기한은 2시간, RefreshToken은 만료기한이 30일이다. Refres..
