Axios Instance 사용하기
코드의 재사용성과 유지보수성을 높이기 위해 axios 인스턴스를 만들어보면서,
끝없는 디버깅이 시작되었다.
내가 axios 인스턴스를 만들고자 하는 목적은
baseURL을 설정하여 서버 주소가 변경되더라도 한 곳에서 수정하면 모든 요청에 반영되도록 할 수 있도록 사용하는 것인데,
위 코드 스니펫처럼 axios.create메소드를 통해 사용 가능하다.
문제발생 - TypeError
TypeError: relativeURL.replace is not a function
원인 코드
import { testApi } from "./configInstance";
export const getTestResults = () =>
testApi
.get()
.then((res) => res.data)
.catch((error) => console.error(error));
export const createTestResult = (resultData) =>
testApi
.post(resultData)
.then((res) => res.data)
.catch((error) => console.error(error));
export const deleteTestResult = (id) =>
testApi.delete(`/${id}`).catch((error) => console.error(error));
export const updateTestResultVisibility = ({ id, visibility }) =>
testApi
.patch(`/${id}`, { visibility })
.catch((error) => console.error(error));처음엔 이게 맞는 줄 알았더랬지..
당시 비슷하게 axios 인스턴스를 만들어 회원가입/로그인/유저정보조회 및 변경까지 가능하길래, 같은 형식이면 괜찮겠지 했던 게 에러를 낳았다.
해결
- 원인은 axios 사용하는 부분에서 URL에 들어갈 자리에 객체가 들어갔기 때문.
- parameter의 위치를 명심하자!
결국 체크아웃을 했다가 브랜치를 팠다가 머지를 했다가 계속 테스트 끝에,, 수정하고 뭔가 찝찝해서 병합도 해버렸다.
전수조사. 하다보니 위에 선언한 변수명과 아래 baseURL의 변수명도 달랐더랬다.
해결방법
url을 넣어줘야하는 부분에 객체를 넣어줘서 생긴 문제였다.
객체에서 url을 꺼내서 다시 넣어주니 에러가 해결되었다.
[TypeError: relativeURL.replace is not a function]
깃허브에서 충돌을 해결하고 병합까지 완료.
엄청 부산하게 남아버린 나의 커밋 히스토리.
사실 시작은 제일 밑에 axios instance로 리팩토링을 할 때 부터였다는 것.
ㅋㅋㅋㅋ mbti 검사 문항이 많아서, 문항 수를 줄였다가, 새 테스트를 미뤘다가 하다 보니 버그 잡는 일이 너무 늦어버린 느낌^^;
정말 커밋 작은 단위로 하는 게 중요하단 걸 깨닫는 하루였다.
사라져라 나의 뻘짓기록 :lol
FrontEnd Developer