[TIL] 210924 오늘 공부는 스터디( 메모리 구조 - 스택,힙 / 자바스크립트의 비동기 처리 과정)

입사 동료분과 스터디를 했다. 이벤트 루프를 주제로 공부하다가, 비동기 처리 과정을 좀 더 자세히 공부하면 좋겠다고 생각했다. 뿐만 아니라 useRef로 만들어진 객체가 힙에 저장되어 같은 주소값을 참조하여 렌더링에 영향을 받지 않는다고 했다. 힙이 무엇인지 알려면 먼저 메모리 구조를 공부해야 할 것 같다.

끝나고 웹팩하고 바벨 정복하러 가야한다. 바쁘다 바빠 개린이 😎

---

메모리의 구조

프로그램이 실행되려면 메모리에 먼저 로드 되어야 함. 프로그램에서 사용되는 변수를 저장할 메모리가 필요하다. 운영체제는 프로그램을 위해 메모리 공간을 할당해주고, 운영체제가 제공하는 메모리는 총 4가지 영역이다.

1. 코드(code) : 실행할 프로그램의 코드가 저장되는 영역, CPU는 코드 영역에 저장된 명령어를 하나씩 가져가서 처리한다. 프로그램이 시작하고 끝날때까지 메모리에 계속 남아있다. 텍스트 영역이라고도 한다.  

2. 데이터(data) : 프로그램의 전역 변수, 정적 변수(💥 )가 저장된다. 프로그램의 시작과 함께 할당되고 종료되면 소멸한다. => 전역변수가 프로그램이 종료될 때 까지 존재하는 이유

3. 스택(stack) : 함수의 호출과 관계되는 지역변수(함수 안에서 쓰는 변수), 매개변수(파라미터)가 저장된다. 함수의 호출과 함께 할당되며, 함수의 호출이 완료되면 소멸한다. 스택 영역에 저장되는 함수의 호출 정보를 스택 프레임이라고 한다. 스택 영역에 할당될 메모리의 크기는 컴파일시에 결정된다. 프로그램이 자동으로 사용하는 임시 메모리 영역이다.  💥스택 영역은 메모리의 높은 주소에서 낮은 주소의 방향(LIFO 후입 선출)으로 할당된다. 자바스크립트에서 간단하게 값들만 할당된 변수도 저장이 된다.

4. 힙(heap) : 사용자가 직접 관리할 수 있는, 직접 관리해야하는 영역으로 사용자에 의해 메모리 공간이 동적으로 할당되고 해제된다. 힙에 할당될 메모리 크기는 런타임에 결정된다. = 할당해야할 메모리의 크기를 프로그램이 실행되는 동안 결정해야 할 경우 유용하게 사용되는 영역이다. 💥메모리의 낮은 주소에서 높은 주소의 방향으로 할당된다.
자바스크립트에서 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값을 저장한다. 
자동으로 제거되지 않으며, 메모리 해제를 하지 않으면 메모리 누수(leak)라고 부른다.  Java, C#등은 가비지 컬렉터(GC)가 수거한다. malloc, calloc 등으로 메모리를 직접 할당하여 사용한다.(💥 )

 

스택과 힙의 차이점

스택	힙
- 힙에 비해 빠르다. (이미 할당되어 있는 공간을 사용하기 때문에)  - 할당의 의미: 이미 생성되어있는 스택에 대해 포인터(메모리 주소를 가리키는 변수)의 위치만 바꿔주는 단순 CPU Instruction(연산)  - 메모리 크기: 불변	- 스택에 비해 느리다 (사용자가 따로 할당해서 사용하기 때문에)  - 할당의 의미: 요청된 chunk의 크기, 현재 메모리의 fragmention 상황 등 다양한 요소를 고려해서 더 많은 CPU Instruction이 필요  - 메모리 크기: 동적

 

스택 오버플로우, 힙 오버플로우

 - 스택은 메모리의 끝에서부터, 힙은 메모리의 앞에서부터 주소를 채우는데 서로의 영역을 침범할 경우 오버플로우가 발생한다.

- 스택이 힙을 침범하면 stack overflow, 힙이 스택을 침범하면 Heap overflow

 

---

 

자바스크립트 비동기 처리 과정

 - 자바스크립트 엔진 : V8

 - 엔진은 Call Stack과 Memory Heap으로 구성되어 있음

 - 자바스크립트는 싱글 스레드 언어라 Call Stack이 1개이고, 한번에 하나의 작업만 처리할 수 있음. 자바스크립트 엔진 밖에 있는 Web API, Task Queue, Event Loop 등이 JS가 비동기적으로 여러 작업을 처리할 수 있게 한다. 

 - Web API는 브라우저에서 제공되는 API이며, AJAX나 setTimeout 등의 비동기 작업을 실행

 - 자바스크립트에서 setTimeout 과 같은 함수를 실행하면, 자바스크립트 엔진은 Web API에 setTimeout 을 요청하고 동시에 setTimeout에 넣어준 Callback 까지 전달한다. Call stack 에서는 Web API 요청 이후 setTimeout 작업이 완료되어 제거된다. 그리고 전달 받은 Callback을 Queue에 넘겨준다.

 - Queue에 있는 작업들을 Event Loop를 통해 Call Stack으로 옮겨진다. Event Loop가 지속적으로 Call Stack이 비어있는지 확인을 하고, 비어있다면 작업들을 Queue에서 꺼내와 Call Stack에 넣는 역할을 한다.