FE 지식_5. Callstack과 Event Loop

제목은 Call stack 과 Event Loop 지만, 다른 친구도 소개하려한다.

메모리 구조

기본적인 컴퓨터의 메모리 구조를, 먼저 살펴보려고 한다.

🎈 필자 최애 과목 컴퓨터 구조 시간에 배운 내용이다. (박도순 교수님 사랑해요)

화질이 좀 안좋지만, 무시하자.

• 데이터 영역

  • 프로그램의 전역 변수(global)와 정적 변수(static)가 저장되는 영역

  • 초기화 된 데이터는 data 영역에 저장됨.

• BSS 영역

  • 초기화 되지 않은 데이터는 BSS (Block Stated Symbol) 영역에 저장된다

• 힙 영역

  • 프로그래머가 직접 관리할 수 있는 메모리 영역으로 이 공간에 메모리를 할당하는 것을 동적 할당이라고 함.
  • malloc, new int 가 있겠다.

• 스택 영역

  • 함수의 호출과 함께 할당되며 지역 변수와 매개 변수가 저장되는 영역

  • 지역(local) 변수, 매개변수(parameter), 리턴 값 등 잠시 사용되었다가 사라지는 데이터를 저장하는 영역

  • 함수를 타고타고 들어가면 스택 영역에 쌓인다.

• 코드 영역

  • 코드 자체를 구성하는 메모리 영역으로 Hex파일이나 BIN파일을 저장함.

---

아주 컴팩트하게 컴퓨터 메모리 구조를 설명하자면 이렇게 되겠다.

얘를 왜 설명하느냐, 바로 게시물 제목 callStack 과 유사하기 때문이다!

callStack - 콜 스택

JavaScript 엔진에는 코드가 실행될 때 그 위치를 나타내는 커서(cursor) 역할을 하는 콜 스택이라는 곳이 있다.

요청이 들어올 때마다 해당 요청을 순차적으로 콜 스택에 담아 처리한다.

즉, 메모리 구조에서 스택영역과 매우 흡사하다.

아래 코드로 한방에 이해가 될 것이다.

출처: 강재석님 블로그

간략하게 단계를 쓰자면,

1. 전체 코드 (main 코드) 블록이 콜 스택에 쌓임.

2. helloJsConf() 함수 실행, 동시에 콜 스택에 쌓임.

3. helloJsConf() 내부의 hello 함수가 호출되어 콜 스택에 쌓임.

4. hello 함수 내부 내용 실행. (console.log('hello') 실행과 동시에 콜 스택에 쌓임.)

   a) 그와 동시에 해당 내용 콜 스택에서 제거.

5. hello 함수가 마쳤으므로, 콜 스택에서 제거, helloJsConf 내부의 hello 함수 다음 줄 수행. (console.log('JSConfKorea') 실행과 동시에 콜 스택에 쌓임.)

   a) 그와 동시에 해당 내용 콜 스택에서 제거.

6. helloJsConf 함수 마쳤으므로, 콜 스택에서 제거.

7. main 코드 콜 스택에서 제거.

---

callStack 은 위와 같은 형식으로 작동됩니다.

그렇다면 자연스레 비동기적 작업은 어떤 방법으로 진행이 되는지, 의문이 생깁니다.

결론)

웹 API와 Event Loop를 통해 비동기적 프로세스를 처리합니다.

---

Event Loop

전체적인 그림은 위와 같다.

비동기적인 작업들은 아래 특징을 갖고 수행된다.

• Call Stack 에 호출되는 함수들이 차곡차곡 쌓인다.

• AJAX 나 setTimeout 혹은 DOM event 함수를 실행하면 Web API 로 해당 함수를 보낸다.

  • 정해진 시간이나, 이벤트가 발생한 순간에 위 그림의 callback Queue 에 push 한다.

• callback Queue 내 함수들은 callStack 내부에 아무것도 없을 때만 pop 해서 쓰인다.

---

예제

1. main 함수가 수행되어 stack 에 쌓인다.

2. console.log(1) 이 수행되며 콘솔에 찍히고, cb 함수가 스택에 쌓인다.

   a) 하지만 cb 함수는 수행되지 않고 web APIs 로 넘어간다.

   b) 이 친구는 5초 후에 cb 함수를 task queue 에 넣는다.

3. console.log(3) 를 수행한다.

4. 5초가 지나고, cb 함수를 task queue 에 넣는다.

5. 이벤트 루프는 call stack 이 비어있으니, cb 를 call stack 으로 옮기고, 이를 수행한다.

Event Loop 역할

즉, 이 친구는,

🎉 '현재 실행중인 함수가 없는지'와 'call Stack에 뭔가 있는지'를 반복적으로 확인합니다!

NHN 자료에도 아주 잘 나와있네요! 참고 부탁드립니다.

---

이렇게 싱글 스레드인 Javascript 가 비동기적 처리를 하는지 알아봤습니다!

잘못된 내용이 있다면 댓글로 알려주세요 :)