🤿 (5) 자바스크립트는 동기적으로 작동할까? 비동기적으로 작동할까?

동기? 비동기?

주제를 시작하기 전에 동기, 비동기라는 단어에 대해 먼저 정리하고 들어가면 좋을 것 같다.

• Syncronous 동기: 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식
• Asynchronous 비동기: 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

즉, 다음 그림과 같이 동기적으로 작동한다는 것은 작업을 순차적으로 진행하는 것을 의미하며,

비동기적으로 작동한다는 것은 다음 작업이 끝나기 전에 다음 작업을 시작하는 것을 의미한다.

비동기적으로 작동할 경우 하나의 작업이 언제 끝날지, 언제 시작할지 예측하기 어렵다는 단점이 있지만,

여러 작업을 동시에 작업하여 비교적 빠르다는 장점이 있다.

자바스크립트 동작 방법

자바스크립트는 기본적으로 동기적으로 작동한다.

하지만 비동기적으로 작동한다고 헷갈리곤 하는데 아마 추측컨데 Node.js가 비동기적으로 작동하기 때문이 아닐까 싶다.

Node.js 를 처음 학습할 때 항상 마주하는 그 문장과 단어들!

“Node.js는 V8 엔진으로 빌드된 이벤트 기반 자바스크립트 런타임이며,
논블로킹 I/O와 단일 스레드 이벤트 루프를 통한 높은 성능 처리를 가지고 있다.” (출처: 위키백과)

• V8 엔진: 웹브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진 (구글 크롬 브라우저와 안드로이드 브라우저에 탑재)
• 이벤트: 브라우저에서 클릭, 키보드 입력 등 사용자와의 상호작용이 일어난 것을 이벤트라고 표현
• 런타임: 프로그래밍 언어가 구동되는 환경
• 논블로킹: 비동기(Asynchronous)를 의미 ←→ 블로킹: 동기(Syncronous)를 의미
• I/O: Input과 Output
• 단일 스레드: 하나의 프로세스를 안에서 다양한 작업을 담당하는 최소 실행 단위를 스레드

자바스크립트는 단일 스레드, 블로킹(동기, Syncronous) 방식으로 작업을 수행한다.

자바스크립트 엔진의 주요 구성 요소와 동작 방법은 다음과 같다.

자바스크립트의 주요 구성 요소

• 호출 스택(Call Stack): 원시 타입 값과 실행 컨텍스트(Execution Context) 저장
• 메모리 힙(Memory Heap): 참조타입이 저장되며, 동적으로 데이터를 할당할 수 있는 메모리 영역

자바스크립트의 동작 방법

1. 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓인다.(push)
2. 쌓인 반대 순서로 함수가 실행된다.(LIFO)
3. 실행이 된 함수는 Call Stack에서 제거된다(pop)

first() 함수를 실행하고 호출 스택이 비워지면, third() 함수를 실행한다.

처음 들어온 함수가 완전히 실행되고 난 후 다음 함수가 실행되는 동기적인 동작 방법이다.

자바스크립트에서 비동기적 처리 방법

웹 페이지에서 여러개의 이미지를 로드하는 작업을 처리한다고 했을 때

동기적으로 처리될 경우 모든 데이터를 불러오는데 굉장히 많은 시간이 걸릴 것이고,

사용자는 반응이 없는 브라우저 화면을 바라보고 있어야 할 것이다.

즉, 자바스크립트의 비동기적 처리 방식이 필요한 것이다.

콜백(callback), 프로미스(promise), async/await 등을 통해 자바스크립트에서 비동기적 코드를 제어(?)할 수 있다. (요 개념은 다음 글에서 정리할 예정이다!)

자바스크립트가 비동기적으로 동작하는 방법에 대해 알아보자

• 백그라운드(Background): 비동기적으로 작업하는 함수를 보관하는 공간
• 콜백 큐(Callback Queue): 비동기적으로 실행된 콜백 함수가 보관되는 영역, Queue이기 때문에 FIFO(First In First Out) 동작
  • 태스트 큐(Task Queue): setTimeout()과 같은 타이머 함수가 들어가는 영역
  • 마이크로태스크 큐(Microtask Queue): Promise의 then / catch 등이 들어가는 영역
  • 애니메이션 프레임(Animation Frames): requestAnimationFrame API가 실행되면 들어가는 영역
• 이벤트 루프(Event Loop): 호출 스택(Call Stack)과 콜백 큐(Callback Queue)의 상태를 체크하여 호출 스택(Call Stack)이 빈 상태가 되면 콜백 큐(Callback Queue)의 함수를 호출 스택(Call Stack)으로 넣는 방식
  

출처: 호출 스택과 이벤트루프

출처
zerocho - 호출 스택과 이벤트루프
tistory - 자바스크립트 - 동기(Synchronous)? 비동기(Asynchronous)?
tistory - 자바스크립트 - 동작 원리
velog - Javascript는 동기일까? 비동기일까?
velog - 싱글스레드(Single thread) vs 멀티스레드 (Multi thread)
velog -JS 비동기의 핵심 Event Loop