📖프레임워크 없는 프론트 개발을 읽고 - 5장. HTTP 요청

웹 프론트엔드 개발자로 성장하기 위해 우테코에서 추천받은 책을 읽고

✔️ AJAX

Asynchronous Javascript and XML 의 약자로
페이지를 완전히 다시 로드하지 않고 최초 페이지로 로드 후 필요한 데이터만 서버에서 로드하는 새로운 기술

AJAX와 비AJAX의 아키텍처의 차이

이미지 출처

• 비AJAX 애플리케이션은 브라우저가 HTTP요청을 하게되면 서버는 HTML+CSS 또는 XML+데이터를 주는 방식이다
• AJAX 애플리케이션은 브라우저가 HTTP요청을 하게되면 JSON데이터만 전달하게 된다.

AJAX의 장점

• 1. 변경되는 일부분만 갱신 가능하다.
• 2. 웹 페이지가 로드된 후 서버로 데이터 요청이 가능하다.
• 3. 웹 페이지가 로드된 후 서버로부터 데이터 응답이 가능하다.
• 4. 백그라운드 영역(다른 쓰레드 ex. 힙메모리 영역)에서 서버로 데이터를 보낼 수 있다.

✔️ REST

REperesentational State Transfer의 약자로 웹서비스를 디자인하고 개발하는 방법이다. 모든 REST API의 추상화는 리소스에 있다.
도메인을 리소스로 분할해야 하며 각 리소스는 특정 URI로 접근해 읽거나 조작할 수 있어야 한다.

REST API 치트 시트

동작	URI	HTTP 메서드
모든 사용자의 데이터 읽기	https://api.example.com/user/	GET
ID가 '1'인 사용자의 데이터 읽기	https://api.example.com/user/1	GET
새로운 사용자 생성	https://api.example.com/user/	POST
ID가 '1'인 사용자의 데이터 교체	https://api.example.com/user/1	PUT
ID가 '1'인 사용자의 데이터 업데이트	https://api.example.com/user/1	PATCH
ID가 '1'인 사용자의 데이터 삭제	https://api.example.com/user/1	DELETE

PUT 메서드는 HTTP요청의 본문에 새로운 사용자의 모든 데이터를 전달해야한다.
PATCH 메서드는 이전 상태와 차이만 포함한다.

✔️ XMLHttpRequest

콜백으로 기반으로 하는 HTTP 클라이언트의 핵심인 request 메서드다.

• 완료된 요청 : onload 콜백
• 오류로 끝난 HTTP : onerror 콜백
• 타임아웃된 요청 : ontimeout 콜백

디폴트로 타임아웃은 없지만 객체의 timeout속성을 수정하면 타임아웃을 변경할 수 있다.
HTTP 클라이언트의 공개 API는 Promise를 기반으로 하기 때문에
request메서드는 표준 XMLHttpRequest요청을 새로운 Promise 객체로 묶는다.
공개 메서드 get,post,put,patch,delete는 코드를 더 읽기 쉽게 해주는 request 메서드의 레퍼(적절한 매개변수를 전달하는)다.

XMLHttpRequest를 사용한 HTTP 요청의 흐름

1. 새로운 XMLHttpRequest 객체 생성
2. 특정 URI로 요청을 초기화
3. 요청(헤더 설정, 타임아웃 등)을 구성
4. 요청 전송
5. 요청이 끝날때 까지 대기
   a. 요청이 성공적으로 끝나면 onload 콜백 호출
   b. 요청이 오류로 끝나면 onerror 콜백 호출
   c. 요청이 타임아웃으로 끝나면 ontimeout 콜백 호출

✔️ Fetch

원격 리소스에 접근하고자 만들어진 새로운 API다.
목적은 Request나 Response같은 많은 네트워크 객체에 대한 표준 정의를 제공하는 것이다.
이 방식으로 이 객체는 ServieWorker와 Cache같은 다른 API와 상호 운용 할 수 있다.

✔️ Axios

다른 방식과 가장 큰 차이는 브라우저와 Node.js에서 바로 사용할 수 있다는 것이 특징인 서버와 통신하는 라이브러리다.
Promise를 기반으로 하고 있어 Fetch API와 매우 유사하다.

✔️ 적절한 HTTP API를 선택하는 방법

1. 호환성

Fetch API는 최신 브라우저에서만 동작하기 때문에 이전 버전에 브라우저에서 동작하게 하려면 Axios나 XMLHttpRequest를 사용해야 한다.
익스플로러의 지원의 중단으로 Fetch API를 권장한다.

2. 휴대성

Fetch API와 XMLHttpRequest는 모든 브라우저에서 동작하지만 Node.js나 리엑트 네이티브 같은 다른 JS환경에서 코드를 실행해야 하는 경우 axios가 매우 좋은 솔루션이다.

3. 발전성

Fetch API의 가장 중요한 기능 중 하나는 Request나 Response 같은 네트워크 관련 객체의 표준 정의를 제공하는 것이다.
이 특성은 ServiceWorker API나 Cache API와 잘맞기 때문에 코드 베이스를 빠르게 발전시키고자 하는 경우Fetch API를 매우 유용한 라이브러리로 만들어준다.

4. 보안

axios에는 cross-site requet 위조나 XSRF에 대한 보호 시스템이 내장돼 있다. XMLHttpRequest나 Fetch API를 계속 사용하면서 이런 종류의 보안 시스템을 구현해야 한다면 이 주제에 대한 axios 단위 테스트를 살펴 봐야 한다.

5. 학습 곡선

axios나 Fetch API 기반의 코드는 초보자도 의미를 이해하기 쉽다.
콜백 작업에 익숙하지 않은 주니어 개발자에게 XMLHttpRequest를 사용한 코드를 제공한다면 내부 API를 Promise로 래핑하는 것이 좋다.