[트러블슛팅]axios-mock-adapter 라이브러리 (react에서) 사용할 때 주의점

낭만개발자·2022년 6월 22일
0

트러블슛팅

목록 보기
15/17

문제

api 주소엔 문제가 없고 document 대로 했다고 했는데 계속 404 error가 뜨는것이다. stackOverFlow랑 git issue 다 찾아봤는데 정확한 해결법이 없었고,

export default new MockAdapter(axios)

이부분을 import 해서 사용하는 구조라 import 할때 마다 instance를 생성하니까, 인스턴스 남발땜에 안되는 줄 알았다. 단일의 인스턴스 싱글톤으로 구현해야 되나?? 라 생각하던 중에.. 뭐가 문젠지 설정 하나하나를 지워보던중에..
전에 내가 주석쳐놓은 문구를 발견했다.

그래서 위 import를 혹시나 해서 주석 쳐보니 되던 userListpage가 -> 404 error로 되던거임.

저기 import file은 어떤 거냐면?

위 사진처럼 mock Instance를 활용해 onGet, onPost등 서버단을 mock 형태로 구현해둔거이다.

즉 서버단 구현 (mock.onGet, mock.onPost.. 바로 위 사진) 부분
그걸 사용하는 UserListPage.tsx (그 위의 사진) 파일안에 들어가 있어야 한다!! (왜냐면 그걸 주석치니까 404뜨는걸 보면..)

공식 document도 보면

서버 구현과 사용 부분을 한 파일에 두고 있다. 괜히 분리 했다가 import 안해서 404뜨고 삽질하고 있었음.

profile
낭만닥터와 슬의를 보고 저런 개발자가 되어야 겠다고 꿈꿔봅니다.

0개의 댓글