Ajax(Asynchronous Javascript And XML)
비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법
XMLHttpRequest
일반적으로 XMLHttpRequest 객체를 사용하여 인스턴스를 생성한 후, open, send 등의 메소드를 이용한다.
Fetch API
fetch 함수를 사용하여 요청을 보내는 방식으로 XMLHttpRequest보다 더 직관적이다. ES6(ES2015)에서 표준이 되었고, Promise 객체를 반환한다.
Call Stack && Heap Memory
- 콜 스택(Call Stack): 원시타입 값과 함수 호출 시에 실행 컨택스트를 저장하는 곳
- 힙 메모리(Heap Memory): 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값을 저장하는 곳
Event Loop : Asynchronous && Non-Blocking
자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 콜 스택도 하나만 가지며, 한 번에 하나의 작업만 수행할 수 있다.
그러므로 시간이 오래 걸리는 작업을 실행하면 스택이 쌓이고 실행하는 동안 다른 작업들은 무한정 대기 상태에 놓이게 된다. 이러한 현상을 블로킹(Blocking) 이라 한다.
이에 대한 해결책으로 자바스크립트는 비동기 콜백(Asynchronous Callback) 을 활용한다. 대표적으로 브라우저의 Web API에서 제공하는 기능들(Timer Function, Ajax...)이 있다.
자바스크립트는 코드를 해석하면서 실행 컨텍스트를 콜 스택에 쌓는데, 그 과정에서 비동기 콜백은 Web API에서 처리된 뒤에 콜백 큐 또는 태스크 큐(Callback Queue Or Task Queue) 에 추가된다. 그리고 콜 스택에 쌓인 작업들이 모두 끝나 콜 스택이 비어있으면 콜백 큐에 있는 작업들을 하나씩 꺼내서 콜 스택에 추가해서 작업을 실행하는데 이러한 과정을 이벤트 루프(Event Loop) 라 한다.
Callback Queue : Micro Task vs Macro Task
콜백 큐는 다시 마이크로 태스크 큐와 매크로 태스크 큐로 구분된다.
마이크로 태스크 큐와 매크로 태스크 큐 둘 다 태스크 큐를 구성하는 부분으로 콜 스택이 비어있을 때 이벤트 루프에 의해 처리될 작업들을 저장하는 공간이다. 단지 실행 순서에서의 차이를 가지는데, 마이크로 태스크 큐에 있는 작업들은 매크로 태스크 큐의 작업이 끝난 뒤에 다음 작업 또는 렌더링 작업이 처리되기 전에 처리된다.
위의 내용으로 이벤트 루프의 실행순서를 설명하면 다음과 같다.
- 콜 스택에 있는 작업들을 처리한다.
- 콜 스택이 비어있으면 매크로 태스크 큐에서 가장 오래된 작업을 꺼내 실행한다.
- 앞의 작업이 처리되면 마이크로 태스크 큐에 있는 작업을 실행한다. 이는 마이크로 태스크 큐가 빌 때까지 반복된다.
- 렌더링 작업이 처리된다.
- 매크로 태스크 큐에 저장된 다음 작업이 처리된다. (1 ~ 4의 과정을 반복한다.)
콜백 함수를 넘겨주는 함수의 종류에 따라 마이크로 태스크 큐와 매크로 태스크 큐 중 어느 큐에 추가될지 결정된다.
매크로 태스크 큐로 넘겨주는 함수
setTimeoutsetIntervalsetImmediaterequestAnimationFrame- I/O
- UI 렌더링
마이크로 태스크 큐로 넘겨주는 함수
Promiseprocess.nextTickObject.observe- MutationObserver
출처
