HttpClient

개요

HTTP 요청을 보내는 방법은 여러가지가 있습니다.

오래된 비동기 통신 기술인 XMLHttpRequest 부터 최신 웹 표준인 fetch, 브라우저와 Node.js에서 모두 사용할 수 있는 axios 등 다양합니다.

최근 Angular를 사용하고 있음에도 XMLHttpRequest를 사용하는 분을 봤습니다.

XMLHttpRequest는 브라우저 네이티브 자바스크립트 객체로, AJAX 기술의 핵심이며 비동기적으로 서버와 통신하는데 사용됩니다.

하지만 오래된 방식의 비동기 통신 기술로, 현재 많은 사람들이 사용하고 있는 HTTP 통신 도구에 비해 사용법이 다소 복잡하고 편의성이 낮아 지양되고 있는 방법입니다.

Angular 진영에서는 많은 사람들이 자체적으로 제공하는 모듈인 HttpClient를 사용하고 있고 Angular에서도 이를 권장하고 있습니다.

HttpClient는 @angular/common/http에서 가져올 수 있습니다.

Angular에서 HttpClient 사용을 권장하는 이유는 다음과 같습니다.

HttpClient는 간단하고 직관적인 API를 제공하여 HTTP 요청을 처리하는 것을 쉽게 만들어줍니다.

메서드 체이닝을 통해 요청을 구성하고, Observable을 반환하여 비동기 요청을 쉽게 처리할 수 있습니다.

HttpClient는 제네릭 타입을 지원하여 서버로부터 반환되는 데이터의 타입을 강제화할 수 있습니다.

이를 통해 컴파일 시간에 타입 오류를 잡을 수 있어 안정성이 높아집니다.

HttpClient는 인터셉터를 사용하여 요청과 응답을 중간에 가로채고 수정하는 기능을 제공합니다.

이를 통해 공통적인 로직을 중복 없이 구현할 수 있고, 헤더를 추가하거나 에러를 처리하는 등의 작업을 수행할 수 있습니다.

현재 제가 투입되어 있는 프로젝트에서도 인터셉터를 적극적으로 활용하고 있습니다.

HttpClient는 Angular의 보안 기능과 함께 작동합니다.

기본적으로 CSRF 방어를 지원하고, CORS 정책을 준수하는데 도움을 줍니다.

Angular의 Dependency Injection 시스템과 잘 통합되어 의존성을 주입하고 관리하기가 용이합니다.

HttpClient는 자동으로 JSON 데이터를 파싱하여 Javascript 객체로 반환해줍니다.

HttpClient는 Angular의 TestBed와 함께 사용하여 유닛 테스트를 수행하기 쉽습니다.

Angular의 HttpClient는 아래 공식 문서의 순서에 따라 진행하면 많은 도움이 됩니다.

Angular

angular-doc.ru