기술면접질답
브라우저의 렌더링 원리 - 브라우저의 렌더링 원리에 대해 설명해주세요.
브라우저 렌더링이란 웹 브라우저가 HTML, CSS, JavaScript 등의 웹 자원을 가져와 해석하고 화면에 시각적으로 표현하는 과정을 말합니다.
렌더링 과정은 크게 다음 단계로 이루어집니다.
- HTML 파싱단계에서 HTML을 DOM 트리로 변환합니다.
- CSS 파싱단계에서 CSS를 CSSOM 트리로 변환합니다.
- 렌더 트리 생성단계에서 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
- 레이아웃 단계는 렌더 트리에 기반하여 각 노드의 위치와 크기를 계산합니다.
- 페인팅 단계는 계산된 레이아웃을 실제 화면의 픽셀로 변환하여 렌더링합니다.
Reflow와 Repaint가 실행되는 시점 - Reflow와 Repaint가 실행되는 시점에 대해 말씀해주세요.
Reflow는 요소 추가, 제거, 크기 및 위치 변경과 같이 레이아웃이 변경될 때 발생합니다.
Repaint는 요소의 색상, 배경과 같이 웹 페이지의 스타일이 변경될 때 발생합니다.
Reflow가 발생하면 연쇄적으로 Repaint가 발생하는 반면, Repaint는 Reflow를 발생시키지 않습니다.
따라서 이를 최소화하기 위해서는 스타일 변경 시 레이아웃에 영향을 주지 않는 속성과 같이 Reflow에 영향을 줄여야 합니다.
주소창에 google.com을 입력하면 일어나는 일 - 주소창에 google.com을 입력하면 일어나는 일에 대해 말씀해주세요.
브라우저가 주소창에 입력된 google.com을 전달 받고 DNS 쿼리를 보내 IP 주소를 얻습니다.
브라우저는 Hosts File을 찾아보고 없으면 ISP에 DNS 쿼리를 전달합니다.
DNS Cache를 찾아보고 없으면 Root 서버, TLD Name 서버, Authoritative Name 서버에게 질의한뒤 IP 주소를 응답합니다.
브라우저는 전달 받은 IP 주소로 HTTP 요청을 보냅니다.
서버로부터 HTTP 응답을 받고 브라우저 렌더링 작업을 통해 사용자에게 구글 웹 페이지가 보여집니다.
호이스팅(hoisting)이란? - 호이스팅에 대해서 설명해주세요.
호이스팅은 자바스크립트에서 변수와 함수 선언문이 코드 실행 전 메모리에 할당되어 상단으로 끌어올리는 것처럼 보이는 현상입니다.
var로 선언한 변수와 함수 선언문은 선언 전에 호출해도 호이스팅됩니다.
하지만 const, let, 함수 표현식은 선언 전에 호출하면 참조에러를 발생시키는데 이는 TDZ에 존재하기 때문입니다.
TDZ는 변수의 선언과 초기화 사이에서 변수를 접근할 수 없는 지점을 의미합니다.
클로저(Closure)란? - 클로저에 대해서 설명해주세요.
클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 함수로, 다르게 말하면 함수가 생성될 때의 환경을 기억하는 함수입니다.
내부 함수는 외부 함수의 실행 컨텍스트에 있는 변수에 접근할 수 있고, 이를 통해 데이터 은닉과 메모리 효율성을 높일 수 있습니다.
CSS에서 margin과 padding이란? - CSS에서 margin과 padding에 대해서 설명해주세요.
margin은 요소와 주변 요소 사이의 간격을 조절하는 것으로, 요소 바깥쪽에 위치합니다.
padding은 요소 내부 콘텐츠와 요소 경계 사이의 간격을 조절하는 것으로, 요소 안쪽에 위치합니다.
CSS에서 position이란? - CSS에서 position을 어떻게 사용하는지 설명해주세요.
CSS에서 position 속성은 요소의 위치 지정 방식을 결정합니다.
- static은 기본값으로 일반적인 문서 흐름에 따라 배치됩니다.
- relative는 일반적인 문서 흐름에 따라 배치되지만, top/right/bottom/left 속성으로 위치를 조정할 수 있습니다.
- absolute는 가장 가까운 위치 지정 부모 요소를 기준으로 배치됩니다. top/right/bottom/left 속성으로 위치를 조정할 수 있습니다.
- fixed는 뷰포트 기준으로 위치가 결정됩니다. 스크롤 해도 위치가 고정됩니다.
- sticky는 일반적인 문서 흐름에 따라 배치되지만, 특정 스크롤 위치에서 fixed처럼 고정됩니다.
REST API란? - REST API란 무엇인지 설명해주세요.
REST API는 웹 서비스 아키텍처 스타일로, 여러 시스템 간에 통신하기 위한 규칙과 제약 조건의 집합입니다.
RESTful API는 HTTP 프로토콜의 메서드와 리소스 URI를 활용하여 데이터를 요청하고 응답합니다.
Virtual DOM에 대해 설명해 주세요.
Virtual DOM이란, DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 변경된 부분만 업데이트를 해서 반응성이 빠른 웹을 구현할 수 있게 해주는 추상화된 DOM을 뜻합니다.
결론적으로 DOM을 반복적으로 직접 조작하게 되면 그만큼 브라우저가 렌더링을 자주 하게 되고 PC자원을 많이 소모하게 되는 문제를 해결하기 위한 기술입니다.
React Lifecycle에 대해 설명해 주세요.
Lifecycle은 컴포넌트가 생성, 사용, 소멸될 때까지의 생명주기를 뜻하며, mount, update, unmount로 구분됩니다.
componentDidMount는 컴포넌트가 생성될 때 한 번 호출되며, componentDidUpdate는 컴포넌트의 props 또는 state값이 변경되었을 때, componentWillUnMount는 컴포넌트가 소멸될 때 호출됩니다. 또한 render 메서드는 초기 화면을 그려줄 때와 업데이트 시에 호출됩니다.