TIL: 2023-04-26

⚙️ 오늘 학습한 내용

자바스크립트의 동작 방식

🐹 오늘의 기분

면접 스터디를 마치고 이벤트 루프에 대해 잘 설명을 못한 것 같아서 아쉬워서 정리해보았다. 뭔가 늘 어렴풋이 알고만 있는 느낌이었는데 관련 글이나 영상을 보기만 하고 직접 정리해보지 않아서 그런 것 같다. 그림 그려가면서 직접 설명할 수 있을만큼 자주 읽어보고 연습해봐야겠다. (계속 '자바스크립트'라는 단어를 보다보니 게슈탈트 붕괴현상이 왔다...)

🗝 키워드

자바스크립트 엔진, 런타임, 이벤트 루프, 콜 스택, 힙, 태스크 큐, 싱글 스레드

🗣 스스로에게 설명

컴파일러과 인터프리터

compile: 프로그래밍 언어를 컴퓨터가 이해할 수 있는 기계어로 바꿔주는 것 (원시코드 -> 목적 코드)
interpreter: 원시 코드를 한 줄씩 바로 실행하는 컴퓨터 프로그램, 컴파일 단계를 거치지 않아도 된다는 장점이 있다.

인터프리터는 코드를 한 줄씩 해석하지만 컴파일러는 전체 프로그램 코드를 스캔하고 코드 전체를 목적 코드로 변환시킨다.
인터프리터는 소스 코드 해석은 빠르지만 실행 시간이 느리다. 컴파일러는 소스 코드 해석은 느리지만 (전체 코드를 변환해야 하므로) 실행 시간은 빠르다.

자바스크립트는 기본적으로 인터프리터 언어이지만, 크롬의 V8 엔진이 도입되면서 필요한 경우 컴파일 과정도 함께 거치게 되었다.

 

참고

JavaScript, 인터프리터 언어일까?

자바스크립트 런타임

런타임: 프로그램이 구동되는 환경
자바스크립트 런타임: 자바스크립트가 구동되는 환경
자바스크립트 런타임의 종류에는 웹 브라우저와 Node.js가 있다.
Node.js는 자바스크립트를 웹 브라우저 바깥에서 실행할 수 있게 해주는 런타임이다. (언어X)

자바스크립트 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터

자바스크립트 엔진에는 구글의 V8 엔진, 사파리의 webkit, spider monkey 등이 있다.

웹 어셈블리 (web assembly)

자바스크립트가 아닌 C나 C++ 같은 언어를 컴파일해서 웹 브라우저에서도 실행될 수 있게 해주는 기술
고성능 웹 애플리케이션을 개발할 때 자바스크립트와 같이 사용된다.

콜 스택(Call stack)과 힙(Heap)

자바스크립트 엔진이 자바스크립트를 실행할 때 원시 타입 및 참조 타입을 저장하는 메모리 구조

콜 스택(Call stack): 원시타입 값과 실행 컨텍스트가 추가되고 제거되는 스택 자료구조. 함수 호출 시 실행 컨텍스트가 순차적으로 콜 스택에 푸쉬된다.
힙(Heap): 객체, 배열, 함수처럼 동적으로 변할 수 있는 참조타입 값을 담는 공간. 구조화되어 있지 않다.

태스크 큐(task queue)와 이벤트 루프(event loop)

자바스크립트는 싱글 스레드 기반 언어로, 요청이 동기적으로 처리된다.

싱글 스레드라 함은, 한 번에 한 작업만 처리할 수 있다는 것을 의미한다.
비동기 요청은 브라우저나 Node.js가 담당한다.

자바스크립트 엔진과 실행 환경을 연결해주는 것이 이벤트 루프이며, 이벤트 루프는 자바스크립트의 동시성을 가능하게 해준다.

이벤트 루프는 자바스크립트에 있는 것이 아니라 환경에 속하는 것이다.

 

자바스크립트의 실행 환경은 태스크 큐, 마이크로태스크 큐 이렇게 두 가지 큐를 갖는다.
큐에는 기본적으로 스크립트 실행, 이벤트 핸들러, 콜백함수 등의 태스크가 담긴다.
태스크가 콜백함수라면 그 종류에 따라 다른 큐에 담기며 마이크로태스크 큐가 더 높은 우선순위를 갖는다.

 

✅ 각 큐에 담기는 콜백함수의 종류
태스크 큐(task queue): setTimeout(), setInterval() , UI 렌더링, requestAnimationFrame()
마이크로태스크 큐(microtask queue): Promise, MutationObserver

 

예를 들어 브라우저에서 `setTimeout()`과 같은 비동기 요청이 들어오면 Web API가 타이머를 처리해주고 시간이 다 되면 그 콜백함수를 큐에 담는다. 그리고 이벤트 루프는 콜 스택이 비게 되었을 때 큐에서 콜백함수를 꺼내와 콜 스택에 넘겨 실행한다.

 

참고

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

 

[JavaScript] 런타임 작동 방식, 비동기와 이벤트 루프 - 하나몬

 

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

 

시간 날 때 볼 동영상