# Microtask Queue
자바스크립트 비동기 정리
동기적 제어 흐름 : 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것. 멀티스레드 언어는 비동기 처리를 동기적으로 처리한다 자바스크립트에서 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다. 코드의 흐름과 실제 제어 흐름이 동일하다 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다. → 따라서 자바스크립트 에서는 동기/비동기의 차이를 알고 시간이 오래 걸리는 일은 비동기로 처리해야 한다. 비동기적 제어 흐름 : 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것. 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다. 코드 흐름과 실제 제어 흐름이 다르다. 비동기 작업
[Frontend] Javascript의 Event Loop
Javascript의 작동원리 Javascript와 웹 브라우저가 작동하는 전체적인 그림을 표현하면 위와 같습니다. Javascript 엔진에 heap과 콜 스택이 있으며 콜스택에 있는 함수들이 하나씩 pop되면서 해당 함수가 작동하게 됩니다. 이렇게 Javascript는 하나씩 pop되면서 한번에 하나의 동작밖에 실행하지 못하고 하나의 콜 스택만을 가지는 싱글스레드 언어입니다. 그래서 Javascript는 비동기 동작을 처리하기 위해 브라우저에서는 Web API, Node.js에서는 libuv라는 라이브러리를 이용하여 논-블로킹 I/O를 지원합니다. > 🧱 여기서 논-블로킹 I(Input)/O(Output)이란, I/O 처리가 완료처리 됐을 때 결과를 회신하는 I/O 모델입니다.
[JS] Event loop
자바스크립트 엔진 자바스크립트 엔진은 크게 Memory Heap 과 Call Stack으로 나눌 수 있다. Memory Heap 변수를 선언하여 오브젝트, 문자열, 숫자등을 할당하게 되면 데이터들은 전부 메모리 힙에 저장된다. 메모리 힙은 구조적으로 정돈된 자료구조가 아니기 때문에 자료들이 여기저기 흩어져 저장된다. Call Stack (호출 스택) LIFO( Last In First Out ) 구조로 이루어져 있다. 처음 호출된 함수가 가장 아래부터 차곡차곡 쌓이고, 마지막에 호출된 함수부터 실행되어 호출 스택에서 사라지게 된다. 콜스택은 함수들이 호출하는 순서를 기억했다가 함수가 끝나면 원래 있던 자리로 돌아가기 위해 쓰이는 자료구조 중 하나이다. 모든 프로세스와 쓰레드 안에는 각각 콜스택이 존재한다. 자바스크립트 런타임 환경 자바스크립트는 싱글 스레드이고, 싱글 스레드는 동기적으로 일을 처리한다. 동기적으로 처리된다면 시간이
[JS] Promise
🚨 콜백 패턴의 단점 아래 코드를 보자. setTimeout 함수의 콜백 함수에서 상위 스코프의 변수에 값을 할당했다. 결과는 100이 나와야 할 것 같지만 결과는 0이 나온다. setTimeout 함수를 호출하면 콜백 함수를 호출 스케줄링한 다음, 타이머 id를 반환하고 즉시 종료된다. setTimeout 함수의 콜백 함수는 setTimeout 함수가 종료된 이후에 호출되기 때문에, 콜백 함수에서 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다. 또 다른 예시를 보자. 아래 코드는 get요청을 위한 코드이다. get 함수가 호출되면 XMLHttpRequest 객체를 생성하고 HTTP 요청을 전송한다. xhr.onload 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩하고 종료한다. 로그에는 어떤 값이 출력될까? xhr.onload 이벤트 핸들러 프로퍼티에 바인딩한 이벤트 핸들러의 반환문은 get 함수의 반환문
TIL#43 JS) 이벤트 루프의 Queue
Event Loop는 브라우저에 존재하는 여러 Queue들에 우선순위를 부여해 어떤 task를 먼저 수행할지 결정한다. 그런데 아래의 그림을 보면 태스크 큐 외에도 다른 큐들이 있다. 그래서 이에 대해서도 정리해보려고 한다. Event Loop의 Queue Task Queue 우리가 기존에 알고 있던 Task Queue 는 뒤에서 설명한 Microt