요약
스택은 임시적인 데이터 저장에 사용되고 자동으로 관리되며, 함수 호출과 관련이 깊다. 반면에 힙은 생명주기가 더 긴 데이터나 동적으로 크기가 변하는 데이터를 저장하고, 개발자가 직접 메모리를 할당하고 해제해야 한다.
스택(Stack)
스택은 데이터를 후입선출(LIFO, Last-In-First-Out) 방식으로 저장하는 메모리 영역으로, 주로 함수 호출과 관련된 로컬 변수, 매개변수 및 함수 호출 정보를 저장한다.
예를 들어, 함수가 호출될 때마다 해당 함수의 매개변수와 로컬 변수가 스택에 할당되며, 함수가 반환될 때 이들이 스택에서 제거된다.
스택은 자동으로 관리되며, 함수 호출이 완료될 때 자동으로 메모리가 해제된다.
힙(Heap)
힙은 동적으로 할당된 데이터를 저장하는 메모리 영역으로, 스택과는 달리 메모리의 할당과 해제를 개발자가 직접 관리해야 한다.
힙은 데이터의 생명주기가 스택보다 더 길거나 예측할 수 없는 경우에 사용된다.
예를 들어, 배열이나 객체와 같은 데이터 구조를 힙에 저장하고, 프로그램이 실행되는 동안 데이터를 유지하거나 동적으로 변경할 때 사용된다.
| 스택 | 힙 | |
|---|---|---|
| 메모리 할당 및 해제 방식 | 자동 | 직접 |
| 데이터 저장 구조 | LIFO(Last in First Out) | 유연 |
| 속도 | 빠름 | 느림 |
| 용도와 예시 | 임시적인 함수 호출 데이터 | 생명 주기가 더 긴 데이터 |
| 예시 | 함수의 로컬 변수, 매개변수 | 배열, 객체, 전역 상태 데이터 |
- 고수준 언어(자바스크립트, 자바, 파이썬, 루비 등)에서는 가비지 컬렉터가 대신 해주므로 힙을 사용하더라도 개발자가 직접 해제할 필요는 없다.
가비지 컬렉터(Garbage Collector) : 프로그램이 더 이상 필요하지 않은 메모리를 식별하고 회수하여 재사용 가능하게 만드는 프로그램 구성 요소 또는 알고리즘. 자동으로 동작하여 메모리 누수를 방지하고 메모리 사용을 최적화한다.
메모리 관리
가비지 컬렉션이 있지만, 프론트엔드 개발을 하면서 메모리 관리를 하는 경우는 뭐가 있을까?
-
이벤트 리스너
사용하지 않는 이벤트 리스너는 페이지에서 제거한다.
예시 )
mousemove이벤트, 마우스의 움직임을 추적하는 이벤트는 종료 시점 코드를 직접 작성 해줘야 한다. 종료하지 않으면 다른 행동을 할 때도 계속 추적하므로 메모리 낭비가 발생한다. -
타이머 (
setTimeout및setInterval)타이머 함수는 지연 실행 및 반복 실행한다.
타이머를 적절히 해제하지 않으면, 불필요한 콜백 함수가 메모리에 남아 프로그램의 성능을 저하시킬 수 있다.
예시)
setInterval을 사용하여 데이터를 주기적으로 업데이트하는 경우, 페이지나 컴포넌트가 언로드될 때clearInterval을 호출하여 타이머를 정지시켜야 한다. -
큰 사이즈의 데이터
큰 배열이나 객체, 특히 외부 API로부터 받은 대량의 데이터를 장시간 메모리에 보관하는 것은 메모리 사용량을 크게 증가 시킬 수 있다.
예시) 대용량 데이터를 처리하는 경우, 필요하지 않게 된 데이터는 적절히 분할하거나, 사용이 끝난 후에는 참조를 해제하여 메모리에서 빠르게 제거될 수 있도록 해야 한다. 또한, 데이터를 페이지네이션하거나, 뷰에 필요한 부분만 추출하여 사용하는 등의 방법으로 메모리 사용을 최적화 할 수 있다.
