1. 브라우저 렌더링 원리에 대해서 설명해보세요

키워드

• HTML 문서 파싱 -> DOM 트리 생성
• CSS 문서 파싱 -> CSSOM 트리 생성
• DOM 트리 + CSSOM 트리 => 렌더 트리 생성
• 레이아웃 및 페인팅 과정(크기, 배경, 테두리, 이미지)

답안

• 브라우저 렌더링 원리는 HTML, CSS, 렌더, 레이아웃 및 페인팅 순서로 진행됩니다.
• 먼저, HTML 문서를 파싱해서 DOM 트리를 생성합니다.
• 그리고 CSS 문서를 파싱해서 CSSOM 트리를 생성합니다.
• 그 다음 생성된 DOM 트리와 CSSOM 트리를 결합해서 렌더 트리를 생성합니다.
• 그 다음 레이아웃과 페인팅 과정을 거칩니다.

2. 가장 최근에 해결한 기술적인 문제

키워드

• 성능 개선 -> 화면 끊김 문제를 해결
• useCallback
• lighthouse, 65점 -> 95점

답안

• 최근에 진행한 비피라는 프로젝트에서 성능 개선을 통해 기술적 문제를 해결 했습니다.
• 네트워크의 상태에 따라서 키오스크 화면의 렌더링이 끊기는 경우가 있었습니다.
• 그래서 useCallback을 통해서 렌더링 측면에서 성과를 올린 적이 있습니다.
• 해당 리팩토링으로 실제로 lighthouse에서 65점에서 95점으로 30점 올렸었습니다.

3. 해당 프로젝트에서 자신의 역할은 무엇이었나요?

키워드

• 우산 공유 플랫폼, 비피
• 와이어프레임, 피그마 디자인 같은 명세서를 작업
• 개발 단계 : 키오스크 화면 전체 개발
• 리팩토링 작업 완료

답안

• 우산 낭비를 줄이는 목적으로 만든 우산 공유 플랫폼, 비피에서는 3가지 순서로 역할을 수행했습니다.
• 초기 기획 단계에서는 와이어 프레임, 피그마 디자인 같은 명세서 작업을 했습니다
• 개발 단계에서는 키오스크 화면을 전체를 담당하였습니다.
• 그리고 종료 후에는 성능 개선을 위해서 리팩토링 작업을 했습니다.

4. 호이스팅에 대해 설명해보세요.

키워드

• 변수, 함수 선언 -> 스코프 최상단
• var 이나 함수만 가능
• const, let은 불가능

답안

• 호이스팅은 변수나 함수를 선언했을 때, 스코프가 최상단으로 올라가는 것을 말합니다.
• var이나 함수는 가능하고
• const, let은 불가능 합니다.

5. 변수 선언의 3단계인 선언, 초기화, 할당에 대해서 설명해보세요

키워드

• 선언, 초기화, 할당 순으로 진행
• var, let은 재할당 가능, const는 재할당 불가능

답안

• 일단 먼저 변수는 선언, 초기화, 할당 순으로 진행됩니다.
• 선언에서는 변수의 식별자 정도만 등록하고, 메모리는 확보되지 않습니다.
• 초기화는 메모리 공간이 확보되지만, 값이 없어서 'undefined'로 출력됩니다.
• 할당은 변수에 값이 들어가게 됩니다. 그래서 할당된 값을 출력할 수 있습니다.
• 이외에 재할당이 있는데, var, let은 가능하고, const는 불가능 합니다.

6. DOM과 Virtual DOM의 차이점을 설명하시오.

키워드

• DOM은 실제 HTML 문서를 표현하는 객체 모델
• Virtual DOM은 가상의 DOM 트리를 표현하는 모델
• Virtual DOM과 DOM을 비교해서 차이점에 대한 부분만 DOM 트리에 반영해서 업데이트

답안

• 먼저 DOM 트리의 경우에는 실제 HTML을 파싱하면서 생성된 트리를 말합니다.
• 이에 반해 Virtual DOM은 DOM 트리 기반의 가상 DOM 트리입니다.
• 그래서 작업 시에 Virtual DOM 트리를 업데이트하고, 기존의 DOM 트리와 차이점을 계산합니다
• 그리고 차이만큼 DOM 트리를 수정하여 효율을 높입니다.