동기와 비동기? 언제까지 헷갈릴래?

동기와 비동기를 정확하게 이해해하고 싶다...

사실 동기와 비동기는 기다림과 바로가기라고만 생각했다.

너무 간단하게 생각했었던 것... 

 

오늘 정확하게 짚고 넘어가려고한다.

 

동기란? 무엇인가?

 

내가 정의한 동기는 답변을 기다리는 것.

 

동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는것을 말한다.

요청을 하면 시간이 얼마나 걸리던지 신경쓰지 않고 요청한 자리에서 결과가 주어져야한다는 것.

 

비동기란? 무엇인가?

 

내가 정의한 비동기는 답변을 기다리지 않는 것.

 

비동기는 동시에 일어나지 않는다는 것을 말한다.

요청한 결과는 동시에 일어나지 않을거라는 약속을 뜻합니다.

 

 

그림을 보면 동기는 업무를 지나칠 수 없다 하지만 비동기는 업무를 지나쳐서 간다.

 

동기의 장, 단점은?

 

장점 : 설계가 매우 간단하고 직관적입니다.

단점 : 결과가 주어질 때까지는 아무것도 못합니다.

 

비동기의 장, 단점은?

 

장점 : 요청에 따른 결과가 반환 되는 시간에 기다리지 않고 다른 작업이 가능합니다.

단점 : 동기보다 설계가 복잡합니다.

 

Event Loop

callback event queue에서 하나씩 꺼내서 동작시키는 loop를 말한다.

 

자바스크립트는 싱글 스레드 기반의 언어다.그렇기에 한번에 하나씩 작업을 진행한다.

 

그러나 내가 자바스크립트를 사용하면서 느낀 것은 한번에 많은 작업이 동시에 처리되는 것을 본 적이 많다.

 

이 작업을 하기 위해서 자바스크립트는 Event Loop를 이용해서 비동기 방식으로 동시성을 지원합니다.이때 자바스크립트 엔진에서 동시성을 지원하는 것이 아니고, 브라우저나 node.js에서 지원합니다.

 

이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을Task Queue 에 전달하고 이때 Task Queue에 담겨있는 콜백 함수들을 콜 스택에 넘겨줍니다.

 

자바스크립트 엔진은 memory heap과 call stack을 이용하여

우리가 작성한 파일을 기계어로 바꿔서 실행해주는 역할을 한다.

 

call stack이란 콜이 스택처럼 쌓이는 모습 먼저들어간 것이 나중에 나중에들어간 것이 먼저 나온다.

 

아래의 표 처럼 블로킹 과정에서 작업 하나의 함수라고 이해할 때 작업1이 진행 될때 작업 2는 멈춰있다.하지만 논블로킹 상태를 보면 작업 1이 진행 될 때 작업 2가 어딘가에서 실행 된다.이게 바로 Web API이다.

DOM / AJAX / TimeOut는 Web API인데 이걸 이용하여 비동기 방식으로 싱글 스레드를

효과적으로 사용할 수 있도록 돕는다.

 

CallBack Queue : 콜백이 큐/ 스택처럼 쌓인다.  

그 후 event loop가 이것들을 던져준다.

 

이제 조금 더 이해하기 위해서 예제로 확인해보려한다.

 

console.log('hi');
setTimeout(function cb1() {
	console.log('cb1');
}, 5000);
console.log('bye');

결과는 hi, bye 다음 5초 후에 cb1이 찍힐 것이다.

이정도는 이제 쉽다 근데 이게 어떻게 작동하는지 아는가? 라고 물었을때는 어버버 하게 된다...

어... 그 setTimeout이라는 메소드를 이용해서 5초 뒤에 작동하도록했잖아요? 비동기식으로 근데 그게 정확할까?

 

 

위에 gif를 확인해보면 동작 과정을 확인할 수 있다...

아래 유튜브 링크를 남겨본다 진짜 잘 설명되어있다.