2022/03/11 TIL

 📝 비동기 블로깅 

 

1. 동기와 비동기

 

동기는 요청을 보낸 후 응답을 받으면 다음으로 넘어갈 수 있는 실행방식이고 비동기는 요청을 보낸 후에 응답과 관계없이 다음 동작을 실행한다. 

 

즉, 비동기는 프로그램의 다른부분(기능 또는 함수)들이 서로 방해(blocking)하지 않고 동시에 일어날 수 있다.

 

집청소로 예를 들어보자. 

동기적으로 집 청소를 한다면,

빨래를 돌린다 -> 완료될 때 까지 기다린다 -> 빨래를 넌다 -> 설거지를 한다 -> 설거지를 마치고 청소기를 돌린다. -> 화장실 청소를 한다.

 

비동기적으로 집 청소를 한다면,

빨래를 돌린다 -> 설거지를 한다 ->  청소기를 돌린다 -> 빨래가 완료되어 넌다 -> 화장실 청소를 한다. 

 

 

 

 

 

 

 

2. Callback

콜백함수란 파라미터로 함수를 전달받아서 함수 내부에서 실행하는 함수이다. 

즉, 어떤이벤트가 발생하거나 특정 시점에서 시스템이 호출하는 함수이다. 콜백함수는 호출방식에 의한 구분이다. 

콜백함수는 자바스크립트에서 비동기적 프로그래밍을 가능하게 한다. 

 

 

 

 

 

3. async/ await

promise 함수는 비동기적인 프로그래밍을 할 때 콜백 함수 대신 유용하게 쓸 수 있는 operation이다. 

async/await은 promise를 좀 더 간결하게 사용할 수 있게 해주는데,

새롭게 추가된 기능이 아닌 기존 promise에서 조금 더 간편한 API 를 제공하는 syntactic sugar이다. 

함수 앞에 async를 붙여주고 비동기로 실행되는 함수 앞에 await을 넣어주면 된다. 

 

콘솔창 ⬇️

 

 

 

 

 

 

 

 

 



자바스크립트는 싱글스레드(single thread) 엔진으로, 한 번에 하나의 task 만 처리한다는 뜻이다. 

하지만 동적인 웹 페이지를 만들기 위해서는 여러가지 일을 동시에 실행하는 것이 불가피하다.

따라서 자바스크립트에서는 이러한 동시성을 이벤트 루프를 통해 구현한다. 

 

4. Event Loop

자바스크립트는 이벤트 루프를 이용하여 비동기 방식으로 동시성을 지원한다. 

Event Loop 는 Call stack과 Task Queue의 상태를  체크하며, Call stack이 비어 있으면 콜백함수를 Call stack으로 전달한다. 

 

 

5. Web API

Web API 는 자바스크립트 엔진이 아닌, 말 그대로 브라우저에서 제공하는 API 이며 DOM, Ajax, Timeout 등이 있다. 

call stack 에서 실행된 비동기 함수는 Web API를 호출하고 Web API는 콜백함수를 task queue에 넣는다. 

 

 

6. Task Queue

Task Queue에는 setTimeout 이나 setInterval과 같은 비동기 함수의 콜백함수나 이벤트 핸들러가 일시적으로 보관된다. 

 

 

 

 

7. Call stack

함수는 호출되면 순차적으로 Call stack 에 푸시되어 실행된다.

함수가 실행되어 콜스택이 비워지면 이벤트루프에서 콜백함수나 이벤트 핸들러를 콜스택으로 보낸다. 

자바스크립트는 하나의 콜스택을 사용하기 때문에 콜스택이 비어있기 전까지 다른 태스크를 실행하지 않는다.