[Network] 동기 vs 비동기 통신 (Ajax, kafka) 정리

Ajax와 kafka 등 비동기 통신(처리)한다는 용어가 헷갈려 이 기회에 정리해보려고 합니다.

---

1. 동기 vs 비동기

처음에는 사실 그림을 봐도 크게 와닿지는 않았습니다.

 

1) 동기(synchronous) 방식

• 요청과 결과가 동시에 일어나는 방식으로 요청을 보낸 후 응답을 받아야 다음 동작이 진행 됨
• 요청과 결과가 한 자리에 동시에 나타나는 것으로 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 리턴받기 전까지는 다른 것을 하지 못하고 기다려야 함
• 장점 :  설계가 간단하고, 직관적
• 단점 : 요청에 대한 결과가 반환되기 전까지 대기해야 함

2) 비동기(Asynchronous) 방식

• 요청과 결과가 동시에 일어나지 않는 방식으로 요청과 결과가 동시에 일어나지 않음
• 동시에 여러 요청을 보낼 수 있음(응답까지 기다리지 않아도 됨)
• 장점 : 요청에 대한 결과가 반환되기 전에 다른 작업을 수행할 수 있어서 자원을 효율적으로 사용할 수 있음
• 단점 : 동기 방식보다 설계가 복잡하고, 논증적

---

2. Kafka의 비동기 통신

•  Pub/Sub 모델은 비동기 메시징 전송 방식으로, 발신자의 메시지에는 수신자가 정해져 있지 않는 상태로 publish 함
  → Subscribe을 한 수신자만 정해진 메시지(topic)를 받을 수 있음
  → 수신자는 발신자 정보가 없어도 원하는 메시지만 수신할 수 있으며, 이러한 구조 덕분에 높은 확장성을 확보할 수 있음
• Pub/Sub 모델은 여러개의 Pub에서 동시다발적으로 메세지 큐에 데이터를 보내게 되고, Sub또한 동시다발적으로 메세지 큐로부터 데이터를 가져올 수 있는 구조
  • 프로듀서가 카프카 토픽에 메시지를 발행할 때, 이 작업은 비동기적으로 수행되며 브로커로부터 응답을 기다리지 않음
  • 카프카 토픽에서 메시지를 소비하는 소비자는 메시지가 도착할 때까지 대기하지 않고 메시지를 자신의 속도로 처리할 수 있음

---

Kafka 비동기 처리의 이점

고처리량, 낮은 대기 시간 및 오류 내구성과 같은 이점을 제공

---

3. Ajax의 비동기 통신

• 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할 때, ajax 라는 네트워크 통신 기술로 클라이언트가 요청한 데이터를 서버로부터 가져옴

// https://domain.com 에 HTTP GET 요청으로 1번 상품(product) 정보를 요청하는 코드
function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {// 3번 째 줄의 $.get()이 바로 ajax 통신을 하는 부분
		tableData = response; // tableData = response; 로 받아온 데이터를 tableData라는 변수에 저장
	});
	return tableData;
}

console.log(getData());
==================================================================

결과 : undefined // $.get()로 데이터를 요청하고, 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문

* 3번 째 줄의 $.get()이 바로 ajax 통신을 하는 부분

• 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

---

Ajax 사용하는 이유

•  단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있음
• 기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있고 그렇기 때문에 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 됨 → 엄청난 자원낭비와 시간낭비를 초래
• AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request
  → JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있음

---

 

참조:

https://ynzu-dev.tistory.com/m/105

[Web] 동기 방식과 비동기 방식의 차이점

https://sudo-minz.tistory.com/21