Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.

• 호이스팅은 함수 안에 있는 선언들을 모두 끌어 올려 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.
• Temporal Dead Zone(TDZ)는 선언 전에 변수를 사용하는 것을 허용하지 않는 개념상의 공간입니다.
• var, function, import의 선언은 TDZ의 영향을 받지 않습니다. 특히 var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않습니다.
• const, let, class는 Temporal Dead Zone에 영향을 받습니다. 즉 const, let, class는 선언 전에 변수를 사용하는것을 허용하지 않습니다. 그렇기 때문에 호이스팅은 되지만 참조할 메모리가 없어 Reference Error가 발생합니다.
• 따라서 예기치 못한 에러를 피하기 위해서는 var를 지양하고 let 또는 const를 사용하는 것이 좋습니다.

브라우저 렌더링 방식에 대해 설명하세요.

• 먼저 브라우저라는 것은 인터넷에 접속할 때 사용하는 크롬, 사파리, 파이어폭스 등을 말합니다.
• HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
• 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
• Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout)
• 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint)
• 레이어를 합성하여 실제 화면에 나타낸다. (Composite)

리플로우와 리페인트에 대해 설명하세요.

• 리플로우
  생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모드 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정으로 DOM 요소의 기하학적 속성이 변경될 때, 브라우저 사이즈가 변할 때, 스타일시트가 로딩되었을 때 발생하는 변화들을 다시 계산해주는 과정을 뜻하며, 레이아웃이라고도 한다.

• 리페인트
  리플로우 과정이 끝난 후 생성된 렌더 트리를 다시 그리는 과정으로 변경된 요소를 실제로 화면에 그려주는 작업을 뜻한다. 또한 리플로우가 발생하면 필연적으로 리페인트가 실행되며 리플로우보다는 상대적으로 훨씬 가벼운 작업이다.

자바스크립트 엔진의 콜 스택(Call Stack, 호출 스택)이 무엇인지 설명할 수 있나요?

• 콜 스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조입니다. 동작 방식은 다음과 같습니다. 함수를 실행하면 해당 함수의 기록을 스택 맨 위에 추가(Push) 합니다. 우리가 함수를 결과 값을 반환하면 스택에 쌓여있던 함수는 제거(Pop) 됩니다.
• 자바스크립트의 특징으로 우선 자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 콜 스택이 있습니다. 단일 콜 스택은 한 번에 하나의 일(Task)만 처리할 수 있습니다.