동기, 비동기, 블로킹, 논블로킹 가장 명확하고 쉽게 정리해보자

 

 

우선 나는 프론트엔드 개발자이다 보니, 자바스크립트가 비동기 논블로킹 언어이다 라는 말을 정말 많이 들어왔다. 근데 항상 동기와 비동기나 블로킹과 논블로킹 개념이 나올때, 동기가 결국 블로킹이고, 비동기가 논블로킹이지 않냐는 생각이 항상 들었다.

 

그래서 이번에 작정하고 찾아봤다..! 정말 많은 블로그와 유튜브에서 정리를 해주고 있었다. 

근데 막 엄청 와닿게 이해를 하지 못하고 있다가 정말 많은 곳을 찾아보고 깊게 생각을 해서 결국 이해를 해냈다!

그래서 정말 쉽게 누구나 이해할 수 있게 정리를 하기 위해 이 글을 작성하게 되었다.

 

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

동기는 요청한 작업이 완료가 되고 나서, 그 다음 작업을 순차적으로 진행하는 것이다.

반면, 비동기는 요청한 작업이 완료가 되지 않은 상태로, 그 다음 작업을 순차적으로 진행하는 것이다.

 

둘 다 그 다음 작업을 순차적으로 진행하는 건 똑같다. 다만 여기서 핵심 개념은 요청한 작업의 완료 여부이다.

요청한 작업이 완료되고 나서 진행되면 동기이고, 완료되지 않고 작업이 진행되면 비동기이다. 이게 다다.

 

자바스크립트의 setTiemout 으로 예를 들어서 설명하면,

 

setTimeout() 이 실행이 되고 나서 작업이 완료되지 않은 상태, 즉 "2초 뒤에 실행 ㅋ" 이라는 string 이 콘솔에 찍히는 작업이 완료되지 않은 상태로 작업이 진행되게 된다. 그래서 setTimeout 은 비동기 함수이다.

 

반면 console.log() 는 콘솔에 string 을 출력 후, 즉 작업이 완료된 후 그 다음 작업을 진행하게 된다.

그래서 console.log() 동기적인 함수가 된다.

 

2. 블로킹 (Blocking) vs 논블로킹 (Non-Blocking)

블로킹은 요청한 작업을 수행하는 동안에 현재 진행중인 작업이 멈추게 되는 것이다.

반면, 논블로킹은 요청한 작업을 수행하는 동안에 현재 진행중인 작업이 멈추지 않고 계속 진행되는 것이다.

 

여기서 핵심은 이름에서 나오는 블로킹을 하느냐 안하느냐 이다.

둘다 요청하는 작업을 수행하는 동안( 공통적인 시점 )에서 작업을 멈추냐 안멈추냐로 개념이 나뉘게 된다.

이것 또한 자바스크립트의 setTiemout 으로 예를 들어서 설명하면,

 

setTimeout() 함수가 실행이 될 때, "2초 뒤에 실행 ㅋ" 이라는 문자열이 콘솔에 출력되는 작업을 수행하는 동안에 진행중인 작업이 멈추지 않고 아래 함수인 func1() 이 바로 실행이 되는 것을 확인할 수 있다. 그렇기 때문에 setTimeout() 은 논블로킹 함수가 된다.

 

반면, func1() 을 보면, func1() 함수가 실행이 될 때,     'func1 함수 로그1', 'func1 함수 로그2', 두개의 문자열이 콘솔에 출력되는 작업을 수행하는 동안에 진행중인 작업이 멈추는 것을 볼 수 있다. 그렇기 때문에 func1 로그가 먼저 찍히고 끝 로그가 찍히게 된다.

그렇기 때문에 func1() 함수는 블로킹 함수가 된다.

 

 결론!!!!

동기는 요청한 작업이 완료가 되고 나서, 그 다음 작업을 순차적으로 진행하는 것이다.

반면, 비동기는 요청한 작업이 완료가 되지 않은 상태로, 그 다음 작업을 순차적으로 진행하는 것이다.

 

블로킹은 요청한 작업을 수행하는 동안에 현재 진행중인 작업이 멈추게 되는 것이다.

반면, 논블로킹은 요청한 작업을 수행하는 동안에 현재 진행중인 작업이 멈추지 않고 계속 진행되는 것이다.

 

해당 문장들이 모든 것을 내포하고 있다. 동기/비동기는 요청한 작업의 완료 여부가 핵심이 되고, 블로킹/논블로킹은 말 그대로 진행중인 작업이 멈추는지의 여부가 핵심이 된다.

 

비슷한 개념 같지만 바라보는 관점 자체가 다르기 때문에, 확실히 구분을 할 수 있다.