자바스크립트에서는 비동기 처리가 중요하다. 그러면 왜 비동기 처리를 해야할까?
서버로 http 요청을 했을 때 요청에 대한 응답이 언제 올지 모르는데 계속 기다릴 수는 없기 때문이다.
아래 그림으로 예를 들어보자.
A는 서버에 http 요청하는 코드이다.
이 그림은 동기적으로 실행하는 예시이다.
만약 A -> B 순으로 코드가 실행된다면 B는 3000시간을 기다려야 한다. 조금 더 자세히 예를 들어 A가 게시글의 데이터, B가 기본 layout이라고 생각했을 때 데이터를 불러오는 3000시간동안 화면에는 아무것도 뜨지 않게 된다.
반대로 B->A 순으로 코드가 실행된다면 레이아웃은 뜨지만 게시물의 데이터가 3100시간 후에 나타나서 시간낭비가 된다. 이 예시는 요청이 하나밖에 없어서 괜찮지만 처리할 코드와 http 요청이 많아질수록 대기 시간이 길어져 사용자에게 불편함을 주게 된다.
비동기 처리를 하게 되면 A를 먼저 실행하여 서버에 데이터를 요청하고, 기다리는 시간 동안 B가 실행할 수 있게 한다. 이렇게 하면 전체 게시물 로딩 시간이 3000시간이 되어 시간을 줄일 수 있다.
++) 추가로, 만약 비동기 처리된 코드 안에서 동기적인 실행이 필요할 때 async-await 함수를 사용한다. 이 예시로는 데이터를 받아오고 그 데이터를 사용할 때 데이터 사용을 먼저 하게 되면 데이터를 찾을 수 없기 때문에 동기적으로 실행하여야 한다.
이 사진은 멀티스레드에서 병령 실행되는 과정이다. 보통은 멀티스레드로 비동기 처리를 한다.
그러나,
자바스크립트는 싱글쓰레드 환경이기 때문에 동시에 두가지 일을 할 수 없다. 따라서 조금 다른 방식으로 비동기가 일어난다.
한마디로 하면 자바스크립트는 자바스크립트 런타임을 통해 비동기 처리가 가능해진다.
자바스크립트는 스크립트 언어이다.
스크립트 언어 : 다른 응용 프로그램 위에서 동작하는 프로그래밍 언어. 대부분 인터프리터(한 번에 한 문장씩 번역) 언어이다.
-> 예) 자바스크립트, JSP, 파이썬, 루비 등
비스크립트 언어 : 컴파일(Compile) 된 후 독립적으로 작동하는 하나의 완전한 응용 프로그램이다.
-> 자바, C, C++ 등.
이런 스크립트 언어가 돌아가는 환경이 런타임 이다.
- 비스크립트 언어를 쉽게 사용하기 위해 스크립트 언어를 사용하는 것 이라고 생각한다. 그러나 스크립트 언어 라는 단어에 부정적인 개발자도 많다고 하니 추후에 더 공부해봐야겠다.
javascript runtime
런타임이란 이런 스크립트 언어가 구동되는 환경을 말한다. 원래 자바스크립트의 런타임은 웹브라우저(크롬, 파이어폭스, 사파리) 이기 때문에 웹브라우저 안에 종속되어 있다. 이러한 자바스크립트를 브라우저 내부 뿐 아니라 외부에서도 사용하기 위해 v8 엔진으로 빌드된 node.js가 나오게 된다.
++) js는 스크립트 언어로 동기적 실행, node.js도 동기적 실행이지만 libuv라는 멀티스레딩을 지원하는 라이브러리를 덕분에 비동기 실행도 가능하다.
즉, 자바스크립트 런타임에는 크롬 웹브라우저(v8엔진), node.js(v8엔진), deno(v8) ,bun(js core) 등이 있다.
자바스크립트 런타임에 대해 알아보았다. 런타임에서 구동되면 해당 런타임의 api도 사용할 수 있는데, setTimeout, setInterval 등이 이에 해당한다.
자바스크립트 런타임의 기본적인 구조이다.
자바스크립트 엔진은 힙과 스택으로 구성돼 있고, 자바스크립트 런타임은 Event Loop , queue로 구성되어 있다.
콜백함수는 함수가 매개변수로 들어가는 함수인데, 이러한 콜백함수들은 기본적으로 비동기 처리된다. 그런데, 이벤트 리스너나 promise, web api 등의 콜백 함수들이 각각 다른 큐에 들어가고, 순서도 다양하다. 이에 대해 자세히 알아보자.
api
callstack에 api가 있으면 실행 후 태스크 큐에 넣는다. web API는 DOM, Ajax, setTimeout, eventListener 등이 있다.
Queue
queue 는 Microtask queue 와 task queue로 나눌 수 있다.
- 콜백함수를 (macro)task queue에 넣는 함수들
: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI 렌더링 등.- 콜백함수를 Microtask queue에 넣는 함수들
: process.nextTick, Promise, Object.observe, MutationObserver
Event Loop
콜 스택이 비어있을 경우에 태스크 큐에서 콜백함수를 가져와 콜 스택에 넣어 실행시키는 기능을 한다.
이벤트 루프는 마이크로태스크 큐의 모든 태스크들을 처리한 다음, 태스크 큐의 태스크들을 처리하기 때문에 마이크로태스크 큐의 우선순위가 더 높다.
++ 추가로 클로저와 Execution Context도 공부하여 변수 범위를 알아보자.
+++ await 동작과정 -> 이 레퍼런스도 공부해보자
참고 레퍼런스들
[JavaScript] 비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)
[JavaScript] 비동기 처리와 자바스크립트 엔진의 동작
비동기 프로그래밍 | JavaScript로 만나는 세상
Javascript 비동기 함수의 동작원리 (feat. EventLoop)
오오 잘 읽었습니다~!!