dom

내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원은 일반적으로 HTML 문서이지만, 다른 형태의 파일(e. g. 이미지, PDF 등)일 수도 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (e.g. 북마크, 주소 표시줄 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠 표시. 예를 들..

브라우저가 어떻게 웹 페이지를 사용자에게 보여주는 지 그 과정을 자세하게 아는 것은 프론트엔드 개발자에게 꼭 필요한 지식이라고 생각한다. 따라서 면접 때 충분히 물어볼 수 있고, 면접 때 설사 물어보지 않더라도, 실무에서 트러블 슈팅을 할 때 알고 있어야 하는 내용이라고 생각을 해서 나름대로 정리를 해 보려고 한다. 먼저 아래의 그림을 보자. W3에서 말하는 사용자 액션이 발생하고(ex. https://www.google.com 을 브라우저 url에 입력한다) 브라우저가 이를 감지해서 웹 페이지를 아래의 그림 순서대로 로드한다. 여기에서 노란색 부분은 웹 페이지에서 벗어난 후 문서를 읽어들이기 전을 의미하고, 파란색 부분은 자바스크립트 이벤트는 없고 전부 네트워크 레벨에서 일어나는 일이다. 첫 번째 일어..

리액트는 기본적으로 가상 DOM(Virtual DOM)을 사용하기 때문에 DOM 조작으로 인한 브라우저 렌더링 과정 리소스를 최소화한다는 장점을 가지고 사용한다. 따라서 가능하면 리액트에서 DOM을 직접 건드리는 일은 지양해야 한다. 하지만 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 생기게 된다. 이럴 때 사용하는 개념이 ref(reference의 줄임말)이다. 우리가 일반적으로 어떤 컴포넌트에서 조작이 일어날 때 DOM을 변화시키는 경우 state를 사용한다. 함수형 컴포넌트에서는 useState를 사용할 수 있다. 하지만 state만 가지고 해결할 수 없는 경우도 존재한다. 예를 들면 특정 DOM 노드에 접근하여 포커스, 미디어 재생 등을 제어하거나 사이즈를 얻어올 때 스크롤 박스 조작하기..