2022-03-07 TIL

Fact

• 기초부터 완성까지 프론트엔드 책 6장 읽기
• cypress로 로그인기능을 테스트했다.
• 로그인 버튼을 클릭하면 로그인 페이지로 가야 함
• 로그인을 성공하면 메인으로 와야 함
• 로그인 실패 처리가 되어야 함

Feelings

• 실행 컨텍스트는 간단하게 공부하하면 쉽게 보일순 있는데 깊게 파고든다면 정말 어렵다. 실행컨텍스트 내용을 읽으면서 내용을 정리하려고 했는데, 읽는 것도 힘들어서 도저히 정리해서 포스팅할 엄두가 나지않는다. 책의 설명은 훌륭했지만 내 실력이 부족하다. 관련 서적을 같이 챙겨봐야겠다.

Findings

실행 컨텍스트란 무엇인가?

실행 컨텍스트(Execution Context)는 자바스크립트 코드를 실행할 때 필요한 정보들을 저장하고 제공하는 환경입니다. 즉 스코프의 정보를 담은 환경을 의미합니다. 현재 실행되고 있는 컨텍스트에서 이 컨텍스트와 관련이 없는 코드가 실행된다면 새로운 컨텍스트가 생성되어 제어권을 가져갑니다. 그리고 이렇게 생성된 컨텍스트들은 실행 컨텍스트 스택 안에 쌓이게 됩니다. 각각의 컨텍스트는 실행이 종료된 이후 소멸되며, 소멸된 후 이전의 실행 컨텍스트에 제어권을 넘겨주게 됩니다. 전역 실행 컨텍스트까지 실행이 완료되면 모든 실행이 완료된 것으로 볼 수 있습니다.

console.log('global context')

function foo() {
  console.log('foo context')
}

function bar() {
  foo()
  console.log('bar context')
}
bar()

// 출력 결과
// global context
// foo context
// bar context

1.가장 먼저 전역 코드가 실행되어 전역 실행 컨텍스트가 제어권을 가져갑니다. 그 결과 ‘global context’가 출력됩니다. 2.전역 실행 컨텍스트에서 bar() 함수가 호출되어 새로운 컨텍스트가 생성되어 스택에 쌓입니다. 그리고 이 컨텍스트가 제어권을 가져갑니다. 이 과정이 foo() 함수 호출 시에도 반복됩니다. 3.foo() 함수 안의 코드가 모두 실행되면 foo 실행 컨텍스트가 완료되어 소멸되며, 이후 bar 실행 컨텍스트도 완료되어 소멸됩니다. 최종적으로 전역 실행 컨텍스트까지 실행이 완료되어 모든 실행이 완료됩니다.

실행 컨텍스트의 구성 요소

실행 컨텍스트는 Lexical Environment와 Variable Environment 두 가지 컴포넌트로 구성됩니다. 그리고 이 컴포넌트들은 Environment Records라 불리는 형태로 구성되어있습니다.

ECMAScript 명세에 나와 있는 실행 컨텍스트는 ES5와 ES2015의 실행 컨텍스트와 변경된 점이 있습니다.

• this 바인딩에 대한 정보는 ES5에서는 실행 컨텍스트에 별도로 저장되었지만, ES2015 이후부터는 ER에서 this에 대한 정보를 저장합니다.
• 이전 ES2015 명세에서는 LE 하위의 구성요소로 ER과 상위 LE에 대한 참조 정보를 저장하였습니다. 하지만 현재 명세에서는 ER에서 식별자, this 바인딩, 상위 ER에 대한 참조까지만 저장합니다.
• LE와 VE가 ER자체를 바인딩하는 형태로 변경되었습니다. ECMAScript에서는 ‘실행 컨텍스트의 LE와 Ve는 항상 ER이다’ 라고 표현하고 있습니다.

Envinronment Records와 스코프 체인

ER은 렉시컬 스코프를 기반으로 특정 변수와 함수에 대한 식별자의 연결 정보를 저장합니다. 쉽게 말해 코드가 실행되면 변수나 함수에 대한 식별자를 선언하고, 코드가 한 줄 한 줄 실행될 때마다 선언된 식별자에 값을 할당할 수 있도록 바인딩하는 것입니다. 함수 선언, 블록문 또는 try, catch절과 같은 구문들이 평가될 때 식별자 바인딩을 위해 새로운 ER이 생성됩니다.

모든 ER에는 OuterEnv 필드가 있으며, 이 필드는 상위 렉시컬 스코프에 대한 ER을 참조합니다. 예를 들어 함수 안에 함수가 정의되어 중첩된 스코프를 가지는 경우 상위 함수 스코프에 대한 ER을 참조합니다. 최상위 실행 컨텍스트인 전역 컨텍스트에서는 참조할 상위 스코프가 없기 때문에 OuterEnv 필드는 null이 됩니다.

다양한 Envinronment Records

ER은 추상 클래스로서 이를 세부적으로 구현하는 declarative Environment Record, object Environment Record, global Environment Record 세 가지의 하위 ER이 있습니다. 그리고 declarative Environment Record의 하위에는 function Environment Record와 module Environment Record가 있습니다.

Future Action

• 한 내용을 한번봐서 이해가 되지않는다면 관련된 여러 내용의 책이나 글을 읽자어보자.