# callback queue
[자바스크립트] 곧, Ajax에 대해 얘기할 건데 그전에 동기랑 비동기 좀 보고가요 ! (feat. 이벤트 루프)
어딜가도, 똑같지. '동기(synch)와 비동기(asynch)'를 봐야 다음으로 넘어갈 수 있어. 동기(Synch: 동시에) vs 비동기(Asynch: 안동시에) 사전적인 의미로만 보면 마치 동기는 '동시에' 화면 처리가 이루어질 것 같고, 비동기는 동시에 화면처리가 이루어지지 않을 것 같지 않은가? 나만 헷갈렸던거야?😳 🖥 동기(Synch): "결과를 한 번에 띄워줄꺼얏 ! 그전까지는 다른거 아무것도 못해줘 ! 돌아가 !" 👧🏻(나손님) "블루베리 스무디" 주문 🙏🏻(왕주인)
JavaScript - 싱글스레드와 비동기처리
업무에 들어감에 있어서 자바스크립트의 핵심적이고 기본적인 개념에 대해 이해가 부족한 것 같아서 대표적인 특징인 비동기처리에 대해 먼저 알아보려고 한다. 자바스크립트의 대표적인 특징으로는 비동기처리, 병렬처리, 동시성 등.. 들어보긴 했지만, 당연히 되는 거라고 생각을 해왔다. 근데 자바스크립트는 싱글쓰레드로 동작을 하는 언어다. 싱글쓰레드는 자바스크립트 엔진에서 관리하는 하나의 호출스택(call stack)과 하나의 메모리힙(memory heap)만을 사용한다는 것을 의미한다. >자바스크립트 엔진 코드를 해석하고 실행하는 역할을 수행. 대표적으로 v8 엔진이 사용되며, 코드의 문법검사, 바이트코드로의 컴파일, 메모리관리, 콜스택의 구현 등을 수행한다. 호출스택 함수가 호출되면서 스택으로 쌓이는 곳 메모리힙 메모리 할당을 담당하는 곳 함수 호출 시 해당 함수의 실행 컨텍스트를 호출 스택에 쌓아 올리고, 함수가 반환되면 해당 실행 컨테스트를 스택에서 제거한
async-1(event loop & blocking & non-blocking & concurrency & process async task)
promise에 대해서는 async await만 알고 넘어갔지만 Promise를 다루고 then, catch 등 스스로 직접 코드를 바꿔서 짜 보려고 하니 못 짰다. 사실상 promise는 시간이 오래 걸리는 작업에 대해서 동기적으로 처리하고 싶어서 쓴다는 사실 밖에 몰랐으며 자세하게 어떻게 이루어지는 알지 못해서 이번 포스트를 통해서 확실히 알아가고자 한다. 🍀 Single Thread javascript는 single thread(하나의 call stack만 존재함을 의미) language라고 한다. multi thread와 같이 병렬적으로 여러 작업을 처리하는 것과 달리 한 번에 한 작업만을 처리할 수 있다. 여기서 single thread는 한다. 또한, 하나의 작업을 처리하는 도중에 다른 작업을 수행할 수 있고 처리하는 작업을 마쳐야 다음 작업을 넘어갈 수 있다. 아래 예시를 보자 "
Callback queue
Callback Queue 자세히 알아보기. 먼저, Callback Queue는 자바스크립트 엔진의 동작원리에서 찾아볼 수 있는 개념이다. 이벤트 루프가 Callback Queue에 대기하고 있는 비동기로 처리할 것들을(setTimeout, Promise 등) Call stack이 비었을 때, Call stack으로 넣어준다. Callback Queue에는 비동기로 처리할 것들이 쌓이게 되는데, 이때 쌓여 있는 비동기 함수의 우선순위와 Callback Queue에서 세부적으로 분류되는 것들에 대해서 알아보고자 한다. Callback Queue > 1. Task Queue(Macrotask queue) Microtask Queue Animation frames Task Queue Task Queue에는 Microtask Queue와 구분하기 위해 Macrotask Queue라고 한다. **setTimeout / setInterval / se
[JavaScript] 자바스크립트 런타임 환경
시작 자바스크립트 런타임 환경은 자바스크립트 엔진, WEB APIs, Callback Queue, Event Loop으로 구성되어 있다. 이 글을 쓰기에 앞서 이해하고 넘어가야 할 콜스택과 Non-Blocking에 대해 설명하겠다. 콜스택 자바스크립트는 싱글 스레드 프로그래밍 언어다. (싱글 스레드가 무엇인지는 구글링을 해보자!) 여기선 싱글 스레드와 콜스택을 같은 개념으로 이해하면 편하다. (싱글 스레드 == 콜스택) 먼저 설명하기 전에 콜스택에 대해 간단히 설명하면 콜스택은 함수가 실행되면 콜스택에 들어오고 함수에서 리턴이 일어나면 콜스택의 가장 위쪽에서 해당 함수를 꺼낸다. 코드로 확인해 보자. 위와 같은 코드가 실행될 때 시각화한 사진이다. Step1: print
Callback
콜백 함수 >#### 콜백 함수(callback function) : 다른 함수(caller)에 전달인자로 전달되는 함수 어떤 작업이 완료되었을 때 호출하는 경우가 많아, "답신 전화"라는 뜻의 콜백 함수라는 이름이 붙여졌다. 비동기 처리 : 비동기 함수의 순서를 제어하고 싶을 때 콜백 함수를 이용할 수 있다. 비동기 함수의 예) ➡️ setTimeout()이 만료된 후 call stack에서 빠져나온(pop) 순서대로 callback queue에 들어가고, 메세지가 출력된다. [Callback Queue] [두 번째 메세지 (0.2초) ◀️ 세 번째 메세지(3.8초) ◀️ 첫 번째 메세지(5초)] 이렇게 비동기적으로 끝나는 함수들의 순
브라우저의 비동기 함수 작동 원리
JavaScript 엔진 : JavaScript 코드를 해석하고 실행하는 인터프리터 Safari의 Webkit, Chrome의 V8 등... JavaScript 엔진은 Memory Heap과 Call Stack으로 이루어져 있다. Memory Heap : 메모리 할당이 일어나는 곳으로 변수, 객체 등이 저장되는 곳 Call Stack : 코드 실행에 따라 함수들이 호출되는 순서대로 쌓이는 곳 함수가 실행되면 call Stack에 해당 함수가 들어간다. 함수의 실행이 끝나면(return), call stack에서 해당 함수가 빠져나간다. (LIFO) call stack이 빈다. = 실행할 함수가 남아있지 않다. stack frame : 호출
기술면접 7탄 Javascript
내가 프로그래머가 되기로 결심하고 배운 언어인 Javascript에 대해서 알아 보도록 하겠다. 오늘 알아볼 Javascript는 문법과는 거리가 조금 있지만 Javascript언어로 코딩을 할것이 아니고 프로그래밍을 할것이라면 반드시 알아야할 기본중에 기본 Javascript 동작원리에 대해서 공부해 보았다. 우선 Javascript는 언뜻 봤을때는 코드의 병렬처리가 가능한 multi-threaded language로 보일수 있다. 하지만 Javascriptsms single-threaded language이다. 딱 봤을때, 별로 좋아보이지 않는다 왜냐하면 일을 병렬처리 하지못하고 한번에 하나만 처리할수있을 것이라고 보이기 때문이다. 하지만 이는 사실이 아니다. 병렬처리를 못한다는게 사실인게 아니라, 병렬 처리를 하지 못함에도 불구하고 Javascript는 병렬처리 하는것 처럼 동작한다. 그럼 이제 어떤 동작 원리를 가졌기에 그렇게 보이는가에 대해 설명해 보도록 하겠다. 우선 Ja
이벤트 루프 : Call Stack / Callback Queue / 단일 스레드 / Non-blocking / Asynchronous
node.js를 찍먹하다가 Non-blocking과 단일 스레드 이벤트 루프를 알게 되었다. node.js > 크롬 V8 JS 엔진으로 빌드된 JS 런타임 환경 > ==자바스크립트를 브라우저 밖에서 사용할 수 있게 해주는 프로그램 주소 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼 브라우저 🎈외부 환경에서 JS 애플리케이션 개발에 사용됨 Non-blocking I/O와 단일 스레드 이벤트 루프를 통해 높은 요청 처리 성능을 가짐 Non-blocking과 Asynchronous > None-blocking / Blocking 과 Synchronous / Asynchronous 개념은 얼핏 비슷해보이지만 관심사가 다름! > > img
TIL. 47 Javascript 실행 구조
스레드란 프로그램, 특히 프로세스 내에서 실행되는 흐름의 단위이다. Javascript가 싱글 스레드인 이유 싱글 스레드 하나의 프로세스에서 하나의 스레드를 실행한다.(직렬적으로 실행) 멀티 스레드 하나의 프로세스에서 둘 이상의 스레드를 동시 실행한다.(병렬적으로 실행) Javascript는 비동기 언어이지만 멀티 스레드가 아니라 싱글 스레드이다. 정확히는 Javascript의 이벤트 루프가 싱글 스레드이기 때문에 Javscript를 싱글 스레드 언어라고 한다. 그리고 이벤트 루프로 인해 비동기 실행이 가능하다. 아래 이미지는 Javascript의 기본적인 실행 구조이며, 보면서 글을 읽으면 이해가 원활하다. 이벤트 루프 Javascript에서는 하나의
이벤트 루프
자바스크립트는 싱글 스레드 기반 프로그래밍 언어입니다. 싱글 스레드란 한 번에 하나의 작업만 할 수 있음을 의미합니다. 따라서 하나의 작업이 오래 걸리면 다음 작업이 Blocking되어 suspend time이 늘어나게 됩니다. 이를 해결하기 위해 자바스크립트는 이벤트 루프를 사용하여 비동기 방식으로 Non-Blocking IO을 지원합니다. > Non-blocking I/O(Asynchronous I/O 혹은 Non-sequential I/O) : 입출력 처리는 시작만 해둔 채 완료되지 않은 상태에서 다른 처리 작업을 계속 진행할 수 있도록 멈추지 않고 입출력 처리를 기다리는 방법을 말한다. JS엔진은 비동기 관련 작업을 할 수 가 없습니다. 이를 해결하기 위해 브라우저에서 지원하는 WebAPI 기능들을 사용하는데요. 바로 DOM API와 setTimeout, HTTP requests(AJAX)등이 있습니다. <st
[JavaScript Deep Dive] 자바스크립트 엔진과 이벤트 루프
이벤트 루프를 알기 위해서는 먼저 자바스크립트 엔진에 대해 알아야 한다. 알아보자!😏 자바스크립트 엔진 자바스크립트 언어는 자바스크립트 엔진이라는 녀석을 통해 실행된다! 자바스크립트 엔진을 간단하게... V8, SpiderMonkey, Webkit... 웹 브라우저 내부 또는 Node.js 안에 구성되어 있다. 자바스크립트 코드를 해석하고 실행하는 인터프리터 힙(Memory Heap)과 호출 스택(Call Stack)으로 이루어져 있다. 전통적으로는 인터프리터 방식으로 구현되지만, 특정한 방식으로 바이트코드로 JIT를 저장해놨다가 컴파일 할 수도 있다. > 💡 인터프리터 vs 컴파일러 인터프리터 : 바로 해석하고 실행 컴파일러 : 사람이 작성한 소스코드 → 기계어 자바스크립트 엔진 & 외부 구조 
JavaScript - 5
JavaScript Engine 자바스크립트 엔진이란 자바스크립트 코드를 실행시키는 프로그램이다. 모든 브라우저에는 자체 자바스크립트 엔진이 있다. 그중에서도 가장 잘알려진 엔진인 구글의 V8 엔진이다. V8은 구글크롬을 구동시키고 서버측 애플리케이션을 구축하는데 사용가능한 Node.js 런타임을 구동시킬 수 있다. V8은 외부 브라우저에서도 nodejs를 구동시킬 수 있다. 물론 다른 브라우저들에도 자체 자바스크립트 엔진이 있다. JavaScript Engine 의 구성요소 콜스텍 우리가 실행할 코드가 쌓이는 곳이며 실행할 코드는 실행 콘텍스트라도 불린다. 힙 모든 객체들이 저장되어있는 장소이며 객체들이 메모리에 들어가 있다. 그러면 콜스텍에 쌓여있는 실행 컨텍스트는
(JS) 자바스크립트 작동 원리 (Event Loop / Call Stack / WEb API / Callback Queue)
JavaScript 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터라고 정의되어 있다. 자바스크립트 엔진은 표준적인 인터프리터로 구현할 수도 있고, 정적인 컴파일로로도 구현할 수 있다 두 가지 방식을 합친 JIT 컴파일(Just-In-Time Compilation)로도 구현할 수 있다. 인터프리터 : 소스코드를 바로 실행하는 컴퓨터 프로그램으로 프로그래밍 언어를 읽어가면서 해당 기능에 대응하는 기계어 코드를 실행하는 방식 컴파일러 : 소스 코드를 읽기 전에 기계어로 번역 JIT 컴파일러 : 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지. 자바스크립트 엔진의 종류 웹 브라우저마다 각각의 다른 엔진을 사용하고 있다. V8 : 구글의 크롬에서 사용하는 엔진, C++로 만들어졌으며 오픈소스이다. JavaScri
Javascript 작동 원리
1. 자바스크립트 엔진 크롬의 V8엔진에 대해서는 자주 들어봤을 것이다. 그 외에 또 어떤 엔진이 있고 각각의 엔진들이 어떤 방식으로 작동 하는지도 알아보자. 개요 javascript를 다루는 사람들은 근 몇년 전 부터 굉장히 많다. 실제로 GitHut stats에서 볼수 있듯이 Github 의 Active Repositories 와 Total Pushes 양도 어마어마하다. javascript를 사용하는 대부분의 사람들은 이것이 싱글 쓰레드 기반이고 콜백 큐를 사용한다는 사실을 알고 있겠지만 명확하게 집고 넘어가 보도록 하자. 1) 엔진의 역할 자바스크립트 엔진의 대표적인 예는 Google V8 엔진이며, V8 은 Chrome에서 사용한다. Chrome 브라우저는 Blink : Renderer 엔진(html, css) V8 : Javascript 엔진 V8은 Chrome이 아니더라도 독립적 실행이 가능하며 V8로 빌드된 Node.js가 대표적
[JavaScript] Runtime - Single Thread?
JavaScript에 대해서 많이 들어본 소리 중 하나는 single thread일 것이다. JavaScript는 정말 single thread일까? 왜 그런 소문이 났고, 어떻게 문제없이 널리 쓰이고 있는 것일까? Call Stack JavaScript Engine(이하 JSE)의 동작 방식을 다시 한 번 기억해보자. 파일이 들어오면 위에서부터 순차적으로 읽어들인다고 했다. 그리고 그것을 낱말 단위로 파싱한 후 AST를 생성한다. Interpreter는 이 AST를 Bytecode로 변환하고 실행하는 역할을 한다. 예를 들어 아래와 같은 코드가 들어왔다고 생각해보자. 하나의 함수에서 다른 함수를 부르는 이런 nested 구조는 흔하게 볼 수 있는 구조이다. Interpreter는 이것을 function c -> function b -> function a 순서대로 실행할 것이다. 하지만 어떻게 a의 실행 결과를 b에게, b의 실행 결과를 c에게 넘겨줄 수 있는 것
[JS] 자바스크립트 동작 원리(콜 스택, 콜백 큐, 이벤트 루프)
자바스크립트는 단일 스레드 기반 자바스크립트는 단일 스레드, 동시에 하나의 작업만을 처리할 수 있다고 한다. 그러나 여러 작업이 동시에 처리되는 것 같은데 어떻게 동시성을 지원하는 걸까? 자바스크립트 엔진 V8의 구조는 위와 같다. Memory Heap: 메모리 할당이 일어나는 곳 Call stack: 코드 실행에 따라 스택 프레임이 쌓이는 곳(LIFO 후입 선출) 호출 스택이 하나이므로 자바스크립트가 단일 스레드인 것은 맞다. 자바스크립트 런타임(동작 환경) 그러나 자바스크립트 엔진을
TIL17: Asynchronous JavaScript
JavaScript is an single-threded, non-blocking, asynchronous, and concurrent language. Node.js is an asynchronous and event-driven JavaScript runtime environment. > JavaScript Engine 자바스크립트 실행 환경[ JavaScript Runtime Envrironment: ex) Browser, Node.js ]은 특성상 비동기 처리에 적합하게 설계되었습니다. 아래의 그림은 자바스크립트 엔진의 작동 원리와 그 구조를 한 눈에 파악할 수 있도록 만든 이미지입니다. 
javascript 동작 원리
자바스크립트 엔진 대표적인 예로는 Google V8 엔진. V8은 Chrome 과 Node.js에서 사용. Memory Heap : 정보를 저장하는 공간 즉 변수, 함수 저장, 호출 등의 작업이 발생하는 이 공간이 바로 메모리 힙이다. Call Stack : 실행 중인 코드를 트래킹 하는 공간 가비지 컬렉터 콜스택과 메모리 힙을 배우면서 각각의 공간은 무제한이 아니고 한정적임을 알 수 있다. 자바스크립트는 이 공간을 효율적으로 관리하기 위해서, 더 이상 효용가치가 없다고 판단되는 변수, 함수 등을 함수 실행 종료 후 메모리 힙에서 제거하는 동작을 수행한다. 필요한 데이터만 메모리 힙에 저장함
Event Loop (이벤트 루프)
이번 글은 Event Loop (이벤트 루프) 에 대해 정리해보려고 한다. Event Loop? Event Loop 출처 How JavaScript works: an overview of the engine, the runtime, and the call stack Event Loop는 MDN 문서로 검색하면 "큐의 다음 메시지를 처리합니다" 라고 나온다. 이것만 봐서는 모르겠다.... 하나씩 정리해보자. JS Engine 자바스크립트 엔진은 Memory Heap* 과 Call Stack* 으로 구성되어 있다.(그림 왼쪽!) 가장 유명한 것이 구글의 V8 Engine이다. 자바스크