TIL 05 | 콜 스택과 메모리 힙

콜 스택과 메모리 힙

자바스크립트 엔진이 구동되면서 코드를 읽고 실행하는 과정에서 중요한 두가지 단계가 있다.

① 정보(ex. 변수, 함수 등)를 특정한 장소에 저장하는 것 → Memory Heap
② 실제 실행되고 있는 코드를 트래킹하는 작업 → Call Stack

메모리 힙(Memory Heap)

메모리 힙(Memory Heap)은 메모리 할당이 이루어지는 공간으로 선언한 변수, 함수 등의 정보를 담고있다. 예를 들면 메모리 힙이라는 창고가 있고, 변수나 함수들은 밖에 이름이 라벨지로 붙어 있는 박스들이다.

콜 스택(Call Stack)

메모리에서 존재하는 공간 중 하나로 코드를 읽어내려가면서 수행할 작업들을 밑에서 부터 하나씩 쌓고, 메모리 힙에서 작업 수행할 필요한 것들을 찾아서 수행하는 공간이다.

스택 오버플로우(Stack Overflow)

콜 스택에 작업이 순차적으로 쌓이는데, 특정 작업을 수행하기 위해서 다른 작업이 필요할 경우 콜 스택에서 작업이 제거되는 대신 다른 작업이 위에 추가로 쌓이게 된다. 이처럼 작업을 수행하지 않고 계속 콜 스택 위로 쌓이기만 할 경우 콜 스택의 한정된 공간과 크기를 넘어서 되는데, 이를 스택 오버플로우(Stack Overflow)라고 한다.

가비지 컬렉터(Garbage Collector)

콜 스택과 메모리 힙은 각각의 공간은 무한정이지 않고 한정적이기 때문에 효율성 있게 관리할 필요가 있다. 자바스크립트를 이 공간을 효율적으로 관리하기 위해서 효용가치가 없다고 판단되는 변수, 함수 등을 함수의 실행 종료 후 메모리 힙에서 제거하는 동작한다. 이렇게 하면 필요한 데이터만 메모리 힙에 저장함으로써 메모리를 더욱 더 여유롭게 관리할 수 있다. 이러한 역할을 수행할 수 있게 해주는 도구가 가비지 컬렉터(Garbage Collector)이다.

메모리 누수(Memory Leak)

메모리 힙이 제대로 관리 되지 않을 경우 메모리 공간의 범위를 넘어서서 정보들이 저장되는 경우 생긴다. 이를 메모리 누수(Memory Leak)라고 한다. 이는 과거에 사용되었고, 현재는 필요가 없음에도 불구하고 메모리 공간에서 되지 않고 공간을 차지하고 있는 현상을 의미한다.

메모리 누수를 유발하는 3가지

① 전역 범위에서 전역 변수를 많이 만들 경우, 메모리 누수가 발생한다.

② 이벤트 리스너(Event Listener)의 경우 사용이 완료되면 제거를 해야하는데, 만약 제거하지 않을 경우 계속해서 이벤트 리스너가 추가되기 때문에 메모리 누수가 발생한다.

③ setInterveral() 함수의 경우 일정 주기마다 특정 작업을 수행하도록 지시해주기 때문에 이는 계속 사용 중인 것으로 간주되어 가비지 컬렉터에 의해서 제거되지 못하고 메모리 공간을 계속 차지하게 된다.