js는 싱글 스레드 언어이다.
- 즉, 한번에 하나의 작업만 할 수 있다
➡️그렇다면, 비동기 작업은 어떻게 가능한 거지? - 스레드가 하나라는 건 공장 내의 작업 라인이 하나라는 말이다.
➡️ 작업장이 하나인데 어떻게 A작업을 하면서 B작업을 동시에 하지?
비동기(Asynchronous Programming)
하나의 코드나 함수의 실행이 끝나기 전에 다음 코드나 함수를 실행하는 것
javascript의 작동 원리
javascript 작동 환경
js 엔진은 런타임에서 실행된다
-
런타임(Runtime) : 특정 언어로 만든
프로그램을 실행할 수 있는 환경 -
(예) 브라우저,
Node.js -
이 런타임에서 js 엔진이 돌아가서 실행이 되는 것이다
(출처: Javascript 동작원리 (Single thread, Event loop, Asynchronous) - vincent)
js 엔진 주요 구성 요소
- 메모리 힙: 메모리가 할당되는 영역
- 콜 스택: 코드 실행에 따라 호출 스택이 쌓이는 곳
엔진 외부 런타임 환경
API 영역
- 런타임에서 제공하는 api; 브라우저에서 돌아가면 브라우저가 제공하는 web API고, Node.js 환경이면 노드에서 제공하는 API를 사용한다
Web API
- DOM 이벤트(click, scroll, key 등), Ajax, TimeOut 등 비동기 작업을 수행할 수 있도록 브라우저에서 지원하는 API
이벤트 루프
- 이벤트 발생 시 호출되는 콜백 함수를 관리해서
Task Queue에 전달한다 Task Queue에 담겨 있는 콜백 함수들을 콜스택에 넘겨준다
➡️ 이 작업은 콜 스택이 비어 있을 때만 넘겨준다
Task Queue
- Web API에서 비동기 작업이 실행된 후 호출되는 콜백함수들이 기다리는 공간
Microtask Queue,Animation Frames등이 있음
비동기와 논블로킹
논블로킹(Non-blocking)
- 실행 중인 코드 외에 다른 코드의 실행을
막지 않음
블로킹(blocking)
- 실행 중인 코드 외에 다른 코드의 실행을
막음
➡️ 비동기 작업을 하려면 요청 간 논블로킹이 되어야 한다
- JS에서 비동기 작업의 경우, 비동기 작업을
런타임에서 지원하는 API로 위임하기 때문에이 작업을 완료할 때까지싱글 스레드 언어임에도 다른 코드를 실행할 수 있는 것이다
비동기 코드 실행 예시
console.log('hi') // 1
setTimeout(()=>console.log('asynchronous'), 1000) // 2
console.log('one') // 3
console.log('two') // 4
console.log('bye') // 5(1) 1번 코드가 콜 스택에 올라가고 실행이 완료되면(콘솔에 hi 출력) 스택에서 제거된다
(2) js가 비동기 작업을 web API에 위임하고, web API에서 Timer가 생성된다
(2)-1. 1초 후에 Timer가 이벤트 루프를 통해 Task Queue로 콜백 함수(1번 코드의 console.log('asynchronous'))를 보낸다
(3) (2)가 실행되는 중에 3,4,5 코드가 차례로 실행되고(콘솔에 각 문자열 출력) 스택에서 제거된다
(4) 스크립트 내 모든 코드가 실행되어 콜 스택이 비면 Task Queue에서 대기하고 있던 콜백 함수를 콜 스택으로 보낸다
(5) 2번 코드의 콜백 함수가 실행되고, 콜 스택에서 제거된다
✅ 비동기 작업을 위한 콜백 함수는 콜 스택이 비어야지만 Task queue에서 콜 스택으로 오기 때문에, 동기 작업이 모두 끝나고 콜백 함수가 실행된다. 그래서 위 예시의 시간이 0초더라도 결과는 같다
- 1초 후에 실행되는 것이라 다른 게 먼저 실행되는 게 아니다
/* 출력 결과
hi
one
two
bye
asynchronous
*/논블로킹 IO의 개념은 특히 Node.js에서 많이 나오기 때문에, 관련해서 Node.js의 동작 원리가 궁금하시다면 이 글을 읽어보면 도움이 될 것 같습니다!
참고 페이지
