실행 컨텍스트란?

NANA·2025년 3월 31일

실행 컨텍스트

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.
코드가 실행될 때 필요한 환경 정보들을 모아놓은 객체라고 볼 수 있습니다.

실행 컨텍스트는 크게 세 가지 유형이 있습니다:
전역 실행 컨텍스트: 코드가 처음 실행될 때 생성되는 기본 컨텍스트입니다.
함수 실행 컨텍스트: 함수가 호출될 때마다 생성됩니다.
Eval 실행 컨텍스트: eval 함수 내에서 실행되는 코드의 컨텍스트입니다.

각 실행 컨텍스트는 다음과 같은 주요 구성 요소를 가집니다:
변수 환경(Variable Environment): 변수, 함수 선언 등이 저장됩니다.
렉시컬 환경(Lexical Environment): 변수 환경과 유사하지만 let, const로 선언된 변수를 포함하며 스코프 체인 정보를 갖고 있습니다.
This 바인딩: 현재 컨텍스트에서 this가 참조하는 객체를 결정합니다.

자바스크립트 엔진은 코드 실행 시 이러한 컨텍스트들을 콜스택이라는 자료구조에 쌓아가며 관리합니다.
함수가 호출되면 해당 함수의 실행 컨텍스트가 생성되어 스택에 push되고, 함수 실행이 완료되면 해당 컨텍스트는 스택에서 pop됩니다.

스코프란?

변수나 함수에 접근 가능한 유효 범위

스코프의 주요 개념:

전역 스코프 (Global Scope)

코드 어디에서나 접근할 수 있는 변수의 범위
프로그램의 가장 바깥 부분에 선언된 변수

지역 스코프 (Local Scope)

특정 코드 블록 내에서만 접근할 수 있는 변수의 범위
함수 스코프: 함수 내에서 선언된 변수
블록 스코프: 중괄호 {} 내에서 선언된 변수 (let, const 사용 시)

스코프의 규칙:
안쪽 스코프에서는 바깥쪽 스코프의 변수에 접근할 수 있습니다.
바깥쪽 스코프에서는 안쪽 스코프의 변수에 접근할 수 없습니다.

실생활 비유:
스코프는 마치 상자 안에 상자가 들어있는 것과 같습니다. 안쪽 상자에 있는 사람은 자신의 상자와 바깥 상자를 모두 볼 수 있지만, 바깥 상자에 있는 사람은 안쪽 상자 내부를 볼 수 없습니다.

// 전역 스코프
let globalVar = "전역 변수";

function myFunction() {
  // 함수 스코프
  let localVar = "지역 변수";
  
  console.log(globalVar); // "전역 변수" - 접근 가능
  console.log(localVar);  // "지역 변수" - 접근 가능
}

myFunction();
console.log(globalVar); // "전역 변수" - 접근 가능
console.log(localVar);  // 오류! - 접근 불가능

렉시컬 스코프

변수가 어디 정의되었는지에 따라 스코프가 결정되는 것

렉시컬 스코프의 핵심 개념

1. 코드 작성 위치가 중요
함수가 어디서 호출되는지가 아니라, 어디에 선언되었는지에 따라 스코프가 결정됩니다.
코드를 작성하는 시점(코딩 타임)에 스코프가 결정되며, 이는 실행 시점에 변하지 않습니다.

2. 스코프 체인
함수는 자신이 선언된 환경(렉시컬 환경)을 기억합니다.
내부 함수는 자신의 스코프 → 외부 함수의 스코프 → 전역 스코프 순으로 변수를 찾습니다.

자바스크립트 실행 컨텍스트와 변수 참조 과정

실행 컨텍스트(Execution Context)는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다. 코드가 실행될 때 변수를 찾는 과정을 포함하고 있습니다.

실행 컨텍스트의 구성

실행 컨텍스트 스택(호출 스택):

자바스크립트 엔진이 코드를 실행하면서 생성하는 컨텍스트들을 관리
스택 구조로 마지막에 들어온 컨텍스트가 먼저 나감(LIFO)
전역 컨텍스트가 가장 먼저 생성되고 가장 나중에 제거됨

실행 컨텍스트의 각 요소:

변수 환경(Variable Environment):

var로 선언된 변수
함수 선언문
변수와 함수의 초기 바인딩 상태 저장

렉시컬 환경(Lexical Environment):

let, const로 선언된 변수
환경 레코드(변수와 함수 정보 저장)
외부 렉시컬 환경에 대한 참조(스코프 체인을 구성)

this 바인딩:

함수 호출 방식에 따라 결정되는 this 값

변수 참조 과정

현재 컨텍스트 검색:

먼저 현재 실행 중인 컨텍스트의 렉시컬 환경에서 변수를 찾습니다.

스코프 체인 탐색:

현재 컨텍스트에서 변수를 찾지 못하면, 외부 렉시컬 환경 참조를 통해 상위 스코프로 이동합니다.
이 과정을 변수를 찾을 때까지 또는 전역 컨텍스트에 도달할 때까지 반복합니다.

결과:

변수를 찾으면 해당 값을 사용합니다.
전역 컨텍스트까지 검색했는데도 변수를 찾지 못하면 ReferenceError가 발생합니다.

실행 컨텍스트는 자바스크립트가 코드를 실행할 때 만드는 '작업 환경' 이라고 생각하면 됩니다. 위 그림에서는 이것을 3층짜리 건물로 표현했습니다.
실행 컨텍스트를 건물로 생각해보면:

1층 (전역 환경)

프로그램이 시작되면 가장 먼저 만들어지는 기본 층
전역 변수들이 여기 저장됨
모든 함수들은 이 층에서 위층으로 올라갈 수 있음

2층 (outer 함수)

outer() 함수가 호출되면 만들어지는 층
이 함수 안에서 선언된 변수들이 여기 저장됨
inner() 함수의 정의도 이곳에 있음

3층 (inner 함수)

inner() 함수가 호출되면 만들어지는 층
이 함수 안에서 선언된 변수들이 여기 저장됨
현재 코드가 실행되고 있는 곳

let globalVar = "전역 변수";  // 1층에 저장

function outer() {
  let outerVar = "외부 변수";  // 2층에 저장
  
  function inner() {
    let innerVar = "내부 변수";  // 3층에 저장
    
    console.log(innerVar);   // 3층에서 바로 찾음
    console.log(outerVar);   // 3층에 없어서 2층으로 내려가 찾음
    console.log(globalVar);  // 3층, 2층에 없어서 1층까지 내려가 찾음
  }
  
  inner();  // inner 함수 호출 (3층으로 올라감)
}

outer();  // outer 함수 호출 (2층으로 올라감)

전역 실행 컨텍스트와 함수 실행 컨텍스트

전역 실행 컨텍스트

자바스크립트가 처음 실행될 때 생성되는 컨텍스트
프로그램이 종료될 때까지 유지되며, 전역에 선언된 변수나 함수 모두 포함
전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근 가능

자바스크립트는 싱글 스레드이기 때문에, 전역 실행 컨텍스트는 1개만 존재

함수 실행 컨텍스트

함수가 호출될 때마다 생성 되는 컨텍스트
각 함수는 자신만의 실행 컨텍스트를 가지며, 이 컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효
함수가 종료되면 실행 컨텍스트도 사라짐

실행 컨텍스트 구성 요소

실행 컨텍스트는 크게 변수 객체, 스코프 체인, this라는 구성요소로 이루어짐

변수 환경 (Variable Environment)

var로 선언된 변수들을 저장
함수 선언문 정보 저장
호이스팅이 일어나는 공간

렉시컬 환경 (Lexical Environment)

let, const로 선언된 변수들을 저장
현재 컨텍스트에서 사용 가능한 식별자 정보를 담음
외부 환경에 대한 참조 정보를 포함 (스코프 체인을 구성)

this 바인딩 (ThisBinding)

현재 컨텍스트에서 this가 가리키는 대상 정보
함수 호출 방식에 따라 결정됨

쉬운 비유로 설명하면:
변수 환경과 렉시컬 환경: 책상 위의 메모장과 같습니다. 현재 사용할 수 있는 변수들이 적혀 있고, 없는 변수는 어디서 찾아야 하는지 안내(외부 환경 참조)가 적혀 있습니다.
this 바인딩: 현재 작업의 주인이 누구인지 알려주는 이름표와 같습니다.

tanstack-query에서 stale time과 gc time의 차이점

tanstack-query에서 staleTime과 gcTime은 데이터를 캐싱하고 관리하는 데 중요한 두 가지 설정 값입니다. 먼저 요약해서 말씀 드려보자면, staleTime은 데이터가 얼마나 오래 '신선한 상태'로 유지되는지를 정하는 시간이고, gcTime은 해당 쿼리를 사용하는 곳이 없게 된 이후에도 캐시 데이터를 얼마 동안 유지할지를 정하는 시간입니다.

staleTime (데이터 신선도 시간)

의미: 데이터가 "신선하다고" 간주되는 시간이에요

동작 방식:

신선한 상태일 때는 데이터가 행복하고 활기차요! 😊
이 기간 동안 같은 데이터를 다시 요청하면, 서버에 물어보지 않고 바로 캐시에서 가져와요
기본값은 0이라서, 설정하지 않으면 데이터가 페칭 직후 바로 "오래됨(stale)" 상태가 돼요

staleTime: 30000  // 30초 동안은 데이터가 신선해요! 🍓

gcTime (가비지 컬렉션 시간)

의미: 비활성화된 데이터가 메모리에서 완전히 사라지는 시간