FE 기술면접 질문1

블로그를 벨로그로 바꾸기로 했다! 이전에 쓰던 글도 하나씩 옮겨와야겠다

Q. 브라우저의 렌더링 과정

A. HTML 파싱-DOM 트리 빌드-CSSOM 트리 빌드-렌더링 트리 형성-노드의 기하학적 형태 계산-개별 노드를 화면에 페인트-합성&렌더-레이아웃&리페인트

1. HTML 파싱: HTML을 해석해서 script,link, img 태그에 있는 리소스를 다운로드 및 DOM 생성
2. DOM 트리 빌드: 각 DOM 객체를 트리 구조로 만들어 부모-자식 관계를 정의함
3. CSSOM 트리 빌드: CSS 마크업 처리 및 트리 빌드
4. 렌더링 트리 형성: DOM과 CSSOM을 결합하여 렌터링 트리 형성
5. 노드의 기하학적 형태 계산: 렌더링 트리에서 레이아웃을 실행해서 노드의 정확한 위치와 크기 계산(루트부터 순회하면서 각 노드의 위치와 크기의 상대값을 픽셀값으로 계산해서 렌더트리에 반영)
6. 개별 노드를 화면에 페인트: 렌더트리의 각 노드를 화면상의 실제 픽셀로 변환하고 개별 레이어로 관리, 여기서 CSS 속성이 적용됨
7. 합성&렌더: 레이어를 합성하여 스크린을 업데이트

Q. 호이스팅

A.

"인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것" —— by mdn.

• JavaScript가 컴파일 과정에서 모든 스코프를 탐색하며 변수에 대한 선언과 초기화를 분리하여 선언에 대한 메모리부터 할당하는 것 (선언만 코드의 최상단으로 옮기는 것과 비슷한 효과)
  -> 변수 선언 전에 사용이 가능하긴 하지만 초기화 전에 사용하면 값을 읽을 수는 없다

• var는 undefined로 초기화, let/const는 초기화하지 않음
  => let/const에서 호이스팅된 부분과 실제 선언부 사이에서 변수가 존재는 하지만 초기화되지 않은 부분을 TDZ(Temporal Dead Zone) 라고 함(변수 사용하면 ReferenceError 발생)

• var과 함수는 선언 전 사용 가능, let/const/class는 불가능

※선언(식별자 수집), 초기화(메모리 할당 및 undefined 부여), 할당(값 넘겨주기)은 모두 다른 것

Q. 클로저의 원리와 사용 이유

일단 클로저는 JS의 고유한 개념은 아니다
A. 함수와 그 함수가 선언된 lexcial 환경의 조합
-> 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 끝난 뒤에도 변수 a가 사라지지 않는 현상

• 가비지 컬렉터가 동작할 때 어떤 값을 참조하는 변수가 하나라도 있으면 그 값은 수집 대상에 코함되지 않기 때문에 이미 사라진 함수의 변수를 참조할 수 있는 것
• 스코프를 이용해서 변수의 접근 범위를 닫는 것이 핵심(외부->내부함수 접근은 불가능, 내부->외부함수 접근은 가능)
• 데이터 보존, 정보의 캡슐화, 함수의 모듈화가 가능해지는 것이 장점