이 글의 주제는 자바스크립트의 가장 중요한 특징인 '비동기 처리' 이다.

먼저 단순하게 이론을 보면

✔ 동기는 직렬적으로, 순차적으로 작동하는 방식이고

✔ 비동기는 병렬적으로, 특정 로직의 끝을 기다리지 않고 다른 작업을 시행하는 방식을 말한다.

이때까지 모든 요청을 웹 브라우저로 보내면서 서버와의 통신을 한건 웹 브라우저였다.
하지만 비동기 처리를 위해 자바스크립트에게 역할을 넘겨주겠다.

AJAX

: 비동기 방식의 자바스크립트와 XML

• 보다 많은 기술을 복합적으로 사용하여 프로그램을 개발하는데 필요한 개발 패턴.

<기존 방식>
웹 브라우저가 웹 서버에게 요청을 전송한다.
-> 요청을 하면 새로운 페이지가 바뀐다.
페이지 단위로 새로운 response.
하지만 이렇게 새로운 페이지가 열리는 것은 효율이 좋지 않다 판단.
-> 비동기식 처리를 해야한다는 결론.
(데이터를 받아서 화면에 그린다.
쉬운 예시로는 검색창에 글씨를 한글자 쓸 때마다 추천 검색어가 바뀐다.)

그렇다면

>> 이 AJAX를 이용하기 위해서 자바스크립트에서는 무슨 명령어를 해야 하는가?

1. JS 에서 직접 XMLHttpRequest 객체를 만든다.
   XMLHttpRequest: 통신을 담당하는 객체.
2. jQuery 를 이용한다.
3. fetch
   -- 프라미스 PROMISE를 기반으로 하고있다.
   -- 내장 API
4. axios✨
   -- 제일 편리하고 많이 쓰임.
   -- XMLHttpRequest 기반으로 만듦.
   -- 별도의 라이브러리 추가해야 한다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

fetch 랑 axios의 차이점

공통점 : HTTP 요청을 보냄.
차이점.
결론부터 말하자면 axios가 더 간단하고 간편하다.

• GET 방식으로 요청을 보낼 때,
  fetch는 .json 메서드를 사용하여 응답 데이터를 JSON 형식으로 파싱해야 함.
  그리고 .then 블럭에서 접근.
  axios 는 그냥 response.data 로 한번에 응답 데이터 처리가 가능하다.

• POST 방식으로 요청을 보낼 때,
  fetch는 url 다음에 method, headers, body 등을 명시하여 구성해야 하고
  응답 데이터는 response.json()을 사용하여 JSON 형식으로 파싱해야 한다.
  axios는 url 다음에 두번째 인자로 전달하면 되고
  응답 데이터는 response.data로 처리하면 된다.

=> axios를 이용하여 코드를 더 간결하게 할 수 있다.