네트워크 탭에 type이라는 것이 있다.
개발을 하면서 디버깅을 위해 네트워크 탭을 확인하고 있었는데, 어떤 것은 xhr이고, 어떤 것은 fetch로 type이 나뉘어져 있었다.
권한이 필요한 부분은 axios instance를 만들어서 사용하고 나머지 부분은 점진적으로 fetch api로 migration하고 있었는데, axios가 xhr로 동작한다는 사실을 처음 알게 되었다.
라이브러리를 선택할때 어떻게 동작하는지 알지 못한 채 사용한 것 같아 지금이라도 바로 잡기 위해 어떤 차이점이 있는지 찾아보았다.
XHR
XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.
source by mdn
오래되고 이름부터 XML이 들어가있어 마치 xml로 데이터 교환을 해야 할 것 같지만, 현재는 다앙햔 데이터 타입(json)을 지원한다.
fetch
Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다.
source by mdn
MDN의 소개에 XHR을 대체한다고 적혀있다.
어떤 점이 바뀌어서 XHR을 대체하게 되었을까?
다른 점
응답처리
XHR은 콜백을 받아서 responseText, responseXML 등을 통해 응답을 처리한다.
fetch는 promise를 기반으로 동작하고 response.json(), response.text()를 사용한다.
cors
XHR은 cors를 위한 추가 설정이 필요하다.
fetch는 cors에 대한 기본 지원이 있어 간단하게 처리할 수 있다.
파일 업로드 및 다운로드
xhr은 파일 업로드와 다운로드를
이 부분은 최근에 개발하면서 겪기도 했다. form data를 보내기 위해 당연히 Content-Type에 "multipart/form-data"를 명시해줬는데 boundary를 위해 명시가 아닌 자동 설정 기능을 활용해야 한다는 것을 알게 됐었다.
xhr에서는 progress 이벤트를 통해 업로드 진행률 데이터를 받을 수 있다.
fetch에서는 AbortController를 사용해서 요청에 대한 추가 정보를 얻을 수 있다. (아직 실험적인 기능이라고 함.)
어떤 것을 사용해야할까?
XHR을 사용하는 것은 복잡하지만, axios instance를 사용하게 되면 개발 향상성이 눈에 띄게 올라가기 때문에 고려해볼 필요가 있다.
지원하는 브라우저를 고민하자.
xhr은 일단 구형브라우저에서도 원활하게 지원된다.
fetch는 기본적으로 es6 이상을 지원하는 브라우저에서 동작한다.
따라서, fetch를 구형 브라우저에서 동작하게 하려면 폴리필하는 과정을 거쳐야 하는데 fetch를 폴리필하면 xhr로 변환해서 사용하기도 한다.
es6 이상이면 xhr을 사용할 이유가 있나요?
fetch는 애초에 xhr을 대체하기 위해 사용되므로 간단한 인터페이스 관리를 위해 fetch를 우선적으로 사용하도록 하자.
굳이 axios 같은 추가 모듈을 설치하여 코드에 의존성을 더 할 필요는 없다고 생각이 든다.
다만, 인터셉터와 같은 기능을 구현하기에 fetch는 꽤 어려울 수도 있다.
추가로 알아두면 좋은 점
fetch를 사용하다보면 다음과 같은 패턴을 발견하게 된다.
fetch(url)
.then((response) => response.json())
.then((data) => /*handle data..*/)왜 fetch로 받아온 서버 응답을 response.json()을 통해 json으로 가공하여 사용해야 할까?
일단 fetch는 promise를 2번 반환한다.
fetch는 header를 먼저 받고 response를 반환한다. (아직 body가 없는 상태, 추가로 axios는 헤더와 응답을 동시에 받아온다.)
만일 대용량 데이터를 받는다고 가정하면 Chunk로 나누어서 데이터를 받는 것이 효율적이다. (점유하지 않고 메모리를 나눠쓸 수 있음) 데이터를 나눠받다보니 사용자 경험도 향상시킬 수 있다.
아무말
개발병으로 복무할 때 axios로 요청을 보내면 쿠키가 저장이 되지 않았던 문제가 있었다. (fetch로 했을 땐 됐다..)
cors 문제는 아니었는데, 어째서 그랬을까 라는 생각이 든다.
예외적으로 fetch를 사용하긴 했었는데 다시 해당 에러 로그를 보면 탐구하여 해결하고 싶다. ㅠㅠ..
참고하면 좋은 블로그 게시글
xhr부터 fetch를 스스로 탐구하시면서 파악한 게시글이라 조금 더 자세히 알고 싶다면 읽기를 추천한다.
배민 개발자이신 김정환님께서 올리신 포스팅으로 fetch 함수가 왜 2번의 promise를 사용하는지에 대해 정리된 내용이다.
