js 비동기 통신

axios example code
https://github.com/SuyeonSun/js-async-api.git

1. 동적인 웹 페이지란?

• 인자값에 따라 웹 페이지의 일부분만을 갱신할 수 있도록 해준다.
• 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 깜박임(페이지를 다시 로드) 없이 페이지의 일부만 업데이트 할 수 있다.

---

2. JS에서 비동기 HTTP 통신이 가능하도록 해준다.

• 비동기란? 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다.
  만약 비동기적으로 무언가를 처리하지 않는다면, 특정 행동을 할때마다 페이지가 멈춰버리는 등의 문제가 생길 수 있다.
• 비동기 Http 통신이란? response와 request를 비동기 식으로 다룰 수 있다는 것을 의미한다.
  즉, 사용자 입장에서는 막힘 없이 무언가를 계속해서 처리받을 수 있는 것이다.

---

3. js 비동기 통신의 종류

• ajax, axios, fetch

1) ajax
: ajax는 javascript의 "라이브러리"로, 클라이언트와 서버 간에 XML 데이터를 주고받는 비동기 통신이다.
: HTTP 프로토콜은 클라이언트와 서버 사이에서 Request를 보내고, Response를 받으면 연결이 끊어지는 무상태성(stateless)를 가지고 있습니다.
그래서 화면의 내용을 갱신하기 위해서는 다시 request를 보내고 response를 받아 전체 페이지를 갱신해야 합니다.
그렇기 때문에 페이지에서 작은 부분을 갱신하기 위해 전체 페이지를 다시 리로드 하는 자원과 시간이 낭비되는 상황이 생깁니다.
이때 ajax를 사용하면 XMLHttpRequest 객체를 통해 서버에 request 요청을 하고,
새로운 웹 페이지로 이동하는 것이 아니라 동일한 웹 페이지 내에서 필요한 부분한 DOM으로 변경하는 것이 가능해집니다.

2) axios
: Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.
: Promise(ES6) API 사용
: HTTP 요청과 응답을 JSON 형태로 자동 변경
: 인터셉터로 공통 로직 처리 가능
(api 통신을 사용하는 로직마다, 헤더에 세션 넣어 request 보내기,
요청과 응답에 대한 전/후 처리와 오류처리)
: config -> 모든 요청에 적용될 구성 기본 (config default) 값 지정

// config 예제 코드
api.interceptors.request.use(
    (config) => {
      const sessionObj = JSON.parse(sessionStorage.cposSession);
      config.headers['X-Operator-Session'] = sessionObj.data;
      return config;
    },
    (error) => {
      console.error(error);
      return Promise.reject(error);
    },
  );