자바스크립트 실행 컨텍스트와 이벤트 루프의 이해

F-Lab : 상위 1% 개발자들의 멘토링

AI가 제공하는 얕고 넓은 지식을 위한 짤막한 글입니다!

자바스크립트의 실행 컨텍스트란?

자바스크립트의 실행 컨텍스트는 코드 실행에 필요한 정보를 모아놓은 객체입니다. 이는 코드가 실행될 때마다 생성되며, 함수 호출이나 전역 환경에서 생성됩니다.

실행 컨텍스트는 콜 스택에 쌓이며, 이는 코드의 실행 순서를 관리합니다. 콜 스택은 실행 컨텍스트 스택이라고도 불리며, 실행 컨텍스트들이 쌓이는 구조입니다.

왜냐하면 실행 컨텍스트는 코드 실행 전 평가 단계에서 변수 선언과 함수 선언을 미리 등록하기 때문입니다.

실행 컨텍스트는 렉시컬 환경을 통해 식별자와 변수의 범위를 관리합니다. 이는 코드가 선언된 위치에 따라 결정됩니다.

렉시컬 환경은 내부적으로 환경 레코드를 통해 변수와 함수의 정보를 저장합니다.

호이스팅은 코드 실행 전에 변수와 함수 선언이 평가 단계에서 끌어올려지는 현상을 말합니다. 이는 실행 컨텍스트가 생성될 때 식별자를 미리 등록하기 때문입니다.

스코프 체인은 코드 실행 시 식별자에 접근할 수 있는 범위를 결정합니다. 이는 선언된 위치에 따라 정적 스코프가 결정됩니다.

왜냐하면 자바스크립트는 정적 스코프를 사용하여 선언된 위치에 따라 스코프가 결정되기 때문입니다.

스코프 체인은 실행 컨텍스트의 아우터 렉시컬 환경을 통해 외부 스코프로 접근합니다.

이는 코드의 선언 위치에 따라 변수와 함수에 접근할 수 있는 범위를 결정합니다.

이벤트 루프는 자바스크립트의 싱글 스레드 환경에서 비동기 작업을 처리하는 메커니즘입니다. 이는 콜 스택과 콜백 큐를 관리하여 비동기 작업을 순차적으로 실행합니다.

비동기 작업은 코드가 작성된 순서와 상관없이 처리되며, 완료될 때까지 기다리지 않고 다음 작업을 실행합니다.

왜냐하면 비동기 작업은 네트워크 요청이나 입출력 작업을 블록하지 않기 위해 사용되기 때문입니다.

이벤트 루프는 콜 스택이 비어 있을 때 콜백 큐의 작업을 콜 스택으로 옮겨 실행합니다.

마이크로테스크 큐와 매크로테스크 큐를 통해 작업의 우선순위를 관리합니다.

리퀘스트 애니메이션 프레임은 화면이 그려지기 직전에 실행되어 프레임 드랍을 방지합니다. 이는 1초당 60프레임을 그려야 하는 환경에서 사용됩니다.

프레임 드랍은 자바스크립트의 여러 작업이 동시에 일어날 때 발생할 수 있습니다. 리퀘스트 애니메이션 프레임은 이를 방지하기 위해 사용됩니다.

왜냐하면 리퀘스트 애니메이션 프레임은 화면이 그려지기 직전에 실행되어 프레임을 지연 없이 그려주기 때문입니다.

이는 브라우저가 모니터의 주사율을 감지하여 프레임을 조정합니다.

리퀘스트 애니메이션 프레임은 마이크로테스크 큐보다 우선순위가 낮습니다.

에러 바운더리는 리액트에서 컴포넌트의 에러를 포착하여 상위로 전파되지 않도록 막는 방법입니다. 이는 선언형 UI에서 에러 처리를 간소화합니다.

비동기 함수에서 발생한 에러는 에러 바운더리가 포착하지 못합니다. 이는 비동기 작업이 콜 스택을 벗어나기 때문입니다.

왜냐하면 비동기 함수의 에러는 콜 스택이 비어 있을 때 발생하기 때문입니다.

텐스트 쿼리에서는 스로우온 에러 옵션을 통해 비동기 에러를 처리할 수 있습니다.

이는 비동기 에러를 동기 코드로 전환하여 에러 바운더리가 포착할 수 있도록 합니다.

자바스크립트의 실행 컨텍스트와 이벤트 루프는 코드의 실행과 비동기 작업을 관리하는 중요한 개념입니다. 이를 이해하면 리액트와 같은 프레임워크에서의 에러 처리와 비동기 작업을 효과적으로 관리할 수 있습니다.

실행 컨텍스트는 코드 실행에 필요한 정보를 관리하며, 콜 스택을 통해 실행 순서를 제어합니다.

왜냐하면 실행 컨텍스트는 코드 실행 전 평가 단계에서 변수와 함수 선언을 미리 등록하기 때문입니다.

이벤트 루프는 비동기 작업을 관리하여 코드의 순차적 실행을 보장합니다.

리퀘스트 애니메이션 프레임은 프레임 드랍을 방지하여 사용자 경험을 향상시킵니다.

이 컨텐츠는 F-Lab의 고유 자산으로 상업적인 목적의 복사 및 배포를 금합니다.