Merge pull request #42 from InSeong-So/main

✏️ 6회차 문서 추가 : 실행 컨텍스트

Author: InSeong-So

Javascript/execution_context.md

@@ -0,0 +1,148 @@
+자바스크립트의 동작 원리를 담은 핵심 개념으로, 이를 바르게 이해하면 앞서 배운 자바스크립트 동작과 앞으로 배울 내용을 명확히 알 수 있습니다.
+
+## 소스코드의 타입
+> ECMAScript가 정의한 4가지 소스코드 타입입니다. 이들 코드는 **실행 컨텍스트를 생성**합니다.
+
+이렇게 구분하는 이유는 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문입니다.
+1. 전역 코드(전역에 존재하는 코드)
+   - 전역 변수를 관리하기 위한 최상위 스코프인 전역 스코프를 생성합니다.
+   - 전역 코드가 평가되면 전역 실행 컨텍스트가 생성됩니다.
+2. 함수 코드(함수 내부에 존재하는 코드)
+   - 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리합니다.
+   - 함수 코드가 평가되면 함수 실행 컨텍스트가 생성됩니다.
+3. ~~eval 코드~~(사용을 권장하지 않습니다)
+   - strict mode에서 자신만의 독자적인 스코프를 생성합니다.
+   - eval 코드가 평가되면 eval 실행 컨텍스트가 생성됩니다.
+4. 모듈 코드
+   - 모듈별로 독립적인 모듈 스코프를 생성합니다.
+   - 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성됩니다.
+
+이렇게 놓고 보면, 저희가 선택할 수 있는 타입은 대부분 두 가지가 됩니다. 바로 전역 코드와 함수 코드죠. 이것으로 실행 컨텍스트에 대해 알아 볼 거에요.
+
+<br>
+
+## 소스코드 평가와 실행
+> 자바스크립트 엔진은 **소스코드 평가**와 **소스코드 실행** 과정으로 나누어 처리합니다.
+
+소스코드 평가 과정은 이렇습니다.
+1. 실행 컨텍스트 생성
+2. 변수, 함수 등의 선언문만 먼저 실행
+3. 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록
+   - 여기서의 스코프는 렉시컬 환경의 환 경 레코드라고 합니다.
+
+소스코드 평가 과정이 종료되면 소스코드가 실행되는, `런타임`이 시작됩니다.
+1. 선언문을 제외한 소스코드가 순차적으로 실행됩니다.
+2. 소스코드 실행에 필요한 정보인 `변수`나 `함수`의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색합니다.
+   - 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록합니다.
+
+<br>
+
+## 실행 컨텍스트의 역할
+> 전역 코드와 함수 코드로 예제를 살펴봅시다.
+
+자바스크립트 엔진은 전역 코드 평가 - 실행, 함수 코드 평가 - 실행을 순차적으로 진행합니다.
+1. 전역 코드 평가
+   - 전역에 존재하는 변수와 함수 선언문을 먼저 실행하여 실행 컨텍스트의 **전역 스코프**에 등록됩니다.
+   - var 키워드로 선언한 변수와 함수 선언문의 경우 전역 객체의 프로퍼티가 됩니다.
+   - let, const 키워드로 선언한 변수는 보이지 않는 개념적 블록에 존재합니다.
+
+2. 전역 코드 실행
+   - 런타임이 시작됩니다. 전역 변수에 값이 할당되고 함수가 호출됩니다.
+   - 함수가 호출되면 전역 코드 실행이 일시 중단되고 함수 내부로 진입하여 코드를 실행합니다.
+
+3. 함수 코드 평가
+   - 함수의 매개변수와 지역 변수 선언문을 먼저 실행하고 실행 컨텍스트의 **지역 스코프**에 등록됩니다.
+   - 함수 내부에서 지역 변수처럼 사용 가능한 **arguments 객체가 생성되어 지역 스코프에 등록**되고 **this 바인딩도 결정**됩니다.
+
+4. 함수 코드 실행
+   - 런타임이므로 매개변수와 지역 변수에 값이 할당됩니다.
+   - 함수 호출 코드가 존재한다면 함수를 호출한 식별자를 스코프 체인을 통해 검색합니다.
+   - 전역 스코프까지 탐색하나 전역 스코프에 해당 함수가 존재하지 않다면 전역 객체의 프로퍼티를 전역 스코프처럼 검색합니다.
+   - 호출한 함수 메서드를 식별자 객체의 프로토타입 체인을 통해 검색합니다.
+   - 인수가 존재한다면 인수를 전달한 표현식을 평가하고, 각 식별자를 스코프 체인을 통해 검색합니다.
+   - 함수 실행이 종료되면 함수 호출 이전으로 돌아가 전역 코드 실행을 계속합니다.
+
+이처럼 코드가 실행되려면 스코프를 구분해 식별자와 바인딩된 값이 관리되어야 하며, 중첩 관계에 의해 스코프 체인을 형성하고 식별자를 검색할 수 있어야 합니다. 또한 전역 객체의 프로퍼티도 전역 변수처럼 검색할 수 있어야 하죠.
+
+함수 호출이 종료되면 함수 호출 이전으로 돌아가므로 `현재 실행 중인 코드`와 `이전에 실행하던 코드`를 구분하여 관리해야 합니다. 즉 아래와 같은 조건이 생기죠.
+1. 선언에 의해 생성된 `모든 식별자(변수, 함수, 클래스 등)`를 스코프를 구분하여 등록하고 `상태 변화(식별자에 바인딩 된 값의 변화)를 지속적으로 관리`할 수 있어야 합니다.
+2. 스코프는 중첩 관계에 의해 `스코프 체인을 형성`해야 하며, 스코프 체인을 통해 상위 스코프로 이동하며 식별자를 검색할 수 있어야 합니다.
+3. 현재 실행 중인 코드의 실행 순서를 `변경(함수 호출에 의한 실행 순서 변경 등)`할 수 있어야 하며, `되돌아` 갈 수도 있어야 합니다.
+
+이 모든 것을 관리하는 게 실행 컨텍스트로 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역입니다. 즉, **식별자(변수, 함수, 클래스 등)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘이며, 모든 코드는 실행 컨텍스트를 통해 실행됩니다**. 식별자와 스코프는 실행 컨텍스트의 **렉시컬 환경(Lexical Enviroment)** 으로 관리하고, 코드 실행 순서는 **실행 컨텍스트 스택**으로 관리합니다.
+
+아래 코드로 실행 컨택스트 스택에 대해 자세히 알아봅시다.
+
+<br>
+
+## 실행 컨텍스트 스택
+> 자바스크립트 엔진은 실행 컨텍스트를 **스택(Stack) 자료구조**로 관리하며, 이를 실행 컨텍스트 스택이라고 합니다.
+
+코드와 함께 시작합니다.
+
+```js
+// 1. 전역 코드 : 전역 변수 선언
+const x = 1;
+const y = 2;
+
+// 전역 코드 : 함수 정의
+function out(){
+  // 2. 함수 코드 : 지역 변수 선언
+  const x = 10;
+  
+  function in(){
+    const y = 20;
+    console.log(x + y);
+  }
+  in();
+}
+
+out();
+```
+
+위 코드를 실행하면 순차적으로 실행 컨텍스트 스택가 추가(push)되거나 제거(pop)됩니다. 도식화하면 아래와 같아요.
+
+<br>
+
+<div align='center'>
+
+<img src='./img/execution_context/execution_context_stack.jpg' width='600'/>
+
+<br>
+
+  <div align="left">
+    <ul style="list-style:none;">
+      <li>
+        1. 전역 변수 x와 y, 함수 out은 전역 실행 컨텍스트에 등록(push)되고, 런타임이 시작되면 전역 변수에 값이 할당되고 out이 호출됩니다.
+      </li>
+      <br>
+      <li>
+        2. 함수 out이 호출되어 코드 제어권(Control)이 out 함수 내부로 이동한 뒤 out 함수 내부의 함수 코드를 평가하여 out 함수 실행 컨텍스트를 생성하고 스택에 추가(push)합니다. 이 때 지역 변수 x와 내부 함수 in이 out 함수 실행 컨텍스트에 등록되고, 런타임이므로 지역 변수에 값이 할당되고 내부 함수 in이 호출됩니다.
+      </li>
+      <br>
+      <li>
+        3. 함수 in이 호출되어 코드 제어권이 in 함수 내부로 이동한 뒤, in 함수 내부의 함수 코드를 평가하여 in 함수 실행 컨텍스트를 생성하고 스택에 추가(push)합니다. 이 때 지역 변수 y가 in 함수 실행 컨텍스트에 등록되고, 런타임이므로 y에 값을 할당한 뒤 console.log 메서드를 호출하고 종료됩니다.
+      </li>
+      <br>
+      <li>
+        1. in 함수가 종료되었으므로 코드 제어권이 다시 out 함수로 이동합니다. in 함수가 종료되었으므로 스택에서 제거(pop)됩니다. 그리고 in 함수는 더 이상 실행할 코드가 없으므로 종료됩니다.
+      </li>
+      <br>
+      <li>
+        1. foo 함수가 종료되었으므로 코드 제어권은 다시 전역 코드로 이동합니다. out 함수가 종료되었으므로 스택에서 제거(pop)됩니다. 그리고 전역 코드는 더 이상 실행할 코드가 없으므로 종료되며 실행 컨텍스트에서 제거(pop)됩니다.
+      </li>
+    </ul>
+  </div>
+
+</div>
+
+<br>
+
+이처럼 실행 컨텍스트 스택은 코드의 실행 순서를 관리하죠. 소스코드가 평가되면 실행 컨텍스트가 생성되고 실행 컨텍스트 스택의 최상위에 쌓입니다. 즉, **실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트**입니다. 이를 실행 중인 `실행 컨텍스트(Running Execution Context)`라고 합니다.
+
+<br>
+
+## 렉시컬 환경(Lexical Enviroment)
+> 식별자와 식별자에 바인딩 된 값, 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트입니다.
+
+`실행 컨텍스트 스택`이 **코드의 실행 순서를 관리**한다면 `렉시컬 환경`은 **스코프와 식별자를 관리**합니다.

README.md

@@ -2,18 +2,13 @@
 > 자바스크립트를 A to Z 해석하고 배워서 뿌셔봅시다!:mag_right: 덤으로 CS지식도 넓혀볼까요? :wink:
 
 ⛔️ 이 스터디는 발표 중심형입니다.
-1. 회차별로 쪽지시험을 칩니다. [리더](https://github.com/InSeong-So)가 준비하고, Google Form을 이용하여 성장 곡선을 관리합니다.
+1. 회차별로 쪽지시험을 칩니다. [리더 InSeong-So](https://github.com/InSeong-So)가 준비하고, Google Form을 이용하여 성장 곡선을 관리합니다.
 2. 공부한 회차에 대해서 한 명도 예외 없이 Blog나 Github, Notion 등에 정리하고 매주 팀원 리뷰와 피드백을 통해 성장합니다. 모든 과정이 당신의 노력의 증거가 됩니다!
 3. 오프라인에서의 발표와 청취를 통해 유연한 사고와 리더쉽을 겸비할 수 있습니다. 이해가 안 되는 부분, 잘못 설명하거나 정리된 부분을 서로 의논하여 한 단계 성장할 수 있습니다!
-<!-- 
-<br>
-<hr>
-
-:blue_book:TOC가 들어갈 자리입니다. -->
-
-<!-- START doctoc -->
-<!-- ref: https://github.com/technote-space/toc-generator -->
-<!-- END doctoc -->
+4. 발표가 안정화되고, 이론이 끝날 때쯤 진행 방식을 다시 변경합니다.
+   - 요구하는 과제, 기능, I/O에 대해 각자가 구현하는 시간을 갖습니다.
+   - 구현하지 못해도 이후부터는 리더가 강의식으로 진행합니다.
+   - 회차별 스터디가 종료되면 책의 이론을 정리하는 대신 코드 리뷰와 피드백으로 각자의 성장을 꾀합니다.
 
 <br>
 <hr>
@@ -26,6 +21,8 @@
 
 ✅ 토요일은 오프라인 3시간(발표자 2명), 수요일은 온라인 2시간(정리 내용에 대한 리뷰 및 피드백)으로 진행합니다.
 
+✅ 이론 부분을 제외한 코드 구현부는 [여기](https://github.com/FECrash/JavascriptCrash-Making)로 분리하여 진행합니다.
+
 <br>
 <hr>
 
@@ -108,6 +105,30 @@
         <a href="https://github.com/FECrash/JavascriptCrash/blob/main/Javascript/built_in_object.md">빌트인 객체</a>
       </td>
     </tr>
+    <tr height="140px">
+      <td align="center" width="33%">
+        💯
+        <br>
+        <a href="https://github.com/FECrash/JavascriptCrash/blob/main/Javascript/this.md">this</a>
+      </td>
+      <td align="center" width="33%">
+        💯
+        <br>
+        <a href="https://github.com/FECrash/JavascriptCrash/blob/main/Javascript/execution_context.md">실행 컨텍스트</a>
+      </td>
+      <td align="center" width="33%">
+        💯
+        <br>
+        <a href="https://github.com/FECrash/JavascriptCrash/blob/main/Javascript/closure.md">클로저</a>
+      </td>
+    </tr>
+    <tr height="140px">
+      <td colspan="3" align="center" width="33%">
+        💯
+        <br>
+        <a href="https://github.com/FECrash/JavascriptCrash/blob/main/Javascript/class.md">클래스</a>
+      </td>
+    </tr>
 </table>
 
 <br>
@@ -117,11 +138,12 @@
 <br>
 
 ### 🥰 자바스크립트 회차별 쪽지시험
-> [쪽지시험지의 저작권은 저에게 있습니다.](https://github.com/InSeong-So)
+> 📌쪽지시험지의 저작권은 [InSeong-So](https://github.com/InSeong-So)에게 있습니다.
 
 - 1회차 쪽지시험 [Link](https://docs.google.com/forms/d/e/1FAIpQLSejv3Q8BstGkDJm-yf6Eivc7TYlbknKTNK1NbkiMC99ALAJKg/viewform)
 - 2, 3회차 쪽지시험 [Link](https://docs.google.com/forms/d/e/1FAIpQLSdx2hjQxBAJYoDTfKzwDTnlfDosy88jhZ0wBKPbv8Eb20Hl_w/viewform)
 - 4회차 쪽지시험 [Link](https://docs.google.com/forms/d/e/1FAIpQLSfViuVWGHsSMS24Uj3pu4PXxxem-Dh9WGAg-cGPV1IzKqzx7A/viewform)
+- 5회차 쪽지시험 [Link](https://docs.google.com/forms/d/e/1FAIpQLSfAQ-vMwqN_Cyi3oZkKSdA4wpAWIhjG1cnfNCDpvFO_CM_W8A/viewform)
 
 <br>
 <hr>
@@ -166,6 +188,10 @@
   - 저장소 Intro 수정
 - 🔧 `2021-09-19`
   - 저장소 과제 안내 초안 게시
+- 🔧 `2021-09-28`
+  - 저장소 접근성을 위한 README 개선
+- 🔧 `2021-10-03`
+  - 이론 종료 후 진행 방식에 대한 초안 작성
 
 <br>
 <hr>