목차

  1. 브라우저의 랜더링 과정
    1. 랜더링
    2. 브라우저의 역할
    3. 브라우저의 구조
    4. 브라우저 랜더링 과정
    5. 결론적인 코드 작성부터 출력까지의 과정
      1. 가비지 컬렉션이란?
  2. 리액트
    1. 리액트란 무엇인가
    2. Virtual DOM
      1. 가상돔의 동작원리
      2. 가상돔을 이용해 UI를 최적화 하는 법
      3. Fiber Tree (feat React v16)
    3. 단방향 데이터 바인딩
      1. 바인딩이란?
      2. 데이터 바인딩이란?
      3. 단방향 데이터 바인딩이란?
      4. 리액트에서 단방향 데이터 바인딩

브라우저의 랜더링 과정

랜더링

랜더링이란 HTML, CSS, JavaScript 등으로 작성된 코드를 브라우저에서 화면에 출력하는 과정을 말합니다.

웹 페이지는 HTML, CSS, JavaScript 등의 코드로 작성되어 있으며, 브라우저는 이 코드를 읽어서 화면에 출력합니다. 이 과정에서 브라우저는 웹 페이지의 레이아웃, 색상, 글꼴 등을 계산하고, 브라우저 창에 적절히 배치하여 사용자가 볼 수 있는 형태로 출력합니다.

이를 렌더링이라고 합니다.

브라우저의 역할

브라우저는 주로 사용자가 선택한 자원을 서버에 요청하고 이를 해석하여 브라우저에 표시합니다. 자원은 HTML 문서 뿐만 아니라 PDF나 이미지 등의 파일 형태일 수도 있습니다. 이러한 파일의 형태는 URL을 통해 결정됩니다.

브라우저의 구조

출처: https://d2.naver.com/helloworld/59361

출처: https://d2.naver.com/helloworld/59361

사용자 인터페이스

사용자 인터페이스는 브라우저의 창, 주소 표시줄, 버튼 등과 같은 모든 것을 의미합니다. 이것은 사용자가 브라우저를 조작할 수 있도록 하는 요소입니다.

보통 사용자 인터페이스라고 하면, 브라우저의 주요 UI 요소인 주소 표시줄, 탐색 버튼, 메뉴, 상태 표시줄 등과 같은 요소를 가리키는 것이 일반적입니다. 따라서, 웹 페이지는 사용자 인터페이스라고 보다는, 브라우저의 사용자 인터페이스를 구성하는 요소 중 하나로 간주하는 것이 더 적절합니다.

브라우저 엔진

브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 간의 상호작용을 조정합니다. 사용자가 주소 표시줄에 URL을 입력하면, 브라우저 엔진은 해당 URL을 가져와서 렌더링 엔진에 전달합니다.

렌더링 엔진

렌더링 엔진은 HTML, CSS, JavaScript 및 기타 리소스를 받아서 웹 페이지를 표시하는 일을 합니다. 예를 들어, 렌더링 엔진은 HTML 문서를 파싱하고, CSS 스타일 시트를 적용하며, 요소들을 화면에 배치하고, 이미지 및 동영상과 같은 미디어를 로드합니다.