본격적으로 fetcher를 사용해서 SWR을 사용해야했다. 뭔가 추후 편리를 위해서 먼저 axios instance 생성 및 axios interceptor를 설정해줘야겠다는 생각을 하게 해주었다.
전 프로젝트에서는 이런식으로 모든 요청에 대해서 아래와 같은 식으로
인터셉터를 구현했다. 공홈에서 제시하는 그대로 ㅎㅎ;;
https://axios-http.com/docs/interceptors
Interceptors | Axios Docs
Interceptors You can intercept requests or responses before they are handled by then or catch. axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(functio
axios-http.com
이것저것 검색해보다가 배울만하다고 생각한 것을 가지고 왔다. 이렇게도 셋업할 수 있구나라는 생각이들어서 이번에는 이 분 방식으로 한번 따라해보려고 한다.
https://brunch.co.kr/@14e1a0684a6c4d5/6
Axios 인터셉터 Typescript로 관리하기
Axios Interceptor 타입스크립트로 설정하기 | 이번 주제는 Axios Interceptor with TypeScript입니다.타입스크립트로 Axios Interceptor를 설정하는 방법은 무엇인지,그리고 저는 어떤 식으로 Axios Interceptor를 세팅
brunch.co.kr
일단 api 폴더에 대한 path shortcut부터 추가해줬습니다.
그리고 위에 블로그 따라서 interceptor에서 구성을 해보았습니다.
그리고 Axios Instance를 생성함과 동시에 해당 인터셉터 씌워주었고, 각 메소드에 대해서 추상화를 해줘서 사용하기 쉽게 했습니다.
Loggin이 일단 잘되는거 확인했고, 추후에 Error Handling을 처리하는건 추가해야할 것 같습니다.
'Project > Slack-Cloning' 카테고리의 다른 글
| Section 4 - Summary (1) | 2023.02.27 |
|---|---|
| Property 'activeClassName' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes' (0) | 2023.02.11 |
| dotenv setting for webpack without CRA (0) | 2023.02.11 |
| Section 2 Summary (0) | 2023.02.09 |
| CRA 없이 프로젝트 셋팅하기 (0) | 2023.01.31 |