44.[기술면접준비]

JavaScript

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

브라우저 렌더링

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

사용자가 웹사이트에 접속했다면, 브라우저는 서버로부터 HTML, CSS, JavaScript 를 다운받습니다.
렌더링 엔진은 html, css 문서를 파싱해 각각 DOM tree, CSSOM 트리를 만듭니다. 그리고나서 이 둘을 결합해 Render 트리를 생성합니다.(실제화면에 표현되는 노드들로만 구성된다)
레이아웃과정을 통해 각 요소를 브라우저화면의 어느 위치에 어떤 크기로 배치할지 계산합니다. 그후 브라우저는 해당 정보를 가지고 페인팅 작업을 통해 실제 화면에 픽셀을 채워 그림을 그립니다.

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

사용자가 브라우저 화면을 늘리는 등 HTMl 요소의 크기나 위치가 달라지는 웹 인터렉션이 발생한경우, 레이아웃 과정을 다시 수행하는 것을 리플로우, 페인트 작업을 반복해 수행하는 것을 리페인트 라고합니다.
이같은 리플로우와 리페인트 연산을 줄여 웹 성능을 최적화할 수 있다고 알고있습니다.

1. 리플로우 시 리페인트는 필연적으로 일어나므로 리페인트만 발생하는 속성을 사용해주기
   예를들어 visibility invisible 속성보다 display:none을 사용하기
2. 영향을 주는 노드를 줄이는 방법
   자스+css를 조합한 애니메이션이 많거나 레이아웃변화가 많은 요소의 position을 absolute, or fixed 속성을 사용해주면 영향을 받는 주변노드를 줄일 수 잇게 됩니다.

반응형 웹은 무엇이고 장단점에 대해 설명하세요.

자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?

번들링과 웹팩

번들링은 왜 필요한가요?

React

Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?

Class Component와 Function Component의 차이점이 무엇인가요?

React Hook의 사용 규칙에 대해 설명하세요.

운영체제

Node.js는 싱글 스레드인가요?

JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?

Event Loop에 대해 설명할 수 있나요?

가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?

자료구조

Stack과 Queue의 차이점은 무엇인가요?

Tree와 Graph의 차이점은 무엇인가요?

이진 탐색 방법에 대해 설명할 수 있나요?