프로젝트를 진행하게 되면 서버와 클라이언트 간의 HTTP통신을 통해 데이터를 주고 받게 된다. 나는 이 과정에서 JavaScript ES6버전의 내장 라이브러리인 fetch를 사용했었는데, 생각해보니 내가 왜 쓰는지에 대한 고민없이 당연하게 사용을 했었던것 같다.
당장 배운것을 적용하기에 급급한 나머지 뒤쳐지지 않기 위해 기능 구현에만 집중했었는데, 이번 프로젝트에서는 당연시 여겼던 state를 왜 쓰고, recoil을 왜 사용하고, styled Component는 왜 사용하는지 등 내가 적는 코드 하나하나에 근거를 가지고 작성해야겠다.

Axios

공식문서에 따르면 'Promise based HTTP client for the browser and node.js'라고 소개하고 있다. 비동기로 HTTP 통신을 가능하게 해주며 return을 promise로 해주는데, 여기서 Promise는 JavaScript 비동기 처리(특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는)의 결과(success or fail)를 나타내는 객체이다. 따라서, response 데이터를 다루기가 쉽다.

장점

• 브라우저 호환성이 좋음 (IE11 지원)
• response timeout(응답 초과 시간) 처리 가능 --> 시간안에 요청되지 않으면 에러 처리
• JSON 데이터 자동 변환
• 요청 취소 가능
• Error 발생시에 reject 로 response를 전달해 catch로 잡아낼 수 있음

단점

• 사용을 위한 모듈 설치

(출처: geeksforgeeks)

결론

사실 fetch 와 Axios사이의 특별하게 큰 차이점은 없는것 같다. 뭔가 Axios가 0.5단계정도 더 좋은 느낌인데, 브라우저의 호환성이 더 좋다는 것은 결국 제공중인 서비스에서 더 많은 유저들의 트래픽을 받을 수 있고, 이는 기업으로 하여금 구매전환율 성장의 가능성이 있음으로 이번 프로젝트에서는 Axios로 HTTP통신을 시도해봐야겠다.