Javascript: 동기와 비동기의 차이

개발을 하다 보면 동기와 비동기가 무엇이 다르냐는 질문을 많이 들어봤을 텐데요.

둘의 차이는 데이터를 받는 방식이 다르다는 겁니다.

 

 

---

 

 

커피를 주문하려고 줄을 서 있는 상황으로 동기와 비동기를 이해해 봅시다.

 

 

커피를 데이터라고 생각한다면

 

커피를 주문하는 건 데이터 요청,

주문한 커피를 받는 건 데이터 응답 이라고 볼 수 있을 텐데요.

 

 

이 데이터 처리 방식을 동기와 비동기로 나누어보면

 

 

https://webclub.tistory.com/605

 

 

 

(a) 동기 방식일 경우에는

 

우선 직원이 1명입니다. 맨 앞에 있는 손님이 커피를 주문하고, 그 커피를 받을 때까지 계속 기다려야 합니다.

즉, "커피를 주문하기 위해서는 한 줄로 서서 한 명씩만 주문이 가능"합니다.

여기서 뒷사람이 주문을 하지 못하고 계속 기다려야 하는 상황을 "blocking"이라고 부릅니다.

 

 

(b) 비동기 방식일 경우에는 

 

직원이 2명입니다. 한 명은 주문을 받고 한 명은 커피를 내려 손님에게 커피를 전달하는 일을 맡습니다.

동기 방식과는 다르게 앞사람이 커피를 받기 전에 뒷사람이 커피 주문을 할 수 있기 때문에

"non-blocking"이라고 할 수 있습니다.

결과가 주어지는데 시간이 걸려도, 다른 작업을 할 수 있기 때문에 효율적입니다.

 

 

 

 

 

---

 

 

동기(synchronous)

• 데이터의 요청과 결과가 한 자리에서 동시에 일어남
  • 사용자가 데이터를 서버에게 요청한다면 그 서버가 데이터 요청에 따른 응답을 사용자에게 다시 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야만 합니다.
• 직렬 방식
• 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기
• 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking)됨

 

동기의 장단점

 

장점 : 설계가 매우 간단하고 직관적

단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야 함

 

 

 

---

 

 

비동기(Asynchronous)

• 데이터의 요청과 결과가 한 자리에서 동시에 일어나지 않음
  • 서버에게 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며 다른 외부 활동을 수행하여도 되고 서버에게 다른 요청사항을 보내도 상관없습니다
• 병렬 방식

 

비동기의 장단점

 

장점 : 요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있음

단점 : 동기식보다 설계가 복잡

 

 

 

 

 

 

 

 

참고

https://breezebm.tistory.com/35

https://webclub.tistory.com/605

https://velog.io/@slobber/%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4