서버 통신/Axios
-
axios 커스텀 hook interceptors는 뭔가요? ( + 타 계정으로 로그인 시 전의 로그인 계정 정보가 맨 처음에 불러와지는 현상)서버 통신/Axios 2022. 12. 11. 18:50
1. 문제 상황 타 계정으로 로그인 시 전의 장바구니 목록이 처음에 렌더링 되었다가 새로고침 후 현재 계정 장바구니 정보를 가져옴 처음에는 useEffect나 useState에 문제가 있는 줄 알고 해당 부분에 대해 검색해보고 이것 저것 시도해보았으나 전부 실패했다. (정말 많은 시간을 할애함..) 혹시나 싶어서 내가 만든 axios 커스텀 hook 인 *instance를 살펴봤다. *instance.js : 서버와 통신할 때의 baseURL 과 headers에 로그인 토큰을 가져와 설정해둔 hook 로그인 토큰을 로컬스토리지에 저장했었는데, 맨 처음에 렌더링 될 때 토큰이 개발자 도구에 뜨지 않는 것을 보고 아 문제는 axios 커스텀 hook 에서 생겼구나 싶었다. 뭔가 윤곽이 잡히는 것 같아 신나는..
-
Axios baseURL과 header 매번 적기 귀찮으니까 axios.create([config])서버 통신/Axios 2022. 9. 10. 21:06
전에 youth-gallery 팀 프로젝트를 할 때는 매번 baseURL과 headers를 적어줬었던 것 같다. 헷갈리기도 하고 혹시 잘못 적어 어이없는 오류가 발생할 수 있기 때문에 이번 개인 프로젝트에서는 axios.create()를 사용하기로 했다. 1. 간단한 소개 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', headers: { 'X-Custom-Header': 'foobar' }, timeout: 1000, }); 위의 예제처럼 만들어주면 되는데... 엄청 간단했는데 왜 알고 있었는데 전에는 사용하지 않았을까 싶은 마음이 든다. 2. 내가 활용한 방식 우선 나는 토큰을 포함한 것과 토큰 없이 baseURL만 있..