자바스크립트에서 http 통신을 하기 위해 처음에는 fetch를 사용했었다.
fetch가 기본 내장 함수이기도 했고, 사용하는데 큰 불편함을 느끼지 못했어서 fetch함수를 이용해 http 통신을 했다.
하지만 이후에 Axios로 바꾸게 되었는데 이유는 Axios에서 제공해주는 여러 기능들 때문이였다.
Axios를 이용하기로 마음먹은 이유에 대해 정리해보려고 한다.
잘 사용하던 fetch 함수에서 Axios로 변경하려고 한 이유
나는 처음 회사부터 1인 프론트엔드로 근무를 했다.
입사 전 교육 과정에서 fetch로 통신하는 경험만 해봤기 때문에 처음부터 fetch를 사용하게 되었다. 다른 지인 개발자들이 Axios가 좋다고 많이들 이야기 했는데, 어떻게 사용하는지만 찾아보고 잘통신 하던 프로젝트를 굳이 Axios로 변경하지는 않았다.
이후 추가적인 기능이 필요해 Axios를 찾아보면서, 새로운 기술에 대한 내 생각도 많이 바뀌었던거 같다.
기존에는,
"좋은 기술이긴 한것 같은데 지금 적용되어 있는 기술로도 충분한것 같은데?"
라는 사고방식이 였다면 이후에는,
"사람들이 좋다고 하는데 이유가 있다, 조금 더 깊게 찾아보고 적용해 본 다음에 판단하자"
로 바뀌었다.
개발할 때의 생각까지 바꾸게 된 Axios에서 사용하고자 한 기능들
- 요청 정보를 가지고 있는
config - 미들웨어 같이 요청 전, 후를 가로챌수 있는 interceptor
- 서버와의 통신 시간이 오래 걸리면 timeout 시키는 기능
- json 처리
여러 가지 기능이 있겠지만 제일 크게 다가온건 위의 기능들이다.
모두 구현하려면 직접 구현할 수 있겠지만, Axios에서는 아주 쉽게 사용이 가능하다.
이런 기능이 필요하게 된 계기는 토큰 만료시 토큰을 갱신하고 재요청하는 기능을 개발하다가 검색해보니 Axios가 편리했다는걸 알았고, 인기있는 새로운 기술을 봤을때 적용 해봐야 되겠다. 라고 결심한 계기가 되었다.
아래는 Axios의 이런 편한 기능을 사용해서 개발했던 기능이다.
[axios] 토큰 만료시 재요청
아래는 react native에서 axios timeout이 작동되지 않아 직접 구현했던 내용이다.
[react native] axios timeout not working
