동기 (Synchronous)
- 현재 실행중인 함수가 종료할 때까지 다음에 실행될 함수가 기다렸다가 실행되는 방식을 동기라고 한다.
비동기 (Asynchronous)
- 현재 실행 중인 함수가 종료되지 않은 상태라 해도 다음 함수를 곧바로 실행하는 방식을 비동기라고 한다.
싱글 스레드(Single Thread)
-
함수를 호출 -> 함수 코드 평가 -> 콜 스택에 PUSH -> 함수 실행
-
함수는 호출된 순서대로 콜 스택에 들어가기 때문에, 함수가 호출된 순서대로 실행된다.
-
자바스크립트 엔진은 단 하나의 콜 스택을 갖는다. 이 때문에 함수를 한번에 한개만 실행할 수 밖에 없다. 이런 방식을 싱글 스레드(single thread)라고 한다.
이벤트 루프
-
이벤트 루프는 브라우저에 내장되어 있는 기능으로 자바스크립트의 동시성(concurrency)을 지원한다.
-
예를 들어, HTML 요소가 클릭되면 이벤트 처리를 하고, HTTP 요청을 통해 서버로부터 데이터를 가지고 오면서 렌더링하기도 한다.
-
콜백 함수의 실행은 자바스크립트 엔진이 담당하지만, 호출 스케줄링은 브라우저 또는 Node JS가 담당한다. 이를 위해 태스크 큐와 이벤트 루프가 있다.
-
태스크 큐(Task queue) : 비동기 함수의 콜백 함수를 임시로 보관하는 곳.
-
이벤트 루프 : 콜 스택에 현재 실행중인 함수가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 만약 콜 스택이 비었고 태스크 큐에 대기중인 함수들이 있다면, 그 함수들을 순차적으로 실행한다.
-
Web API(브라우저에서 제공되는 API)가 먼저 호출되더라도, Web API의 콜백 함수가 태스크 큐에 푸시되어 대기한 뒤 실행되므로, 일반 함수가 먼저 실행된다.
Promise
-
콜백 함수는 콜백 함수가 동작하기 위해 준비가 다 되어 있을 때 비로소 실행된다.
-
콜백 함수가 반복되면, 함수 호출이 중첩되면서 코드가 지져분해져서 콜백 지옥이 발생된다. 이렇게 되면 에러가 발생해도 처리하기 힘들다.
-
Promise 함수는 콜백 함수를 인수로 전달 받고, 이 콜백 함수는 resolve와 reject 함수를 인수로 전달 받는다. 비동기 처리가 성공했을 때 resolve 함수가 호출되고, 실패하면 reject 함수가 호출된다.
-
이 때 비동기 작업을 수행하고자 하는 함수 앞에 aynce를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await을 표기한다. await 뒤의 내용을 Promise 함수로 만들고 Promise 함수가 성공하면 resolve 함수가 호출된다.
