[TIL]20220613

CS 스터디

자바스크립트는 어떻게 작동할까?

작동 방식

1. 브라우저가 웹페이지에서 자바스크립트를 발견하면 프로그램의 텍스트를 자바스크립트 컴파일러로 전달한다.
2. 컴파일러는 프로그램에 에러가 있는지 검사하고, 프로그램을 모형 컴퓨터처럼 만들어 낸 컴퓨터의 어셈블리 언어 명령어로 컴파일한다.
3. 모형 컴퓨터 같은 시뮬레이터를 실행하여 자바스크립트 프로그램이 수행하기로 되어 있는 모든 기능을 수행한다.

자바스크립트 동작 구조

• 자바스크립트의 대표적인 엔진은 Google에서 만든 V8 엔진이다.
• 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다. Memory Heap은 메모리 할당이 발생하고, Call Stack (호출 스택)은 코드 스택에 따라 하나씩 쌓이는 곳이다.

• 자바스크립트에서는 수 많은 API를 사용하고 있다. 하지만 이런 API들은 자바스크립트 엔진에서 제공해주는 요소가 아니라 웹 브라우저나 Node.js같은 자바스크립트 런타임에서 지원해주는 API 이다. 그래서 어떤 브라우저는 지원을 해줄 수도 있고, 안 해 줄 수도 있다.
• 여기서 setTimeOut()과 같은 비동기 코드 작성이 가능함에도 자바스크립트 자체에는 비동기 코드를 처리하기 위한 개념을 갖고 있지 않다.
• Event Loop & Callback Queue를 통해 비동기 코드를 처리 할 수 있게 한다.

[ Call Stack (호출 스택) ]

• 콜 스택은 기본적으로 자바스크립트를 한 줄씩 읽어가며 우리의 코드가 순서대로 돌 수 있도록 보장해주는 데이터 구조이다. 스택을 사용하기 때문에 후입선출 (LIFO)의 구조를 갖는다.
• 만약 스택이 초과하게 된다면 에러가 발생하게 되고 이것을 Stack Overflow 라고 한다.
  
  

• 이처럼 자바스크립트는 하나의 Call Stack을 가지고 코드를 순차적으로 처리하기 때문에 한 번에 하나의 명령어만 실행될 수밖에 없다.
• 그래서 자바스크립트는 단일 스레드이며 동기식 언어라고 할 수 있다.
• 하지만 하나의 Call Stack 에서 전부 처리하려고 하면, 어떤 작업의 경우에는 처리하는데 오래 걸릴 수 있기 때문에 제대로 동작하지 않게 될 수 있다.

[ Event Loop & Callback Queue ]

• 제일 먼저 foo()라는 함수가 Call Stack에 쌓이게 된다.
• foo() 함수 안에 있는 console.log()가 Call Stack에 쌓이게 된다.

• 콘솔 창에 1을 출력한다.

• foo() 함수는 종료되었으니 Call Stack에서 빠지게 되고, setTimeOut()이 Call Stack으로 들어온다.
• setTimeOut()을 보니까 비동기 함수. 그렇다면 이걸 Web API에서 처리하도록 보낸다. 만약 node js 같은 경우에는 백그라운드에서 처리하도록 보낸다. 그리고 그다음 함수인 foo2() 함수를 불러온다.

• foo2() 함수 안에 있는 console.log()가 Call Stack에 쌓이게 된다.
• 콘솔 창에 2를 출력한다.

• foo2() 함수는 종료되었으니 Call Stack에서 빠지게 된다. setTimeOut()의 시간을 2초로 설정해 두었으니 2초간은 Wab API에서 처리하게 된다. 2초가 지난 후에는 setTimeOut()의 콜백 함수를 Callback Queue로 보내게 된다.

• 이 때 Call Stack에서는 foo2() 함수를 처리하고 있었고, Web API에서는 setTimeOut()을 2초 동안 돌리고 있었던 것을 의미한다.
• Event Loop는 Callback Queue에 있는 콜백 함수를 Call Stack으로 보내서 처리하기 위해 Call Stack이 비어있는지를 검사합니다. 만약 Call Stack이 비어 있다면 Callback Queue에 있던 함수를 Call Stack으로 보내서 처리하게 됩니다.

• Call Stack에 있던 console.log()를 콘솔에 출력하는 것으로 프로그램이 종료됩니다.

 💡 자바스크립트는 기본적으로는 단일 스레드에 동기식 언어이지만, 웹 브라우저나 런타임들의 도움을 받아서 비동기 작업들을 처리할 수 있게 되었고, 마치 멀티 스레드인 것처럼 동작할 수 있는 언어이다.

 

파이썬의 어떻게 작동할까?

1. Cpython은 인터프리터이면서 컴파일러이다.
2. 파이썬 컴파일러는 명령어를 바이트 코드로 번역하고 이를 하드 디스크의 pyc 파일에 저장한다.
3. 파이썬 인터프리터는 .pyc를 번역하여 인터프리터 방식으로 기계어로 번역한다.작동 방식

 

---