CSS에서 position 속성은 요소의 위치 지정 방식을 결정하는 중요한 속성입니다. 총 5가지 값(static, relative, absolute, fixed, sticky)을 가질 수 있습니다.

static (기본값) 정적 위치 지정으로, 기본 렌더링 흐름에 따라 배치됩니다. top, bottom, left, right 속성이 적용되지 않습니다.

relative 상대 위치 지정으로, 정적 위치에서 top, bottom, left, right 속성에 따라 위치가 이동합니다. 레이아웃에는 영향을 미치지 않습니다.

absolute 절대 위치 지정으로, 가장 가까운 조상(relative, absolute, fixed 중 하나) 요소를 기준으로 위치가 결정됩니다. 일반 렌더링 흐름에서 벗어납니다.

fixed 고정 위치 지정으로, 뷰포트(viewport) 기준으로 위치가 결정됩니다. 스크롤에도 영향을 받지 않습니다.

sticky 스크롤 영역 기반 위치 지정입니다. 평소에는 정상 위치에 있다가, 가로 또는 세로 스크롤 위치가 설정된 위치에 다다르면 고정됩니다.

호이스팅은 자바스크립트 실행 컨텍스트가 만들어질 때 발생하는 현상입니다. 실행 컨텍스트가 생성되면 코드가 실행되기에 앞서 변수 및 함수 선언에 대한 초기화 단계가 먼저 진행됩니다. 이 과정에서 모든 변수 선언문은 단일 스코프에서 해당 스코프의 상단으로 가상적으로 이동되는 것처럼 동작합니다. 이를 호이스팅이라고 부릅니다.

변수의 경우 선언문만 호이스팅되고 할당문은 호이스팅되지 않습니다. 따라서 변수를 선언하고 초기화하기 이전에 해당 변수에 접근하면 undefined를 반환합니다.

함수 선언문의 경우 완전한 함수 정의 전체가 호이스팅됩니다. 하지만 함수 표현식은 함수 이름만 호이스팅되고 할당문 자체는 호이스팅되지 않습니다.

함수 선언문은 호이스팅이 일어나지만, 함수 표현식은 호이스팅이 일어나지 않습니다.

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. 중첩 함수가 있을 때, 내부 함수가 외부 함수의 변수를 참조하는데 외부 함수의 실행이 종료된 이후에도 내부 함수가 외부 함수의 변수를 계속 참조할 수 있는 경우가 클로저입니다. 리액트에서 커스텀 훅을 만들거나 자바스크립트로 계산기, 투두리스트 등을 만들며 상태 관리를 할 때 클로저를 사용한 경험이 있습니다.

브라우저는 개코나 웹킷 엔진으로 구동됩니다. 일반적으로 HTML 파일을 파싱하여 DOM 트리를 생성하고, CSS 파일을 파싱하여 CSSOM 트리를 만듭니다. 이렇게 생성된 두 개의 트리를 합쳐 렌더 트리를 생성한 후, 레이아웃과 페인팅 과정을 거쳐 화면에 렌더링합니다.

리플로우는 이 렌더 트리의 일부 또는 전체 구조를 재계산하고 재배치해야 할 때 일어납니다. 리페인트는 시각적인 요소의 변경이 있을 때 발생하며, 예를 들어 visibility 이나 background-color, opacity , 폰트변경 등이 변경되었을 때입니다. 리플로우가 일어나면 반드시 리페인트가 발생합니다.

리플로우의 비용이 리페인트보다 비쌉니다. 왜냐하면 리플로우는 렌더 트리의 일부 또는 전체 구조를 재계산해야 하기 때문입니다

display: none 속성을 사용하여 레이아웃 단계를 다시 실행하지 않는 방법으로 최적화할 수 있을 것 같습니다.

CSS에서 margin은 박스 모델의 border 바깥쪽에 있는 여백을 말하고, padding은 border 안쪽에 있는 여백을 말합니다. margin은 요소와 요소 사이의 간격을 정의할 때 주로 사용하고, padding은 요소 내부 콘텐츠와 border 사이의 간격을 정의할 때 주로 사용합니다.

리액트 라이프사이클에는 마운트, 업데이트, 언마운트 과정이 있습니다. 이를 리액트 함수형 컴포넌트에서는 useEffect를 통해 비슷하게 구현할 수 있습니다. 처음 렌더링 될 때는 useEffect의 콜백 함수가 실행되어 마운트 과정을 구현합니다. 업데이트될 때는 useEffect의 의존성 배열 안의 의존 변수가 변경되면서 콜백 함수가 다시 실행되어 업데이트 과정을 구현합니다. 언마운트될 때는 useEffect 안의 클린업 함수가 반환되면서 실행되어 언마운트 과정을 구현합니다.

VDOM은 리액트에서 UI를 효율적으로 렌더링하기 위해 메모리 상에 가상의 DOM 트리 구조를 만들어 활용하는 개념입니다. VDOM은 링크드 리스트로 구현된 트리 구조이며, 각 노드는 파이버 구조로 이루어져 있습니다. 파이버 구조 안에는 각 컴포넌트의 상태, 프롭스, DOM 정보 등이 저장됩니다. 더블 버퍼링 방식을 사용하여 현재 트리(커런트 트리)와 작업 중인 트리(워킹 인 프로그레스 트리)가 존재합니다. 초기 렌더링 시에는 전체 UI를 VDOM으로 메모리에 저장하고, 리렌더링이 발생하면 렌더 단계에서 현재 트리와 작업 중인 트리를 비교하여 변경된 부분을 탐지하는 재조정 과정을 비동기적으로 거친 후, 커밋 단계에서 변경된 부분만 실제 DOM에 동기적으로 반영합니다.