비동기 호출(2)

Blocking vs Non-Blocking

 

✅Blocking

다른 작업을 하려면, 하던 작업을 멈춰야 함

요청에 대한 결과들이 동시에 일어남

 

✅Non-Blocking

다른 작업을 확인만 하고, 미룰 수 있음

요청에 대한 결과들이 동시에 일어나지 않음

 

Blocking을 전화, Non-Blocking을 문자에 비유해서 생각하면 좀 더 이해하기 쉽다.

전화는 하던 작업을 멈추고 받아야 하지만, 문자는 확인만 한 후 답장을 미룰 수 있다. 

전화	문자
하던 일을 멈추고 받아야 한다(blocking)	확인 후, 나중에 답장할 수 있다.(non-blocking)
요청에 대한 결과가 동시에 일어난다. (synchronous)	요청에 대한 결과가 동시에 일어나지 않는다. (asynchronous)

이제 두 가지 개념을 바탕으로 동기적 처리, 비동기적 처리에 대해 알아보자.

 

동기(synchronous) vs 비동기(asynchronous)

동기(sync)

현재 실행 중인 코드부터 완료하고 다음 코드를 처리하는 방식이 '동기적 처리'이다. 

바로 처리 가능한 대부분이 동기적인 코드에 해당한다. === 직렬 처리

 

비동기(async)

현재 실행 중인 코드가 완료된 지와는 상관없이, 바로 다음 코드로 넘어가는 방식이 '비동기적 처리'이다.

실행 보류, 대기 등과 관련된 코드들이 비동기적인 코드에 해당한다. === 병렬 처리

 

✅setTimeout : 특정 시간이 경과되기 전까지 함수 실행을 보류
✅addEventListner : 이벤트 발생 시에 함수를 실행하도록 대기
✅XMLHttpRequest : 웹 브라우저가 아닌 대상에 요청을 보내고, 응답이 왔을 때 함수를 실행하도록 대기

 

 

동기(sync), 비동기(async) 커피집 예시

커피를 주문하는 상황을 생각해보자. 한 사람이 커피를 주문하고, 주문한 커피를 제공한 후, 다음 사람의 주문을 받는 건  동기적이라고 볼 수 있다.

반대로 모든 사람의 주문을 한 번에 받고, 커피가 완성되는 대로 제공하는 건 비동기적 방식이다. 

동기식 처리 모델과 비동기식 처리 모델

동기적 방식을 사용하면 순서대로 처리되기 때문에 직관적이고 설계를 하기도 비교적 간단하다.

하지만 어떤 작업이 실행되면, 끝날 때 아무것도 하지 못하고 대기해야 한다는 단점이 있다.

이와 달리 비동기적 방식은 설계하기가 복잡하지만, 오래 걸리는 작업이 있더라도 그 동안 다른 작업을 수행할 수 있기 때문에 더 효율적이라는 장점이 있다.

 

callback 패턴

let req = 'americano'; 
orderCoffeeAsync(req, function(res){ 
	drink(res); 
});

 

이벤트 등록 패턴

let req = 'americano'; 
orderCoffeeAsync(req).onready = function(res){
	drink(res); 
};

동기/비동기 방식의 차이점과 각각의 장단점, 그리고 비동기 함수를 사용하는 방법에 대해 알아봤다.

 

 

++ 비동기의 주요 사례

✅ DOM Element의 이벤트 핸들러

• 마우스, 키보드 입력(click, keydown 등)
• 페이지 로딩(DOMContentLoaded 등)

✅ 타이머

• 타이머 API(setTimeout 등)
• 애니메이션 API(requestAnimationFrame)

✅ 서버에 자원 요청 및 응답

• fetch API
• AJAX(XHR)

가장 많이 쓰이는 서버에 자원 요청 및 응답 예시는 날씨 API, 버스 도착시간 API 등이 fetch API 이다.

특정 서버에다가 URL로 요청할 수 있는 방식이다.