웹 브라우저의 구조와 동작 원리: 리액트 애플리케이션을 중심으로

브라우저 구성 요소

사용자 인터페이스 (UI)

주소 창, 뒤로/앞으로 버튼, 즐겨찾기 메뉴 등을 포함하며, 요청된 페이지가 표시되는 메인 창을 제외한 모든 부분

브라우저 엔진 Browser Engine

브라우저 엔진은 UI와 렌더링 엔진 사이에서 중개자 역할을 합니다. 사용자 인터페이스에서 수신한 입력에 따라 렌더링 엔진을 쿼리하고 처리합니다. 또한, 브라우저 엔진은 문서들 간의 보안 정책을 강제하며 페이지 스크립트에 노출되는 문서 객체 모델 (DOM), 자료 구조를 관리합니다. 이 과정에서 렌더링 엔진과 긴밀하게 협력하여 최종적으로 화면에 페이지를 표시합니다.

렌더링 엔진 Rendering Engine

렌더링 엔진은 HTML과 CSS를 파싱하여 화면에 표시합니다. HTML 문서를 해석하여 DOM 트리를 구축하고, CSS를 적용하여 레이아웃을 계산한 후, 페인팅 과정을 통해 화면에 텍스트와 이미지를 그립니다. 렌더링 엔진은 브라우저 엔진과 협력하여 최종적인 페이지를 사용자 인터페이스에 표시합니다.

• Google Chrome - Blink
• Apple Safari - WebKit

네트워킹 Networking

네트워킹 모듈은 HTTP 요청과 같은 네트워크 호출에 사용되며, 플랫폼 독립적인 인터페이스를 제공합니다. 네트워킹 모듈이 데이터를 받아오면 브라우저 엔진과 렌더링 엔진이 이를 처리하여 화면에 표시할 준비를 합니다.

자바스크립트 엔진 JavaScript Engine

JavaScript 엔진은 자바스크립트 코드를 파싱하고 실행하는 역할을 합니다. 예를 들어, Google Chrome의 JavaScript 엔진은 V8 엔진으로, 자바스크립트를 기계어로 컴파일한 후 실행합니다. 이 과정에서 애플리케이션의 로직을 수행하고, DOM 조작을 통해 페이지를 동적으로 변화시킵니다.

UI 백엔드 UI Backend

기본적인 위젯(콤보 박스, 창 등)을 그리는데 사용되는 인터페이스

데이터 저장소 Data Storage

브라우저의 데이터 저장소는 쿠키, 로컬 스토리지, 세션 스토리지 등과 같은 데이터를 하드 디스크에 저장하는 지속성 레이어입니다. 이는 브라우저가 사용자 데이터를 관리하고 유지하는 데 중요한 역할을 합니다.

브라우저 엔진과 렌더링 엔진은 밀접하게 결합되어 있어 하나의 브라우저 엔진으로 언급되기도 합니다.

크롬 브라우저 구성

1. 브라우저: Google Chrome
2. 브라우저 엔진: Chromium
3. 렌더링 엔진: Blink
4. JavaScript 엔진: V8

리액트 애플리케이션의 브라우저 동작 과정

1. HTTP 응답 및 브라우저 엔진 처리:
   • 네트워킹 모듈이 받은 HTTP 응답 본문(index.html)을 브라우저 엔진에 전달합니다.
2. HTML 파싱 및 DOM 구축:
   • 렌더링 엔진이 index.html을 파싱하고, DOM 트리를 구축합니다.
3. CSS 파싱 및 CSSOM 구축
   • 렌더링 엔진이 HTML에 링크된 CSS 파일을 로드하고 파싱하여 CSSOM을 생성합니다.
4. Layout 계산
   • 렌더링 엔진이 렌더 트리의 각 노드에 대해 화면상의 정확한 위치와 크기를 계산합니다.
5. 페인트
   • 렌더링 엔진이 계산된 레이아웃을 기반으로 실제 픽셀을 화면에 그립니다.
6. JavaScript 로드 및 실행:
   • index.html의 <script> 태그를 만나면 브라우저 엔진이 V8 엔진을 호출하여 자바스크립트 코드를 실행합니다.
   • defer 속성이 있는 스크립트는 DOM 구축이 완료된 후 실행됩니다.
7. 리액트 초기화:
   • V8 엔진이 리액트 라이브러리 코드를 실행하여 초기화하고, 내부 모듈, 함수, 객체 등을 메모리에 로드합니다.
8. 애플리케이션 코드 실행:
   • ReactDOM.createRoot() 또는 ReactDOM.render()가 호출되어 루트 컴포넌트가 렌더링됩니다.
9. 가상 DOM 생성 및 실제 DOM 반영:
   • 리액트가 가상 DOM을 생성하고, 이를 기반으로 실제 DOM에 반영합니다.
   • 이 과정에서 React의 재조정(reconciliation) 알고리즘이 작동합니다.
10. 이벤트 리스너 설정:
    • V8 엔진이 애플리케이션의 이벤트 리스너를 설정합니다.
11. 애플리케이션 준비 완료:
    • 브라우저 엔진이 전체 상태를 관리하고, UI 백엔드가 사용자 인터페이스를 준비합니다.

그러나 실제로 브라우저의 여러 구성 요소(JS(V8) 엔진, 렌더링 엔진, 브라우저 엔진)들은 긴밀하게 상호작용하며 작동합니다.

참고
위키피디아 - 브라우저 엔진
Understanding the Role of Rendering Engine in Browsers