🧬 자바스크립트 비동기의 등장

초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에는 별도의 비동기 처리가 필요하지 않았지만 Ajax(Asynchronous JavaScript and XML) 기술의 등장으로 페이지 로드 없이 client-side에서 XMLHttpRequest라는 객체를 통해 서버로 요청을 보내면서 데이터를 처리할 수 있게 되었다.

🎯 비동기 통신의 특징

• 비동기 통신은 페이지의 새로고침 없이 부분적으로 데이터를 가져올 수 있게 한다.
• 통신 처리가 끝나지 않아도 다른 작업을 할 수 있다.
• 사용자 경험이 극대화된다는 장점이 있다.
• 비동기 통신 방법에는 Ajax(Asynchronous JavaScript and XML), fetch, axios가 있다.

비동기 통신 방법

1) Ajax

• Ajax에서 XMLHttpRequest 객체를 통해 웹 브라우저와 서버가 데이터를 교환한다.
• 콜백지옥이 생길 수 있고 복잡하다는 단점이 있다.

2) fetch

• 웹 API에서 지원을 하는 내장 라이브러리로 import없이 사용 가능하다.
• XMLHttpRequest의 대체자로 나온것이 fetch이다. 비동기 요청을 더 편하게 해준다.
• promise 기반으로 동작하여 콜백지옥이 생기지 않는다.
• 응답으로 오는 데이터는 Response 객체로 Json이나 text로 변경해주는 과정이 필요하다.
• API 요청을 취소할 수 없다.

3) axios

• promise API를 활용한 비동기 통신 라이브러리이다.
• 크로스 브라우징 기반으로 브라우저 호환성이 뛰어나다.
• 자동으로 Json 데이터 형식으로 변환이 된다.
• 다양한 메소드를 지원하며 추가적인 옵션도 제공한다.
• 요청 취소 및 타임아웃 설정이 가능하다.
• React에서 주로 사용된다.
• 라이브러리 설치가 필요하다.

---

참고자료

• 비동기 HTTP 통신 종류(ajax, fetch,axios)