hmk run dev

javascript 동작 원리 본문

javascript

javascript 동작 원리

hmk run dev 2023. 4. 12. 23:14


자바스크립트는 브라우저에서 실행되는 스크립트 언어입니다. 이 언어는 변수, 함수, 객체 등의 요소를 이용하여 동적인 웹페이지를 만들기 위해 사용됩니다. 자바스크립트의 동작 원리와 메모리 관리는 다음과 같습니다.

1. 동작 원리 자바스크립트는 클라이언트 측에서 동작하며, 실행 순서는 다음과 같습니다.

  1. 스크립트 파일을 다운로드합니다.
  2. 파싱(parsing) 과정에서 코드를 읽어들이고 문법적으로 검사합니다.
  3. 실행 엔진(execution engine)이 코드를 실행합니다.
  4. 실행 과정에서 발생하는 이벤트를 처리합니다.
  5. 실행이 완료되면 메모리에서 삭제됩니다.

2. 메모리 관리 자바스크립트는 가비지 컬렉션(garbage collection)을 이용하여 메모리를 관리합니다. 가비지 컬렉션이란, 사용하지 않는 메모리를 자동으로 해제하는 프로세스를 의미합니다. 자바스크립트는 다음과 같은 방법으로 메모리를 관리합니다.

  • 변수의 스코프(scope)에 따라 메모리 할당을 결정합니다. 전역 변수는 전체 애플리케이션에서 사용되므로, 실행이 종료될 때까지 메모리에 남게 됩니다. 지역 변수는 함수가 실행되는 동안에만 메모리에 할당되고, 함수가 종료되면 메모리에서 해제됩니다.
  • 참조 계수(reference counting) 방식을 사용하여 객체를 관리합니다. 객체를 생성할 때 참조 계수를 1 증가시키고, 참조를 삭제할 때 1 감소시킵니다. 참조 계수가 0이 되면 가비지 컬렉션에 의해 자동으로 메모리에서 삭제됩니다.
  • 마지막으로, 최신 자바스크립트 엔진에서는 메모리 누수(memory leak)를 방지하기 위한 많은 기능을 제공합니다. 예를 들어, WeakMap, WeakSet, FinalizationRegistry 등의 객체를 사용하여 메모리를 안전하게 관리할 수 있습니다.

이러한 방식으로 자바스크립트는 메모리를 효율적으로 관리하며, 안정적인 실행 환경을 제공합니다.

  • 메모리 관리 팁
    1. 불필요한 객체 생성 피하기 자바스크립트에서는 객체를 생성할 때마다 메모리를 할당하므로, 불필요한 객체 생성은 메모리 낭비를 야기할 수 있습니다. 따라서 가능하면 객체 생성을 최소화하도록 노력해야 합니다.
    2. 객체 참조 해제 객체를 더 이상 사용하지 않는 경우, 참조를 해제해야 합니다. 이렇게 하면 가비지 컬렉터가 해당 객체를 메모리에서 제거할 수 있습니다.
    3. 큰 데이터 세트를 작은 청크로 나누기 큰 데이터 세트를 한 번에 로드하면 메모리 부족 문제를 야기할 수 있습니다. 이를 해결하기 위해서는 데이터를 작은 청크로 나누어서 로드하는 것이 좋습니다.
    4. 루프 안에서 변수 선언 최소화 루프 내부에서 변수를 선언하면, 루프를 실행할 때마다 변수가 메모리에 할당됩니다. 따라서 가능하면 루프 외부에서 변수를 선언하고 사용하는 것이 좋습니다.
    5. 큰 배열 사용 지양 큰 배열을 사용하면 메모리 사용량이 급증할 수 있습니다. 이를 해결하기 위해서는 가능하면 작은 배열을 사용하거나, 배열 대신 다른 자료구조를 사용하는 것이 좋습니다.
    6. 콜백 함수에서 메모리 누수 방지 콜백 함수에서는 외부 변수에 대한 참조를 지양하고, 필요한 변수만을 사용하도록 해야 합니다. 이를 통해 메모리 누수를 방지할 수 있습니다.
    7. 대용량 데이터 처리 시 브라우저 작업 중단 방지 대용량 데이터를 처리할 때는 작업을 분할하고, 각 분할 작업이 브라우저 작업을 중단하지 않도록 하는 것이 좋습니다. 이를 위해 setTimeout이나 requestAnimationFrame을 활용하는 것이 좋습니다.



실행컨텍스트

자바스크립트에서 실행 컨텍스트(Execution Context)는 코드가 실행되는 환경을 나타냅니다. 실행 컨텍스트는 변수, 함수 선언, 매개변수 등의 정보를 담고 있으며, 스택(Stack) 자료구조로 관리됩니다.

실행 컨텍스트는 다음과 같은 3가지 요소로 구성됩니다.

1. Variable Environment 실행 컨텍스트 내부에는 변수, 함수 선언, 매개변수 등의 정보가 저장되는 공간인 Variable Environment가 존재합니다. 이 공간에는 현재 컨텍스트에서 사용할 수 있는 지역 변수, 매개변수, 함수 선언 등이 저장되며, 전역 컨텍스트에서는 전역 변수와 전역 함수 선언이 저장됩니다.

2. Lexical Environment 실행 컨텍스트 내부에는 Lexical Environment라는 공간도 존재합니다. 이 공간은 스코프 체인(Scope Chain)을 구현하기 위해 사용됩니다. Lexical Environment는 Variable Environment와 유사하지만, 스코프 체인의 구성에 관련된 정보도 함께 저장합니다.

3. This Binding 실행 컨텍스트 내부에는 this라는 특별한 값도 저장됩니다. this는 함수가 호출될 때 결정되며, 호출 방식에 따라 값이 달라집니다.

실행 컨텍스트는 함수 호출 시마다 생성되며, 스택(Stack) 자료구조에 저장됩니다. 함수가 실행되는 동안에는 해당 함수의 실행 컨텍스트가 스택의 맨 위에 위치하게 되며, 함수 실행이 종료되면 스택에서 제거됩니다. 이렇게 스택에 쌓이고 제거되는 실행 컨텍스트들의 집합이 Call Stack입니다.

자바스크립트에서 실행 컨텍스트는 코드의 실행 흐름을 제어하고, 변수나 함수 선언 등의 정보를 관리하는 중요한 요소입니다. 따라서 자바스크립트를 이해하려면 실행 컨텍스트에 대한 이해가 필수적입니다.

4. 이벤트 루프

이벤트 루프(Event Loop)는 자바스크립트 엔진 내부에서 동작하는 메커니즘으로, 비동기 작업의 처리와 이벤트 발생을 감시하고 이를 적절히 처리하는 역할을 합니다.

이벤트 루프는 큐(Queue)와 콜스택(Call Stack) 두 가지 요소를 감시하며, 큐에 쌓인 작업들을 적절하게 콜스택으로 이동시킵니다. 큐에는 이벤트 발생, 타이머, 비동기 작업의 콜백 함수 등이 들어있으며, 이러한 작업들은 콜스택이 비어있을 때 이벤트 루프에 의해 콜스택으로 이동하여 실행됩니다.

예를 들어, setTimeout 함수를 사용하여 일정 시간이 경과한 후 특정 작업을 처리하도록 등록하면, 해당 작업은 백그라운드에서 실행되고 완료된 후에 큐에 콜백 함수가 등록됩니다. 이벤트 루프는 이러한 콜백 함수가 큐에 등록되었는지를 지속적으로 감시하다가, 콜스택이 비어있는 상태가 되면 해당 콜백 함수를 콜스택에 push하여 실행시킵니다.

따라서 이벤트 루프는 큐에 들어온 작업을 감시하면서, 콜스택이 비어있을 때 해당 작업을 콜스택으로 이동시켜 실행하는 역할을 합니다. 이를 통해 자바스크립트는 비동기 작업을 효율적으로 처리하면서도 싱글 스레드 방식으로 작업을 처리할 수 있습니다.

Comments