데이터를 그리기 위한 Front_End 언어 공부하기 : JS _ 01 == 콜스택(CallStack)

Data-Forge : 데이터로 세상 이해해보기.·2025년 4월 8일
JavaScript개발공부프론트엔드

데이터를 그리기 위한 Front_End : React & Next

목록 보기
6/7

데이터를 그리기 위한 FrontEnd 언어 공부하기 : JS 01 == 콜스택(CallStack)

▽ JS _ 01 == 콜스택(CallStack)

목  차

1.콜스택의 정의 및 역할

2.콜스택의 동작 원리

3.콜스택과 함수 호출

4.콜스택의 한계: 스택 오버플로우

5.콜스택과 비동기 처리

6.콜스택과 실행 컨텍스트

7.콜스택과 메모리 관리

8.고급 개념: 콜스택과 스코프 체인

★자바스크립트(JS)

  • 자바스크립트는 '단일 - 스레드' 언어로, 한 번에 하나의 작업만 처리(단일 호출 스택)할 수 있습니다.
    - 단일 호출 스택이 있다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 의미입니다.
    - stack은 마지막에 들어온 것이 가장 먼저 처리.
    .
  • 이러한 특성은 자바스크립트의 "콜스택"이 코드의 실행 순서를 관리하는 데 중요한 역할을 하게 만듭니다.
  • "콜스택"은 함수 호출을 기록하는 자료구조로, 함수가 실행될 때 생성되며
    { 함수의 변수, 스코프 체인, this } 등의 정보를 포함하는 "실행 컨텍스트"를 관리합니다.

1.콜스택의 정의 및 역할.

"콜스택"은

  • 자바스크립트 엔진이 함수 호출을 추적하고 관리하는 데 사용되는 자료구조입니다.

    • 이는 현재 실행중인 함수와 그 함수 내에서 '호출' 된 다른 함수를 기록하며,
      각 함수의 '실행 컨텍스트'를 관리합니다.
    • '실행-컨텍스트'는 {함수의 변수, 스코프 체인, 'this' } 등의 정보를 포함하여
      '코드의 흐름'을 제어하는 데 중요한 역할을 합니다.

  • '콜스택'은 프로그램에서 우리가 어디쯤에 위치하고 있는지를 기본적으로 기록하는 데이터 구조입니다.

    • 함수를 실행하면 해당 함수의 기록을 스택 상 맨 위에 추가(push)하게 됩니다.
    • 함수가 결과 값을 반환하면 스택에 쌓여있던 함수는 제거(pop)됩니다.

  • '콜스택'은 프로그램에서 "메서드(함수) 호출을 추적하는 메모리 영역"이라고 할 수 있습니다.

    • LIFO(Last In, First Out)구조를 가지며, 가장 마지막에 호출된 함수가 먼저 실행 완료되어 제거 됩니다.

'콜스택'의 주요 기능.

  • 함수 호출 추적.
    • '콜스택'은 함수 호출의 순서를 기록하여, 코드의 실행 순서를 관리합니다.
  • 실행 컨텍스트 관리.
    • 각 함수의 '실행 컨텍스트'를 생성하고 관리하여, 변수의 범위와 접근성을 결정합니다.
  • 코드 흐름 제어.
    • '콜스택'은 함수가 반환될 때까지 코드의 흐름을 제어하며,
      반환 시 메모리 해제를 통해 메모리 누스를 방지합니다.

'콜스택'의 기본 특징.

  • LIFO(Last In Firtst Out) 방식으로 동작.
  • 각 스레드마다 '독립적인' 콜스택 보유
  • 메소드 호출 시 스택 프레임(Stack Frame) 생성
  • 메소드 실행 완료 시 해당 프레임 제거.

2.콜스택의 동작 원리.

  • 콜스택의 동작은 'Last-In-First-Out(LIFO)' 원칙에 따라 작동합니다.
    • 이는 함수가 호출될 때마다 콜스택에 추가되고, 반환될 때 제거되는 방식으로 이루어집니다.

콜스택의 동작 원리.

1. 함수 호출 시 스택 프레임(Stack Frame) 추가.

  • 함수가 호출될 때,
    해당 함수의 {매개변수, 지역변수, 반환 주소} 등의 정보가 담긴 '스택 프레임'이 스택에 쌓입니다.

2. 함수 실행 완료 시 스택 프레임 제거.

  • 함수 실행이 끝나면, 해당 스택 프레임이 제거(Pop)되며, 이전 함수로 돌아갑니다.

3. 메인 함수 종료 시 스택 비움.

  • 프로그램의 main()함수까지 종료되면, 스택이 완전히 비워집니다.

콜스택의 동작 단계.

1.함수 호출:

  • 함수가 호출되면 콜스택에 추가됩니다. 이때, 함수의 실행 컨텍스트가 생성되어 콜스택에 푸시됩니다.

2.함수 실행:

  • 콜스택의 최상위 함수가 실행됩니다. 이는 현재 실행 중인 함수를 의미합니다.

3.함수 반환:

  • 함수가 반환되면 콜스택에서 제거됩니다.
    • 이때, 해당 함수의 실행 컨텍스트와 관련된 메모리가 해제됩니다.

4.스택이 비면:

  • 모든 함수가 반환되면 콜스택은 비게 됩니다.
    • 이는 프로그램이 종료되거나 다른 작업으로 전환될 때 발생합니다.
 public class CallStack {
    public static void main(String[] args) {
        System.out.println("main() 호출");
        first();
        System.out.println("main() 종료");
    }

    public static void first() {
        System.out.println("first() 호출");
        second();
        System.out.println("first() 종료");
    }

    public static void second() {
        System.out.println("second() 호출");
        third();
        System.out.println("second() 종료");
    }

    public static void third() {
        System.out.println("third() 호출");
        System.out.println("Hello from third()");
        System.out.println("third() 종료");
    }
}

＠위의 코드 실행결과.

main() 호출
first() 호출
second() 호출
third() 호출
Hello from third()
third() 종료
second() 종료
first() 종료
main() 종료
  • 위 실행 결과에서 알 수 있듯이 메소드가 호출되는 순서대로 스택에 쌓이고(push),
  • 각 메소드의 실행이 완료되면 역순으로 스택에서 제거(pop)됩니다.

1.처음 main() 메소드가 호출되고
2.main() 내부에서 first()가 호출되고
3.first() 내부에서 second()가 호출되고
4.second() 내부에서 third()가 호출됩니다.

.

그리고 third() 메소드의 실행이 완료되면서부터 역순으로

1.third()가 종료되어 스택에서 제거되고
2.second()가 종료되어 스택에서 제거되고
3.first()가 종료되어 스택에서 제거되고
4.마지막으로 main()이 종료되어 스택에서 제거됩니다.

이것이 바로 콜스택의 LIFO(Last In First Out) 구조를 보여줍니다.

3.콜스택과 함수 호출.

  • 콜스택은 함수 호출의 순서를 관리하여 코드의 흐름을 제어합니다.

    • 예를 들어, foo 함수가 bar 함수를 호출하면, foo 함수는 먼저 콜스택에 추가되고,
    • 그 다음 bar 함수가 추가됩니다.
    • bar 함수가 반환되면 콜스택에서 제거되고, foo 함수가 계속 실행됩니다.
function foo() {
  console.log('foo start');
  bar();
  console.log('foo end');
}

function bar() {
  console.log('bar');
}

foo();

1.foo()가 호출되면 콜스택에 추가됩니다.

2.foo() 내에서 bar()가 호출되면 bar()가 콜스택에 추가됩니다.

3.bar()가 반환되면 콜스택에서 제거됩니다.

4.foo()가 반환되면 콜스택에서 제거됩니다.

4.콜스택의 한계: 스택 오버플로우.

  • 콜스택은 함수 호출을 기록하는 자료구조로, 한정된 크기를 가지고 있습니다.

    • 콜스택의 한계는, '스택 영역'의 크기가 '유한'하다는 점입니다.
    • 즉, 호출 스택의 크기를 초과하면(==함수 호출이 너무 깊어지면 콜스택이 넘쳐나면서) 스택 오버플로우(Stack OverFlow)가 발생하여 함수가 종료될 수 있습니다.

  • 이는 주로 재귀 함수에서 발생하며, 함수가 자신을 호출하는 데 종료조건이 없을 때 발생합니다.

스택 오버플로우의 원인.

  • 1.재귀 함수의 종료 조건 부족:

    • 재귀 함수는 자신을 호출하는 방식으로 문제를 해결하지만, 종료 조건이 없으면 무한히 호출됩니다.
      • 이는 콜스택이 넘쳐나면서 오류를 발생시킵니다.

  • 2.함수 호출의 깊이:

    • 함수 호출이 너무 깊어지면 콜스택의 크기 한계를 초과할 수 있습니다.
      • 이는 특히 재귀 함수에서 발생할 수 있습니다
function recursive() {
  recursive(); // 종료 조건이 없으면 스택 오버플로우 발생
}

recursive();

스택 오버플로우의 해결 방법.

  • 1.종료 조건 추가:

    • 재귀 함수에 종료 조건을 추가하여 무한 호출을 방지합니다.

  • 2.반복문 사용:

    • 재귀 대신 반복문을 사용하여 함수 호출을 줄입니다.

  • 3.메모이제이션:

    • 함수 호출 결과를 캐싱하여 불필요한 호출을 줄입니다.

  • 4.setTimeout 사용:

    • 비동기 처리를 통해 콜스택을 비우고 이벤트 루프에 의해 처리되도록 합니다
function recursive(i) {
  if (i >= 5) return; // 종료 조건
  recursive(i + 1);
}

recursive(1);

5.콜스택과 비동기 처리.

위에서 자바스크립트는 '단일 스레드' 언어로, 스택 상에서 한번에 하나의 작업만 처리할 수 있다고 했습니다.

그러나, '비동기 처리' 방법을 통해 '콜스택'의 한계를 극복하고, 여러 작업을 동시에 처리하는 것처럼 보이게 할 수 있습니다.

비동기 처리는 '콜스택'을 차지하지 않고 다른 작업을 수행할 수 있도록 하여, 더 효율적인 코드를 만들어줍니다.

비동기 처리 원리(방법)

1. 메시지 큐(== 테스크 큐 == 이벤트 큐):

  • 큐란 비동기 콜백 함수들이 대기하는 리스트입니다.
  • setTimeout, AJAX 등 비동기 콜백 함수들은 자바스크립트 엔진 밖으로 나와 바로 해당 이벤트 큐로 넘어오게 됩니다.
  • 비동기 작업은 콜백 함수를 메시지 큐에 추가합니다.
    • 메시지 큐는 실행될 콜백 함수나 메시지 목록을 저장하는 큐입니다.
    • 스택과 다르게 큐는 FIFO(First In First Out) 방식입니다.

2. 이벤트 루프:

  • 이벤트 루프는 콜스택이 비었을 때
    메시지 큐의 첫 번째 콜백 함수를 콜스택에 추가(큐에서 콜백 함수를 꺼내오기)하여 실행합니다.
    • 이는 비동기 작업이 콜스택을 차지하지 않고 처리되도록 합니다.

비동기 처리 장점.

  • 1.블로킹 방지:

    • 비동기 처리는 콜스택을 차지하지 않으므로, 다른 작업을 블로킹하지 않고 수행할 수 있습니다.

  • 2.효율적인 자원 활용:

    • 여러 작업을 동시에 처리하는 것처럼 보이게 하여,
      시스템 자원을 더 효율적으로 활용할 수 있습니다.
setTimeout(() => {
  console.log('비동기 처리');
}, 1000);

console.log('동기 처리');

  1. setTimeout 함수는 비동기적으로 실행됩니다. 이는 콜백 함수를 메시지 큐에 추가합니다.

  2. console.log('동기 처리')는 즉시 실행됩니다.

  3. 이벤트 루프가 콜스택이 비었을 때 메시지 큐의 콜백 함수를 실행합니다.

비동기 처리와 콜스택의 관계

  • 콜백 함수의 실행:

    • 비동기 작업이 완료되면 콜백 함수가 메시지 큐에 추가됩니다.
      • 이벤트 루프가 이를 콜스택에 추가하여 실행합니다.

  • 콜스택의 비움:

    • 비동기 처리는 콜스택을 비우고 다른 작업을 수행할 수 있도록 합니다.
      • 이는 시스템이 더 많은 작업을 처리할 수 있도록 돕습니다.

비동기 처리의 주요 기술

  • 1.Promise:

    • 비동기 작업의 결과를 관리하는 데 사용됩니다.

  • 2.async/await:

    • Promise를 기반으로 비동기 코드를 동기적으로 작성할 수 있도록 합니다.

  • 3.setTimeout, setInterval:

    • 특정 시간 후에 함수를 실행하거나 반복적으로 실행하는 데 사용됩니다.

이러한 비동기 처리 기술을 통해 콜스택의 한계를 극복하고, 더 효율적인 코드를 작성할 수 있습니다.

6.콜스택과 실행 컨텍스트.

실행 컨텍스트

  • 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미합니다.

  • 이는 함수의 변수, 스코프 체인, this 등의 정보를 포함하여
    코드가 실행되기 위한 모든 필요한 데이터를 제공합니다.

  • 실행 컨텍스트는 두 가지 주요 단계로 나뉩니다:

    • 생성 단계 (Creation Phase):

      • 변수와 함수 선언이 메모리에 할당됩니다.
      • 이 단계에서 변수와 함수는 호이스팅됩니다.

    • 실행 단계 (Execution Phase):

      • 코드가 실제로 실행되며, 변수에 값이 할당되고 함수가 호출됩니다.

콜스택과 실행 컨텍스트의 관계

  • 콜스택은 실행 컨텍스트를 관리하는 자료구조입니다.

  • 콜스택은 Last-In-First-Out (LIFO) 원칙에 따라 작동하며,
    함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되어 콜스택에 추가됩니다.

    • 함수 호출:

      • 함수가 호출되면 새로운 실행 컨텍스트가 생성되고 콜스택에 추가됩니다.

    • 함수 실행:

      • 콜스택의 최상위 실행 컨텍스트가 실행됩니다.

    • 함수 반환:

      • 함수가 반환되면 해당 실행 컨텍스트가 콜스택에서 제거됩니다.
function foo() {
  console.log('foo start');
  bar();
  console.log('foo end');
}

function bar() {
  console.log('bar');
}

foo();

.

1.foo()가 호출되면 foo의 실행 컨텍스트가 콜스택에 추가됩니다.

2.foo() 내에서 bar()가 호출되면 bar의 실행 컨텍스트가 콜스택에 추가됩니다.

3.bar()가 반환되면 bar의 실행 컨텍스트가 콜스택에서 제거됩니다.

4.foo()가 반환되면 foo의 실행 컨텍스트가 콜스택에서 제거됩니다.

7.콜스택과 메모리 관리.

JS의 '메모리 관리'는 '스택'과 '힙'이라는 두 가지 주요 메모리 공간을 통해서 이루어집니다.

콜스택과 메모리 관리.

  • '콜스택'은 함수 호출을 기록하는 자료구조로, '스택' 메모리 공간에 저장됩니다.
    • '스택'은 '정적 메모리 할당'을 사용하여, '기본형데이터(숫자, 불리언, 문자열)'와 함수 호출을 저장합니다.
    • 이러한 데이터는 크기가 고정되어 있으며, '컴파일 시점'에 이미 결정됩니다.

콜스택의 메모리 관리

  • 콜스택은 메모리 관리에도 중요한 역할을 합니다.

      1. 함수 호출:
        • 함수가 호출되면, 해당 함수의 '실행 컨텍스트'가 '스택'에 추가됩니다.
      1. 함수 실행:
        • 함수가 실행되며, 변수와 함수 선언이 메모리에 할당됩니다.
      1. 함수 반환:
        • 함수가 반환되면, 해당 함수의 실행 컨텍스트와 관련된 메모리가 해제됩니다.
          • 이는 '콜스택'에서 제거됩니다.

힙과 메모리 관리.

  • 힙은 '동적 메모리 할당'을 사용하여 {객체, 배열, 함수} 등의 '비-기본형 데이터'를 저장합니다.
    • 이러한 데이터는 크기가 고정되어 있지 않으며, '런타임 시에 크기가 결정'됩니다.

힙의 메모리 관리.

    1. 객체 생성:
      • 객체가 생성되면, 힙에 메모리가 동적으로 할당됩니다.
    1. 참조 관리:
      • 객체에 대한 참조가 스택에 저장됩니다.
        • 이는 힙에 있는 실제 객체 데이터에 접근하는 데 사용됩니다.
    1. 가비지 컬렉션:
      • 더 이상 참조되지 않는 객체는 '가비지 컬렉터'에 의해 메모리에서 해제됩니다.

ex) 콜스택과 힙의 관계.

function foo() {
  var obj = { // obj는 힙에 저장되며, 참조는 스택에 저장됩니다.
    name: "John",
    age: 30
  };
  console.log(obj.name); // obj 참조를 통해 힙의 데이터에 접근합니다.
}

foo(); // foo가 반환되면 obj 참조가 해제됩니다.
    1. foo()가 호출되면 foo의 실행 컨텍스트가 콜스택에 추가됩니다.
    1. obj가 생성되면 힙에 메모리가 할당되고, obj 참조는 스택에 저장됩니다.
    1. foo()가 반환되면 obj 참조가 해제되며, 가비지 컬렉터가 힙의 메모리를 해제할 수 있습니다.

8.고급 개념: 콜스택과 스코프 체인.

콜스택.

  • 콜스택은 함수 호출을 기록하는 자료구조로,
    Last-In-First-Out (LIFO) 원칙에 따라 작동합니다.

  • 함수가 호출되면 새로운 실행 컨텍스트가 생성되어 콜스택에 추가됩니다.

  • 콜스택의 역할.

    • 함수 호출 추적: 콜스택은 함수 호출의 순서를 기록합니다.

    • 실행 컨텍스트 관리: 각 함수의 실행 컨텍스트를 관리하여 코드의 흐름을 제어합니다.

실행 컨텍스트.

  • 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미합니다.
    • 이는 함수의 변수, 스코프 체인, this 등의 정보를 포함하여 코드가 실행되기 위한 모든 필요한 데이터를 제공합니다.

실행 컨텍스트의 구성 요소.

  • 변수 객체 (Variable Object):

    • 변수와 함수 선언을 저장합니다.

  • 스코프 체인 (Scope Chain):

    • 변수의 범위를 결정하는 데 사용됩니다.

  • this 객체:

    • 함수가 호출될 때의 this 값을 저장합니다.

실행 컨텍스트의 생성 및 실행 단계.

  • 1.생성 단계 (Creation Phase):

    • 변수와 함수 선언이 메모리에 할당됩니다.
      • 이 단계에서 변수와 함수는 호이스팅됩니다.

  • 2.실행 단계 (Execution Phase):

    • 코드가 실제로 실행되며, 변수에 값이 할당되고 함수가 호출됩니다.

스코프.

  • 스코프는 변수의 범위를 결정하는 데 사용되는 개념입니다.
  • 스코프는 변수가 선언된 위치에 따라 결정되며, 변수가 접근할 수 있는 범위를 정의합니다.
  • 스코프는 전역 스코프와 지역 스코프로 나뉩니다.

스코프의 종류.

  • 전역 스코프:
    • 전역 변수는 프로그램 전체에서 접근할 수 있습니다.
  • 지역 스코프:
    • 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있습니다.

스코프 체이닝.

  • '스코프 체이닝'은 변수의 범위를 결정하는 데 사용되는 체인입니다.
    • 이는 함수가 호출될 때 생성되며, 외부 함수의 스코프와 연결됩니다.
  • '스코프 체인'은 변수를 찾을 때 사용되며,
    • 가장 가까운 스코프에서 변수를 찾을 수 없으면 외부 스코프로 이동하여 검색합니다.

스코프 체이닝의 동작 원리.

    1. 변수 참조:
      • 변수가 참조될 때 스코프 체인을 따라 변수를 찾습니다.
    1. 스코프 체인 탐색:
      • 가장 가까운 스코프에서 변수를 찾을 수 없으면 외부 스코프로 이동하여 검색합니다.

고급 개념 : 클로저와 스코프 체이닝.

  • 클로저는 함수가 자신의 스코프 체인을 기억하고, 외부 함수가 반환된 후에도 접근할 수 있는 기능입니다.
    • 이는 스코프 체인이 함수의 실행 컨텍스트와 밀접하게 연결되어 있음을 보여줍니다
function outer() {
  var x = 10;
  return function inner() {
    console.log(x); // inner는 outer의 스코프 체인을 기억합니다.
  };
}

var closure = outer();
closure(); // outer가 반환된 후에도 x에 접근할 수 있습니다.

  1. outer()가 호출되면 outer의 실행 컨텍스트가 콜스택에 추가됩니다.

  2. inner() 함수가 반환되면 outer의 스코프 체인이 기억됩니다.

  3. closure()가 호출되면 inner() 함수가 outer의 스코프 체인을 통해 x에 접근합니다.

콜스택과 스코프 체이닝의 관계.

콜스택과 스코프 체이닝은 자바스크립트의 코드 실행을 관리하는 데 중요한 역할을 합니다. - 콜스택은 함수 호출을 기록하는 자료구조로, 각 함수의 실행 컨텍스트를 관리합니다.

  • 스코프 체이닝은 변수의 범위를 결정하는 데 사용되는 체인으로,
    함수가 호출될 때 생성되며 외부 함수의 스코프와 연결됩니다.

콜스택과 스코프 체이닝의 동작 원리.

  • 함수 호출:

    • 함수가 호출되면 새로운 실행 컨텍스트가 생성되어 콜스택에 추가됩니다.

  • 스코프 체인 생성:

    • 함수의 스코프 체인이 생성되어 외부 함수의 스코프와 연결됩니다.

  • 변수 접근:

    • 변수가 참조될 때 스코프 체인을 따라 변수를 찾습니다.
    • 가장 가까운 스코프에서 변수를 찾을 수 없으면 외부 스코프로 이동하여 검색합니다.
function outer() {
  var x = 10; // x는 outer의 스코프에 있습니다.
  function inner() {
    console.log(x); // inner는 outer의 스코프 체인을 통해 x에 접근합니다.
  }
  inner();
}

outer();
    1. outer()가 호출되면 outer의 실행 컨텍스트가 콜스택에 추가됩니다.
    1. inner()가 호출되면 inner의 실행 컨텍스트가 콜스택에 추가되고, outer의 스코프와 연결됩니다.
    1. inner() 내에서 x가 참조되면 스코프 체인을 따라 outer의 스코프에서 x를 찾습니다.

profile
Data-Forge : 데이터로 세상 이해해보기.
Roll with the punches
이전 포스트

데이터를 그리기 위한 Front_End 언어 공부하기 : React _ 03 == API에 대해서 이해해보기.

다음 포스트

데이터를 그리기 위한 Front_End 언어 공부하기 : React 프로젝트의 폴더 구조 _ FSD(Feature-Sliced Design) 아키텍쳐.

0개의 댓글