[실시간 채팅 구현] API, 비동기 처리

API?

API(Application Programming Interface)란 소프트웨어 간의 상호작용을 정의하는 일련의 규칙과 프로토콜이다. API는 한 프로그램이 다른 프로그램의 기능이나 데이터를 활용할 수 있도록 해준다. 예를 들어 백엔드 시스템에는 채팅 데이터가 들어있고 이를 프론트엔드에서 API를 통해 백엔드와 통신하여 웹페이지에 채팅 정보를 표시할 수 있다.

이처럼 서버간의 데이터 교환을 API 호출이라고 한다. API 호출에 주로 사용되는 HTTP 메서드는 다음과 같다.

• GET : 데이터 요청
• POST : 서버에 데이터 전송
• PUT : 서버에 데이터 업데이트
• DELETE : 서버의 데이터 삭제

JSON과 XML

데이터를 원활하게 주고 받으려면 형식이 정해져 있어야 한다. API랑 다른게 뭐냐고 할 수도 있는데, API는 어떻게 데이터를 요청하고 응답할지를 정하는거고, JSON과 XML은 그 주고받는 데이터의 구조와 내용을 어떻게 할지를 정하는 것이다.

JSON은 간결하고 읽기 쉽다. 또한 JavaScript 객체 표기법을 기반으로 한다.

XML은 태그를 사용하여 데이터를 구조화하며 구조화된 복잡한 데이터를 표현하는데 강력하지만, JSON에 비해 다소 복잡해서 현재 웹 API에서는 JSON이 가장 많이 사용된다.

비동기 처리

API를 실제로 어떻게 주고받는지 알아보기 전에, 먼저 비동기 처리에 대한 이해가 필요하다. 비동기 처리란 말 그대로 작업을 순차적으로 처리하지 않고, 여러 작업을 동시에 처리하는 것을 의미한다. 따라서 페이지가 새로고쳐지지 않고도 데이터를 갱신할 수 있어 사용자 경험을 향상시켜준다. 

---

실제로 어떻게 API를 주고 받을까? 

AJAX (Asynchronous JavaScript and XML)

AJAX는 웹 페이지가 서버와 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술 집합이다.
여기에는 XHLHttpRequest(XHR), jQuery.ajax(), Fetch API, Axios 등이 포함된다.

XHLHttpRequest(XHR)

XHR는 초기 AJAX 요청 방법이다. 구현이 다른 방법들에 비해 복잡하고 콜백 지옥으로 인해 유지보수가 어렵다. 

콜백 지옥?

콜백지옥이란 비동기 작업을 순차적으로 처리해야 할 때, 각 비동기 작업이 완료된 후 다음 작업을 콜백으로 지정하게 되면, 콜백 함수가 중첩되면서 코드가 복잡해지는 것을 말한다.

jQuery.ajax()

jQuery ajax는 jQuery 라이브러리에서 제공하는 API 호출 방법으로 XHR을 래핑하였기 때문에 더 간단하게 사용이 가능하다. 하지만 jQuery ajax는 라이브러리를 필요로 하고, 콜백 지옥도 해결하지 못했다.

Fetch API

콜백 지옥을 해결하기 위해 Promise기반의 API호출을 지원하는 Fetch API가 나오게 된다.

Promise?

비동기 작업을 순차적으로 처리하기 위해 콜백을 사용하면 작업이 중첩될 때 콜백 지옥 문제가 생기는데, 이를 해결하기 위해 제안된 방식이 Promise 방식이다. Promise는 내장된 메서드로 비동기 작업을 순차적으로 체이닝시켜 코드를 더 깔끔하고 읽기 쉽게 만들어 준다. 하지만 Promise도 결국에는 콜백 방식이므로, 많은 작업을 체이닝하면 코드가 복잡해질 수 있다. 작업이 많아질 때 콜백 지옥은 함수가 중첩되는 거라면, Promise는 순차적인 나열이 많아지는 것이라고 할 수 있다.

Async/Await

async/await은 Promise기반의 비동기 작업을 동기적인 코드로 작성할 수 있게 한다. 기존의 Promise 방식을 사용한 Fetch API내의 메서드는 비동기 작업을 체이닝하여 순차적으로 처리하기 때문에 작업이 중첩되면 가독성이 떨어질 수 있다. async/await은 비동기 작업을 동기적 스타일의  코드로 작성할 수 있게해서 코드의 가독성과 유지보수성을 향상시킨다. 

Axios

Fetch API는 기본적으로 JSON을 자동으로 처리하지 않지만 Axios는 JOSN을 자동으로 파싱하고, Fetch API보다 더 많은 복잡한 기능을 제공한다.

 

참고문서

https://aws.amazon.com/ko/what-is/api/