[JS] 동기(synchronous)와 비동기(asynchronous)

동기(synchronous)

출처: nbsp;https://poiemaweb.com/js-async

실행 시점과 작업이 완료되는 시점이 반복되면서 순차적으로 실행이 된다

블로킹 코드 = 작업이 실행되는 동안 다른 작업의 진행을 막는 방식

 

 

동기 방식은 요청을 보낸 후 결과를 기다리는 방법으로, 이전 작업이 완료 되기 전까지 다음 작업을 실행할 수 없다

여러 요청을 동시에 처리할 수 없고, 요청의 순서에 따라 처리된다.

 

예를 들어, 커피를 주문하는 과정을 생각해보자.

커피를 주문하는 사람이 있고, 주문을 받는 사람이 있다.

아이스 아메리카노 한 잔이라는 주문이 들어왔을 때, 바로 음료를 만들어 주문을 한 사람에게 전달한다.

'주문이 들어왔을 때, 바로 음료를 제작하는 것' 이게 바로 동기 방식이다.

console.log("손님1 커피 주문");
console.log("손님1 커피 제조 시작");
console.log("손님1 커피 제조 완료");

console.log("손님2 커피 주문");
console.log("손님2 커피 제조 시작");
console.log("손님2 커피 제조 완료");

 

동기 방식은 즉각적으로 값이 나오는 상황일 때 사용한다.

ex) 대부분의 계산 로직

 

 

비동기(asynchronous)

이전 작업이 완료 되는 것을 기다리지 않고 다른 작업을 동시에 처리할 수 있다

논블로킹 코드 = 작업이 실행되는 동안 다른 작업의 진행을 막지 않는 방식

 

비동기 방식은 작업의 완료 여부를 기다리지 않고 다른 작업을 실행할 수 있는 방식으로 작업이 독립적으로 실행된다.

 

즉, 작업의 실행 시점과 작업의 완료 시점이 다르다.

 

또 다시 커피 주문으로 생각해보자.

이번에는 커피를 주문하는 사람, 커피 주문을 받는 사람, 음료를 제조하는 사람이 있다.

아이스 아메리카노 주문을 받게 되면, 주문을 한 사람에게 진동벨을 건네준다.

이후, 음료를 제조하는 사람에게 아이스 아메리카노를 만들어 달라고 부탁한다.

주문을 받는 사람은 다음 주문을 바로 받을 수 있게 되고, 주문을 하는 사람은 진동벨이 울릴 때까지 기다리면 된다.

console.log("손님1 커피 주문");
console.log("손님1 커피 제조 시작");
setTimeout(() => {
	// 손님1 커피 제조 진행중...
  console.log("손님1 커피 제조 완료");
}, 2000); // 2초 후에 실행

console.log("손님2 커피 주문");
console.log("손님2 커피 제조 시작");
// ...

 

비동기 방식은  I/O 작업이나 네트워크 요청과 같이 시간이 오래 걸리는 작업에 유용하다

프로그램 작업을 하고 있을 때, 다른 작업들을 처리할 수 있기 때문에 전체적인 성능이 향상된다.

 

 

동기와 비동기의 관계

우선 순위 : 동기 > 비동기 (Promise > timer)

🌟 모든 동기 함수가 실행한 뒤에 비동기 함수가 실행된다.

비동기 함수 내에서는 Promise가 timer보다 우선이 된다.

 

---

[참고자료]

https://won-percent.tistory.com/150