[Network] 비동기 통신이란 ? 비동기 통신의 종류 및 방법 (Axios/Fetch)

1. HTTP(Hyper Text Transfer Protocol) 통신이란?

• 브라우저와 서버가 통신할 수 있도록 만들어주는 여러 프로토콜 가운데 한 종류
• 웹 브라우저와 웹 서버 사이에 HTML 문서를 주고받는데 쓰이는 통신 프로토콜
• 초기에는 HTTP 파일을 전송하기 위한 목적으로 만들어짐
• 현재는 JSON, Image 파일 등 또한 전송할 수 있음
• HTTP 통신은 TCP/IP 프로토콜을 사용
• 전송 계층 프로토콜로 TCP를 사용하고, 네트워크 계층 프로토콜로 IP를 사용
• TCP/IP에서는 IP 주소를 사용해서 통신할 컴퓨터를 결정하고, 포트 번호를 사용해서 해당 컴퓨터의 어떤 프로그램과 통신할지를 결정
  • ( ex) fetch(`http://1.24.424.123:8080/onepie/~~` )

---

2. 통신 프로토콜이란?

• 컴퓨터나 원거리 통신 장비 사이에서 메세지를 주고받는 양식과 규칙의 체계
• 이는 신호 체계, 데이터의 표현법, 인증, 오류 검증 등의 기능을 포함
• HTTP에서는 클라이언트가 서버에 요청 메세지를 보내고 서버는 클라이언트의 요청에 대한 응답을 반환
• 연결 상태를 유지하지 않는 비연결성 프로토콜이며, 요청과 응답 방식으로 동작
  • (비연결성 프로토콜의 단점을 해결하기 위해 Cookie와 Session이 등장)
• 연결 상태를 유지하지 않아 서버는 응답 메시지를 반환 후 클라이언트의 상태를 저장하지 않음
• 때문에 HTTP 프로토콜은 무상태성(stateless)의 특징을 가지고 있음
• 상태가 없다라는 말은 데이터를 주고받기 위한 각각의 데이터 요청이 서로 독립적
• 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다는 뜻

---

3. HTTP 통신의 요청과 응답 (Request, Response)

• 요청과 응답을 이해하기 위해서는 먼저 클라이언트(Client)와 서버(Server)를 이해해야 함
• 클라이언트란 요청을 보내는 쪽을 의미하며 일반적으로 웹 관점에서는 브라우저를 의미
• 서버란 요청을 받는 쪽을 의미하며 일반적으로 데이터를 보내주는 원격지의 컴퓨터를 의미
  • (서버는 서버 내에 저장된 정보 또는 DB나 다른 곳에 저장된 정보를 전달)

! HTTP 통신 메시지 구조

! HTTP 통신의 메세지 예시 (브라우저에서 F12 개발자 도구 참고)

! HTTP Request

• Request Line
  • HTTP 메서드 (GET, POST 등)를 사용해 서버가 수행해야 할 동작
  • 요청 타겟 (URL, 포르토콜, 포트, 도메인)을 나타내며, 이들은 요청 컨텍스트에 의해 특정
  • 응답 메시지에 사용할 HTTP 버전을 알려주는 역할
• Header
  • 요청에 들어가는 HTTP 헤더는 HTTP 헤더 기본 구조를 따름
  • 대소문자 구분 없는 문자열 다음 콜론 (' : ')이 붙으며, 그 뒤에 오는 값은 헤더에 따라 달라짐
  • Host : 요청을 보내는 목표(타겟)의 주소. 요청을 보내는 웹사이트의 기본 주소
  • User-Agent : 요청을 보내는 클라이언트의 대한 정보 (ex. chrome, firefox)
  • Content-Type : 해당 요청이 보내는 메세지 body의 타입 (ex. application/json)
  • Content-Length : body 내용의 길이
  • Authorization : 회원의 인증/인가를 처리하기 위해 로그인 토큰
  • 헤더를 세분화하면 General Header, Request Header, Entity Header으로 나눌 수 있음
• Body
  • 리소스를 가지고 오는 요청(Get, HEAD, DELETE, OPTIONS)에 사용되지 않음
  • 바디는 단일-리소스 본문(single-resource bodies), 다중-리소스 본문(multiple-resource bodies)으로 나눠짐
  • 해당 요청에 담은 내용(데이터)가 담김

! HTTP Response

• Status Line
  • 프로토콜 버전, 보통 HTTP/1.1
  • 상태 코드, 요청의 성공 여부(200, 404, 302 등의 코드)
  • 상태 텍스트, 짧고 간결하게 상태 코드에 대한 설명 (Not Found)
• Header
  • 응답에 들어가는 HTTP 헤더는 요청과 마찬가지로 HTTP 헤더의 기본 구조를 따름
  • 대소문자 구분 없는 문자열 다음 콜론 (' : ')이 붙으며, 그 뒤에 오는 값은 헤더에 따라 달라짐
  • 헤더를 세분화하면 General Header, Request Header, Entity Header으로 나눌 수 있음
• Body
  • 모든 응답에 들어가지는 않고 201, 204 같은 상태 코드를 가진 응답에는 보통 본문이 없음
  • response body는 이미 길이가 알려진 단일 파일로 구성된 헤더 두 개(Content-Type, Content-Length)를 가진 단일-리소스 본문, 길이를 모르는 단일 파일로 구성된 단일-리소스 본문, 서로 다른 정보를 담고 있는 멀티파트로 이루어진 다중-리소스 본문 이렇게 크게 3가지로 나눌 수 있음
  • 해당 요청에 담은 내용(데이터)가 담김

! HTTP 통신 Method 와 StatusCode

• HTTP Method
  • GET : 존재하는 자원에 대한 요청
  • POST : 새로운 자원을 생성
  • PUT : 존재하는 자원에 대한 변경 (자원 전체를 갱신)
  • PATCH : 존재하는 자원에 대한 변경 (자원 일부를 교체)
  • DELETE : 존재하는 자원에 대한 삭제
  • OPTIONS : 웹 서버에 지원되는 메서드의 종류를 확인할 경우 사용
• HTTP StatusCode
  • 1xx : Informational - 요청 정보를 처리 중
  • 2xx : Success - 요청을 정상적으로 처리함
  • 3xx : Redirection - 요청을 완료하기 위해 추가 동작이 필요함
  • 4xx : Client Error - 클라이언트의 요청 오류
  • 5xx : Server Error - 서버 측 오류

---

4. 비동기 통신 종류와 방법

• Ajax (Asynchronous JavaScript And XML)
  • Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
  • 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줌
• XMLHttpRequest 객체
  • Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체
  • Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용

1. Axios

• axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 외부 라이브러리
• 비동기로 HTTP 통신을 하며, return을 promise 객체로 해줘서 reponse 데이터를 다루기 쉬움
• Axios를 사용하면 응답 데이터를 기본적으로 JSON 타입으로 사용 가능
• 응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있음
• 설정 옵션을 통해 responseType을 지정하여 기본 JSON 데이터 타입을 재정의 할 수 있음

axios.get(url, {
  responseType: "json", // options: 'arraybuffer', 'document', 'blob', 'text', 'stream'
});

! 장점

• 비교적 다양한 기능들이 존재
• JSON 자동변환 / 자동문자열 변환 / CSRF 보호 기능 등 fetch에는 없는 기능들
• Promise API를 활용하기 때문에 다루기 편리
• 브라우저 호환성이 뛰어남

! 단점

• 별도의 라이브러리 설치가 필요하다.→ npm install axios
• 외부 라이브러리이므로 업데이트에 따라 불안정적일 수 있음

import axios from "axios";

const getData = async (e) => { 
  const { data } = await axios({ 
    method: "get, 
    url: "API통신을 위한 url", 
  }).then((response) => console.log(response)); 
};

fetch 메서드처럼 HTTP 메서드 없이 요청할 경우 기본적으로 GET 요청을 생성한다

2. Fetch

• ES6 업데이트부터 들어온 Promise 기반 JavaScript 내장 라이브러리이다.
• Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스
• fetch()는 .then() 메서드에서 처리된 promise를 반환
• 반환 받은 데이터는 JSON 포맷이 아니기 때문에 응답 객체의 .json() 메서드를 호출
• 그러면 JSON 형식의 데이터로 이행(resolve)된 또 다른 promise를 반환
• 따라서 일반적인 fetch 요청은 두 개의 .then() 호출을 가짐

! 장점

• 자바스크립트 내장 라이브러리이므로 별도의 설치가 필요 없음
• Promise API를 활용하기 때문에 다루기 편리
• 내장 라이브러리이기 때문에 업데이트에 따른 오류 예방이 가능

! 단점

• 지원되지 않는 브라우저가 존재한다. (IE11)
• 네트워크 에러 발생 시 reponse timeout이 없어 하염없이 기다려야 함.
  • axios는 별도의 timeout 설정이 가능하며, 60초가 기본값
• JSON변환, 문자열변환 과정이 별도로 필요
• axios에 비해 비교적 기능이 부족

const getData = async (e) => { 
  const { data } = await fetch("API통신을 위한 url", { 
  method: "POST", 
  headers: { 
    "Content-Type": "application/json", 
  },
  //JSON변환
  body: JSON.stringify({ 
    id: "id", 
    description: "description", 
  }), 
}).then((response) => console.log(response));

문법 (fetch에서의)
Fetch는 두 개의 인자를 받습니다.
첫 번째 인자는 가져오고자 하는 리소스의 URL입니다.
두 번째 인자는 요청의 설정 옵션을 포함하는 객체로 선택적 인자입니다.
두 번째 인자로 설정 옵션을 넘기지 않을 경우, 기본적으로 GET 요청을 생성합니다.

fetch(url);
설정 옵션을 넘기면 다음과 같이 요청에 대해 커스텀 설정을 할 수 있습니다.

fetch(url, {
  method: "GET", // 다른 옵션도 가능합니다 (POST, PUT, DELETE, etc.)
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({}),
});

! Axios 와 Fetch 공통점

• Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트
• 이 클라이언트를 이용해 네트워크 요청을 하면 이행 혹은 거부할 수 있는 promise가 반환

! Axios 와 Fetch 차이점

• 클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하기 위한 문법
• return 되는 데이터의 타입이 다름
• respons의 timeOut 기능 유무
• 라이브러리의 종류

---

핵심 정리

axios	fetch
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함	body는 문자열화 되어있음
status가 200이고 statusText가 ‘OK’이면 성공	응답객체가 ok 속성을 포함하면 성공
자동으로 JSON데이터 형식으로 변환	.json()메서드를 사용
요청을 취소할 수 있고 타임아웃을 걸 수 있음	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

 

#간단하게 사용할때는 Fetch를 쓰고, 이외의확장성을 염두해봤을 땐 Axios