6.22 Dev.Feedback (동기, 비동기)

동기(Synchronous) vs 비동기(Asynchronous)

 

동기와 비동기의 차이는 호출되는 함수의 작업 완료 여부를 누가 신경쓰느냐에 맞춰져 있다.

 

동기(Synchronous) 

• Thread1에서 작업이 시작되고, Task1이 끝날때까지 대기했다가 완료가 됨과 동시에 Task2가 시작된다.
• 작업 요청을 했을 때, 요청의 결과값(return)을 직접 받는다.
• 요청의 결과값이 return 값과 동일하다.
• 결과값을 받아도 호출한 함수가 계속해서 작업완료 여부를 신경쓴다. (만일 작업 완료가 되지 않았을 경우에는 시간의 흐름이 맞춰지지 않은 것으로 여겨지기 때문이다.)

 

비동기(Asynchronous)

• Thread1에서 작업이 시작되고 다른 요청이 들어왔을 때, 완료를 기다리지 않고, 다른 스레드에서 다른 일을 처리할 수 있다.
• 작업 요청을 했을 때 요청의 결과값(return)을 간접적으로 받는 것이다.
• 요청의 결과값이 return값과 다를 수 있다.
• 해당 요청 작업은 별도의 스레드에서 실행하게 된다.
• 콜백을 통한 처리가 비동기 처리라고 할 수 있다.
• 호출된 함수(callback 함수)가 작업 완료 여부를 신경 쓴다.

동기적 비동기적 작동의 수행의 차이를 보여주는 이미지

 

JavaScript의 비동기적 실행(Asynchonous execution)이라는 개념은 웹 개발에서 특히 유용한데, 특히 아래 작업은 비동기적으로 작동되어야 효율적이기 때문이다.

• 백그라운드 실행, 로딩 창 등의 작업
• 인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업
• 큰 용량의 파일을 로딩하는 작업

비동기 / 동기 호출

 

Callback 함수

callback in action : 반복 실행하는 함수 (iterator)

map, foreach, filter 같이 배열의 길이만큼을 전부 순회하면서 실행이 되는 함수

 

callback in action : 이벤트에 따른 함수 (event handler)

DOM에서 이벤트의 실행 여부에 따라 실행이 되는 함수

 

*** 콜백은 함수 자체를 연결하는 것이지, 함수 실행을 연결하는 것이 아니다.

마지막 라인은 왜 문제가 될까? 말 그대로 함수가 실행되는 것을 연결해준 것인데, handleClick 함수에서 return 되는 것이 없으므로,

undefined가 되어버린다. 즉 마지막 라인의 코드는 onclick이라는 이벤트가 일어났을 때, undefined가 실행되는 것이라 볼 수 있다.

 

blocking / non-blocking

blocking과 non-blocking은 주로 I/O의 읽기, 쓰기에서 사용된다.

blocking과 non-blocking의 차이는 호출되는 함수가 바로 return하는지 아닌지에 의해 구별된다.

만일 호출된 함수가 그 함수의 정확한 결과값을 낼 때까지 호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다면, Blocking인 것이고, 반대로 호출된 함수가 그 함수의 정확한 결과값이 나오지 않았을 때는 바로 상수를 return하여 그 함수의 정확한 결과값이 아직 나오지 않음을 나타냄과 동시에 제어권을 호출한 함수에게 넘겨주어 다른 일을 할 수 있는 기회를 줄 수 있다면 Non-blocking인 것이다.

 

동기 / 비동기, blocking / non-blocking 조합

먼저 비슷한 역할을 하는 Sync(동기) - Blocking과 Async(비동기) - Non-blocking의 조합을 확인해보자.

이미지 출처 : https://homoefficio.github.io/2017/02/19/Blocking-NonBlocking-Synchronous-Asynchronous/

Sync(동기) - Blocking

호출한 작업 결과가 처리되어 나올 때까지 기다렸다가 결과 값과 제어권을 반환한다.

 

Async(비동기) - Non-blocking

작업 요청을 받아 작업을 별도로 진행함과 동시에 바로 제어권을 반환한다.
결과 값은 별도의 작업 진행 후 callback으로 전달한다. 성능과 자원의 효율적 사용 관점에서 가장 유리한 모델이다.

 

Sync(동기) - NonBlocking

호출된 함수의 정확한 결과가 없다면 상수(예시를 들면 false)를 바로 return하여, 아직 함수가 완료되지 않았음을 알린다. 함수의 정확한 결과가 나오면 바로 결과를 return 한다. 결과가 생길때까지 계속 완료 되었는지 확인

 

Async(비동기)-Blocking

호출되는 함수가 정확한 결과값이 나올때까지 return하지 않고, 호출하는 함수는 작업 완료 여부를 신경쓰지 않고, call back 함수가 return 한다.

 

Blocking-Async는 별로 이점이 없어서 일부러 이 방식을 사용할 필요가 없기는 한데, 의도하지 않게 Blocking-Async로 동작하는 경우가 있다고 한다. 원래는 NonBlocking-Async를 추구하다가 의도와는 다르게 실제로는 Blocking-Async가 되어버리는 경우라고 하는데 그것은 바로..

Blocking-Async의 대표적인 케이스가 Node.js와 MySQL의 조합이라고 한다.