동기와 비동기

<키워드>

동기?

비동기?

프로세스?

스레드

싱글스레드?

Blocking?

Non-blocking?

웹브라우저?

자바스크립트 엔진?

 

 

 

동기란?

- 작업이 순차적으로 진행되는 것 작업이 끝나는 동시에 진행된다. 

 

ex 1) 청소를 할때 : 청소기를 돌린다(5분) -> 세탁기를 돌린다(30분) -> 걸레질을 한다 -> 설거지를 한다.

ex 2) 실시간 강의를 듣는다 : 1교시 -> 쉬는시간 ->  2교시  -> 쉬는 시간 -> 3교시

ex 3) 짜장면 배달 -> 짜장면을 먹는다 -> 짜장면 그릇 회수 -> 짜장면 배달

 

비동기란? 

- 동기의 반대. 작업이 순차적으로 진행되지 않는 것

 

ex 1) 세탁기를 돌린다(30분) -> 세탁기가 돌아가는 동안 설거지, 청소기, 걸레질

ex 2) 온라인 강의를 듣는다: 필요한 것만 내 시간에 맞추어 빠르게 배속으로 듣는다.

ex 3) 짜장면 배달 -> 짜장면 먹는 동안 다른 곳 배달++ -> 그릇 회수

 

동기와 비동기를 왜 알아야할까? 

- 우리는 컴퓨터에서 멀티테스킹을 하기 때문이다. 유튜브 보면서, 카카오  채팅도 하면서, 검색도하고, 음악도 듣고, 게임도 한다.

즉, 동시에 비동기적으로 다양한 작업들을 우리 컴퓨터는 한다.

 

좀 더 자세하게 알기 위해서는 프로세스와 스레드를 알아야한다. 

 

프로세스?

어플리케이션 작동하는 것, 컴퓨터에서 .exe 파일이 작동하는 것

스레드?

프로세스 안에서 작업이 실행되는 단위

 

멀티프로세스, 멀티스레스로 비동기적으로 작동한다는 것이다.  

프로세스와 스레드

 

그럼 이제 이런 의문을 표할 수 있다. 

WEB에서 JavaScript는 싱글 스레드 기반으로 동작하는데, 비동기로 동작하지 않나?

 

웹 브라우저의 작동 원리?

HTML, CSS는 웹 브라우저 내부에 렌더링 엔진으로 해석하고 화면의 띄워지지만, 

자바스크립트는 자바스크립트 엔진으로 해석 된다. 

웹 브라우저 작동 원리

 

자바스크립트 엔진 구조는 아래와 같다.

우선 자바스크립트는 기본적으로 동기적으로 실행되는 언어이다. 

그러나 특정 함수나 기능이 비동기적으로 동작한다. (Event(), Ajax(), SetTimeOut(),, 등등)

 

자바스크립트 엔진의 "Stack"이라는 공간에서 코드가 한줄씩 순차적으로 실행된다. 

그러나, 특정 함수와 기능을 만나면 Web API라는 공간으로 빼서 동작하게 한다. 

동작이 완료되면 테스크 큐라는 공간으로 이동해서 Stack에 올려 실행한다. 

 

ex) Python의 경우

print(1+1)

time.sleep(2)

print(2+2)

결과 : 2 (2초 대기) 4

 

ex) JS의 경우

console.log(1+1);
setTimeOut(()=>{2+2}, 2000);
console.log(3+3);

결과 : 2 6 (2초 대기) 4 - 0초로 설정해도 순서는 동일

유튜브 코딩 만화

 

가장 중요한 것은 

비동기로 동작하는 작업들을 어떻게 제어할 수 있느냐가 되겠다. 

 

제어하는 방법으로는 함수 내부에 함수를 선언해 사용하는 Callback 함수, Promise 문법, Async Await 문법이 있겠다. 

 

+추가 

동기와 비동기에 대해 검색하면, block, non-block이라는 키워드가 빼놓지 않고 등장한다. 

쉽게 말하면 코드가 진행중에 제어권을 가지냐 아니냐이다. (다른 코드에 의해 멈추고 동작하는지 아닌지)

 

동기와 비동기랑은 다른 개념이다. 동기/블럭, 동기/논블럭, 비동기/블럭, 비동기/논블록 등으로 다양하게 조합될 수 있다. 

 

출처: 

https://www.youtube.com/watch?v=jjypeFGJC3c

https://www.youtube.com/watch?v=oEIoqGd-Sns

https://poiemaweb.com/js-browser

https://www.youtube.com/watch?v=m0icCqHY39U

https://www.youtube.com/watch?v=iks_Xb9DtTM