자바스크립트를 공부하면서 동기/비동기라는 단어를 수도 없이 마주치게 되었다.
간단하게 동기는 작업을 순서대로 실행, 비동기는 여러 가지 일을 동시 처리한다고만 이해했었는데, 코드를 작성하다보니 이 부분에 대해 더 이해할 필요가 생겨 알아보게 되었다.
동기 (Synchronous) / 비동기 (Synchronous)
synchronous
: happening or done at the same time or speed
asynchronous
: not happening or done at the same time or speed
동기(Synchronous)는 어떤 일이 동시에 일어남을, 비동기(Synchronous)는 동시에 일어나지 않음을 의미한다. 여기서 ‘동시에 일어난다’는 것은 요청 작업의 마무리 시점과 나머지 작업 요청 시점의 동시성을 의미한다.
쉽게 이해하기 위해 신입사원 뉴다나가 업무 도중 상사의 컨펌을 받아야 한다고 하자. 꼼꼼한 뉴다나는 상사의 피드백이 꼭 필요해 상사의 응답이 돌아오기 전까지는 나머지 작업을 하지 않고 오매불망 기다린다. 그리고 상사가 피드백을 주자, 결과를 받음과 동시에 자신의 작업으로 돌아가 나머지 일을 처리한다. 옆자리 입사 동기 이동키는 상사에게 피드백을 요청하고 자기 자리로 돌아가 다른 일을 처리한다. 상사가 피드백을 주자 나중에 필요할 때 확인 후 처리하겠다고 한다.
결과가 돌아올 때까지 기다리다가 결과를 받자마자 다음 작업을 처리한 뉴다나는 동기적인 처리를 하였고, 피드백 요청만 한 뒤 결과를 기다리지 않고 나머지 작업을 처리한 이동키는 비동기적인 처리를 한 것이다.
블로킹(Blocking) / 논 블로킹(Non-Blocking)
Block
: to prevent movement through something
블로킹(Blocking)은 위 사전 풀이를 보면 알 수 있듯이 무언가에 막혀 움직일 수 없는 상태를 의미한다. 어떠한 작업 요청했을 때 나머지 작업에 대한 제어권의 여부에 따라 블로킹과 논블로킹을 구분할 수 있다.
이번에도 예시로 이해해보자. 신입사원 뉴다나는 상사에게 피드백을 요청하자 상사는 피드백을 줄 때 까지 기다리라고 한다. 다른 업무가 있음에도 상사의 검토가 끝날때 까지 대기하는 뉴다나는 Blocking 상황에 있다. 반대로 상사가 검토를 할 동안 다른 업무를 처리하라고 제어권을 준다면 이는 Non-Blocking 상태인 것이다.
언뜻 보면 동기와 블로킹, 비동기와 논블로킹은 같은 개념이라고 생각할 수가 있는데, 각각은 엄연히 다른 개념이다. 동기/비동기는 작업이 처리되는 순서와 관련이 있는 추상적인 개념을 나타내고, 블로킹/논블로킹은 작업 요청 시 다른 작업을 할 수 있느냐 없느냐, 즉 제어권에 대한 내용이다. 따라서 비동기이면서 블로킹일 수가 있으며 동기이면서 논 블로킹일 수도 있는 것이다.
조합에 따라 다음 네가지의 경우를 간단히 살펴보자.
Blocking / Synchronous
요청한 작업이 마무리될 때까지 제어권이 넘어간 상태이며 다른 작업을 하지 않고 기다린다.
예시로는 사용자의 입력이 있다. 입력 값이 들어오기 전까지는 대기 상태에 있다가 값이 입력되면 다음 동작으로 넘어간다.
Blocking / Asynchronous
결과에는 관심없지만 하던 일을 멈추고 요청한 작업의 응답이 올 때까지 기다린다.
자주 구현되는 경우는 아니나 하나의 예시로는 비동기적으로 다중 입력을 받아 처리하는 경우가 있다. blocking/synchronous 방식으로는 동시에 다중 입력을 처리할 수 가 없고, non-blocking/asynchronous 방식으로는 구현하기가 까다로우니 blocking으로 일단 실행 컨텍스트를 막아놓고 비동기로 여러 입력을 동시에 받아 처리하는 것이다.
자세한 내용은 Boost application performance using asynchronous I/O 을 참고하면 상세히 설명이 되어있다.
Non-Blocking / Synchronous
작업 요청 후 제어권은 자기에게 있어 나머지 작업은 진행하지만 요청 작업에 대한 결과에 관심이 많아 계속하여 수행 결과를 확인한다.
예시로는 로딩 진행률을 나타내는 경우를 생각해볼 수 있다. 파일 업로드를 한 후 그 진행률이 몇 퍼센트인지 사용자에게 보여준다고 할 때, 중간중간 작업의 완료 여부를 확인하여 진행률을 사용자에게 출력하는 작업을 실행하는 경우이다.
Non-Blocking / Asynchronous
다른 작업을 요청한 후에도 자신 작업에 대한 제어권은 유지하면서 각각의 작업이 병렬적으로 처리되는 경우이다.
자바스크립트에서는 데이터 서버에 데이터 요청 후 콜백 함수를 통해 추가적인 작업을 처리하는 경우를 예시로 들 수 있다.
이렇게 동기/비동기와 이와 함께 자주 등장하는 블록/논블록에 대해서도 알아보았다. 다음에는 자바스크립트에서 비동기 처리를 어떻게 하는지 알아보도록 해야겠다.
참고
동기(Synchronous)는 정확히 무엇을 의미하는걸까?
동기와 비동기, 그리고 블럭과 넌블럭
[10분 테코톡] 🐰 멍토의 Blocking vs Non-Blocking, Sync vs Async
