Javascript 실행 컨텍스트(Context)란 무엇인가? 콜 스택(Call Stack)은 무엇인가?
당신은 답을 모르는게 분명합니다.
프로그래밍 언어의 가장 기본적인 구성 요소는 무엇입니까?
변수와 함수가 맞습니까? 누구나 기본원칙은 배울 수 있습니다.
하지만 기본을 넘어서는 것은 무엇입니까?
자신을 중급(또는 시니어) 자바스크립트 개발자라고 부르기 전에 숙달해야 할 자바스크립트의 개념은 무엇입니까?
스코프(Scope), 클로저(Closure)(클로저에 관한 블로그 게시물이 있지만 이탈리아어로되어 있습니다), 콜백(Callbacks), 프로토타입(Prototype)등 다양합니다.
이탈이아어 클로져 블로그 : https://www.servermanaged.it/blog/closures-javascript/
그러나 이러한 개념들을 깊이 연구하기 전에 당신은 적어도 자바스크립트 엔진이 어떻게 작동하는지 이해해야 합니다.
이 게시물에서 우리는 모든 자바스크립트 엔진의 두 가지 기본 요소인 실행 컨텍스트와 콜 스택을 살펴볼 것입니다.
(두려워하지 마세요. 생각보다 쉽습니다.)
준비됐습니까?
이 자료는 나의 고급 자바스크립트 수업의 일부로서 원격 1:1 교육이나 유럽에서 현장 교육으로 이용할 수 있습니다.
이 게시물을 통해 당신은 배울것입니다.
- 자바스크립트 엔진의 작동 방식
- 자바스크립트의 실행 컨텍스트
- 콜스택
- 글로벌 실행 컨텍스트와 로컬 실행 컨텍스트의 차이
자바스크립트 코드는 어떻게 실행합니까?
만약 상급 개발자라면 당신은 이미 답을 알고 있을 것입니다.
당신이 초보자라면 우리는 함께 알아 볼 것입니다.
이제 다음 코드를 보세요.
1 var num = 2;
2 function pow(num){
3 return num * num;
4 }다 됐습니까?
어려워 보이지 않습니다.
이제 말해보세요. 브라우저가 코드를 어떤 순서대로 평가할 거라고 생각하십니까?
다시말해, 당신이 브라우저라면, 코드를 어떻게 읽을 것입니까?
쉬운 일처럼 들립니다.
대부분 사람들은 "그래~ 브라우저가 function pow를 실행하고 결과를 반환한 다음 2를 num에 할당한다.”고 생각합니다.
제 학생의 대답을 알고 싶습니까?
위에서 아래로
브라우저는 function pow에서 시작하여 num * num을 계산합니다.
JS 엔진은 코드 라인을 한 줄씩(일종의) 실행합니다.
나는 그것을 예상하고 있었습니다.
나도 몇 년 전에 똑같은 말을 했습니다.
다음 섹션에서는 단순한 코드 라인 뒤에 있는 장치를 발견할 것입니다.
자바스크립트가 어떻게 코드를 실행하는지 이해하기 위해서는 첫번째 무서운 일 : 즉 실행 컨텍스트를 충족시켜야 됩니다.
자바스크립트에서 실행 컨텍스트는 무엇입니까?
브라우저 (혹은 node)에서 자바스크립트를 실행할 때 마다 엔진은 일련의 단계를 거칩니다.
이 단계중 하나는 글로벌 실행 컨텍스트의 생성을 포함합니다.
잠깐 Valentino(글쓴이 이름), 엔진은 무엇입니까?
즉, 자바스크립트 엔진은 자바스크립트 코드를 실행하는 '엔진'입니다.
요즘에는 두개의 유명한 자바스크립트 엔진이 있습니다.
- Google V8
- SpiderMonkey
V8은 Google Chrome 및 Node.js에서 사용되는 Google의 오픈 소스 자바스크립트 엔진입니다.
SpiderMonkey는 Firefox에서 사용되는 Mozilla의 자바스크립트 엔진입니다.
지금까지 우리는 자바스크립트 엔진과 실행 컨텍스트를 가지고 있습니다.
이제 그것들이 어떻게 함께 일하는지 이해할 때가 되었습니다.
엔진은 자바스크립트 코드를 실행할 때마다 전역 실행 컨텍스트를 생성합니다.
실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 설명하기 위한 멋진 단어입니다.
이런 추상적인 것들을 상상하기란 쉽지 않습니다.
현재 전역 실행 컨텍스트를 상자로 생각해 보세요:
코드를 다시 한번 살펴봅시다.
1 var num = 2;
2 function pow(num){
3 return num * num;
4 }엔진은 어떻게 코드를 읽습니까?
다음은 간단한 버전:
엔진 : 라인 1번. 변수가 있다! 좋아. 글로벌 메모리에 저장합니다.
엔진 : 라인 3번. function 선언이 보인다. 좋아. 글로벌 메모리에 저장합니다!
엔진 : 다 끝난 것 같습니다.
다시 묻는다면 : 브라우저가 다음 코드를 "보는"방법은 무엇입니까?
If I were to ask you again: how does the browser “see” the following code, what would you say?
그래, 위에서 맨 아래...
Yeah, it’s kind of top to bottom but …
보다시피 엔진이 function pow를 실행하지 않습니다.
함수 선언이지 함수 호출이 아닙니다.
위의 코드는 전역메모리에 저장된 일부 값을 변환합니다: 함수 선언과 변수
글로벌 메모리?
Valentino, 나는 이미 실행컨텍스트 때문에 혼란스운데 지금 글로벌 메모리를 던지는거야?
네 맞습니다.
글로벌 메모리가 무엇인지 봅시다.
자바스크립트 엔진에도 글로벌 메모리가 있습니다.
글로벌 메모리에는 나중에 사용할 수 있게 전역 변수 및 함수 선언이 포함되어 있습니다.
카일 심슨(Kyle Simpson)이 쓴 "Scope and Closures"을 읽으면 글로벌 메모리가 글로벌 스코프의 개념과 겹친다는 사실을 알게 될 것입니다.
사실 같은 것입니다.
나는 지금 1만피트 높이를 날고있는 좋은 이유가 있습니다.
그것들은 어려운 개념입니다.
하지만 지금은 걱정할 필요가 없습니다.
우리 퍼즐의 중요한 두 조각을 이해해줬으면 좋겠습니다.
자바스크립트 엔진이 코드를 실행하면 다음과 같이 생성 됩니다.
- 전역 실행 컨텍스트(Global Execution context)
- (Global Memory)전역 메모리 (Global Scope 또는 전역변수 환경(Global Variable Environment))
모든 것을 알겠습니까?
이 시점에서 내가 너라면 나는 다음과 같이 하겠습니다.
- 자바스크립트 코드를 적으세요.
- 당신이 엔진인 것처럼 차근차근 코드를 분석하세요.
- 실행 중에 글로벌 실행 컨텍스트와 글로벌 메모리를 모두 그래픽으로 표현하세요.
연습은 종이에 쓰거나 prototyping tool을 사용하여 쓸 수 있습니다.
나의 작은 예는 다음과 같습니다.
다음 섹션에서는 또 다른 무서운 것을 살펴 볼 것입니다 : 콜 스택 (Call Stack)
실행 컨텍스트, 글로벌 메모리 및 자바스크립트 엔진이 어떻게 조화를 이루는지 잘 알고 있습니까?
그렇지 않은 경우에는 이전 섹션을 검토하세요.
우리는 퍼즐에서 다른 조각을 소개할 것입니다 : 콜 스택 (Call Stack)
자바스크립트 엔진이 당신의 코드를 작동시킬 때 어떤 일이 일어나는지 먼저 다시 한번 정리해 봅시다.
다음을 생성합니다.
- 전역 실행 컨텍스트(Global Execution context)
- 전역 메모리(Global Memory)
우리의 예제에서 더이상 아무것도 일어나지 않았습니다:
1 var num = 2;
2 function pow(num){
3 return num * num;
4 }위 코드는 값을 순수하게 할당한 것입니다.
한단계 더 나아가봅시다.
함수호출을 하면 어떻게 됩니까?
1 var num = 2;
2 function pow(num){
3 return num * num;
4 }
5 res = pow(num);재미있는 질문.
자바스크립트에서 함수를 호출하게 되면 엔진이 도움을 요청합니다.
그리고 그 도움은 자바스크립트 엔진의 친구로 부터 옵니다 : 바로 콜 스택 (Call Stack)
명백하게 들리지는 않지만 자바스크립트 엔진은 무슨일이 일어나고 있는지 계속 추적해야 합니다.
그것은 콜 스택(Call Stack)에 의존합니다.
자바스크립트에서 호출 스택이란 무엇입니까?
호출 스택은 현재 실행중인 프로그램의 로그와 같습니다.
실제로는 데이터 구조입니다 : 스택(Stack)
콜 스택 (Call Stack)은 정확히 어떻게 작동합니까?
놀랍지 않게 두가지 방법이 있습니다 : push 그리고 pop
Pushing은 뭔가를 쌓아두는 행위입니다.
즉, 자바스크립트에서 함수를 실행하면 엔진이 해당 기능을 콜 스택(Call Stack)으로 밀어 넣습니다.
모든 함수 호출은 콜 스택(Call Stack)으로 밀어 넣습니다.
가장 먼저 push된 것은 main()(또는 global())이며, 자바스크립트 프로그램의 주요 실행 스레드입니다.
이제 이전 그림은 다음과 같이 보일 것입니다.
poping은 스택에서 무언가를 제거하는 행위입니다.(다른쪽 끝에??)
Popping on the other end is the act of removing something from the stack.
함수가 실행을 끝내면 콜 스택(Call Stack)에서 pop됩니다.
콜 스택(Call Stack)은 다음과 같습니다.
이제부터 자바스크립트 개념을 모두 익힐 준비가 되었습니다.
농담이 아닙니다.
하지만 아직 끝나지 않은 곳으로! 다음 섹션으로 갑니다!
지금까지는 모든 것이 분명해 보입니다.
뭔가 놓치고 있는게 있습니까?
우리는 자바스크립트 엔진이 글로벌 실행 컨텍스트와 글로벌 메모리를 생성한다는 것을 알고 있습니다.
그런 다음 코드에서 함수를 호출하면 다음과 같습니다.
- 자바스크립트 엔진이 도움을 요청합니다.
- 그 도움은 자바스크립트 엔진의 친구로 부터 옵니다 : 콜 스택(Call Stack)
- 콜 스택(Call Stack)은 코드에서 호출되는 함수를 추적합니다.
자바스크립트에서 함수를 실행할 때 또 다른일이 발생해야됩니다.
첫째, 이 함수는 글로벌 실행 컨텍스트에 나타납니다.
그런 다음 함수 옆에 또 다른 미니 컨텍스트가 나타납니다.
그 작은 상자를 '로컬 실행 컨텍스트'라고 불립니다.
뭐라고?? ...
이전 그림에서 글로벌 메모리에 새로운 변수가 나타납니다 : var res
변수 res는 처음에는 undefined 값을 갖습니다.
그런 다음 글로벌 실행 컨텍스트에 pow가 나타나자마자 함수가 실행되고 res에서 반환 값을 취합니다.
실행 단계에서 로컬 실행 컨텍스트가 생성되어 로컯 변수를 유지합니다.
얼마나 강력한 개념인가...
명심하세요.
글로벌 및 로컬 실행 컨테스트를 이해하는 것은 스코프와 클로져를 마스터하는 핵심입니다.
4줄 코드 뒤에 무엇이 있는지 믿을 수 있습니까?
자바스크립트 엔진은 샐행 컨텍스트와 글로벌 메모리 그리고 콜 스택을 생성합니다.
그러나 당신이 함수를 호출하면 엔진은 로컬 메모리를 가진 로컬 실행 컨텍스트를 생성합니다.
이 게시물이 끝날 때까지 일부 자바스크립트 코드를 실행할 때 어떤 일이 일어나는지 이해할 수 있어야 합니다.
종종 간과한(큰 관심없이 대강 보아 넘기는) 자바스크립트 내부는 새로운 개발자들에 의해 항상 미스터리로 여겨집니다.
그러나 그것은 고급 자바스크립트 개념을 숙달하는 열쇠입니다.
실행컨텍스트(Execution Context), 글로벌 메모리(Global Memory), 콜 스택(Call Stack)을 배우면 스코프(Scope), 클로져(Closure), 콜백(Callbacks) 등의 작업을 쉽게 수행 할 수 있습니다.
특히 콜 스택(Call Stack)을 이해하는 것이 가장 중요합니다.
모든 자바스크립트는 당신이 시각화하면 이해하기 시작합니다 : 자바스크립트가 왜 비동기적인지, 왜 콜백이 필요한지 이해하게 될 것입니다.
자바스크립트 코드 4줄 뒤에 뭐가 있는지 압니까?
이제 너는 알 것입니다.
읽고 계속 머물러줘서 감사합니다.
이 자료는 내 고급 자바스크립트 수업의 일부분이며, 원격 1-1 훈련이나 유럽에서 현장 훈련으로 이용할 수 있습니다.
글쓴이 : Valentino Gagliardi