-
React 임민영 튜터님의 라이브 세션이 있었다.
-
브라우저 동작 방식이라는 주제로 강의가 진행되었다.
-
내가 이해한 내용을 다시 정리하는 마음으로 TIL(Today I Learned)을 작성했다.
📖 브라우저 동작 방식
📌 자바스크립트란?
-
객체 기반의 스크립트 프로그래밍 언어이다.
-
정적인 HTML을 동적으로 표현하기 위해 만들어졌다.
📌 호스트란?
-
자바스크립트가 돌아가는 플랫폼
-
호스트는 브라우저, 웹서버, 냉장고 등이 될 수 있다.
-
각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 '호스트 환경'이라고 부른다.
📌 브라우저
- 웹 페이지, 이미지, 비디오 및 기타 파일을 포함하여 콘텐츠를 찾고 검색하고, 표시하는 데 사용되는 고도화된 애플리케이션이다.
📌 브라우저의 주요 기능
- 서버로부터 데이터를 전송받고, 전송받은 데이터를 변환하여 사용자가 알아볼 수 있게끔 표시한다.
📌 브라우저 객체 모델 (BOM)
- 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.
📌 1. 사용자 인터페이스 (User Interface)
-
사용자가 브라우저와 상호 작용하는 공간이다.
-
주소 표시줄, 뒤로 가기 버튼, 앞으로 가기 버튼, 북마크, 새로 고침 및 등이 사용자 인터페이스이다.
📌 2. 브라우저 엔진(Browser Engine)
-
User Interface와 Rendering Engine 사이에서 다리 역할을 한다.
-
다양한 사용자 인터페이스의 입력에 따라 렌더링 엔진을 쿼리하고 조작한다.
📌 3. 렌더링 엔진(Rendering Engine)
-
브라우저 화면에서 요청된 웹 페이지를 렌더링 하는 역할을 한다.
-
CSS를 사용하여 형식이 지정된 HTML, XML 문서 및 이미지를 해석하고 사용자 인터페이스에 표시되는 레이아웃을 생성한다.
-
플러그인이나 확장을 사용하면 다른 유형의 데이터도 표시할 수 있다.
📌 4. 통신(Networking)
-
HTTP 또는 FTP의 일반적인 인터넷 프로토콜을 사용하여 URL을 검색하는 브라우저의 구성 요소이다.
-
네트워킹 구성 요소는 인터넷 통신 및 보안의 모든 측면을 처리한다. 네트워크 구성 요소는 네트워크 트래픽을 줄이기 위해 검색된 문서의 캐시를 구현할 수 있다.
📌 5. 자바스크립트 해석기 (JavaScript Interpreter)
- 웹사이트에 포함된 자바스크립트 코드를 해석하고 실행해주는 역할이다.
- 대표적인 엔진 : V8 엔진
- V8 엔진(웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있다.)
- 해석된 결과는 표시를 위해 렌더링 엔진으로 전송된다.
📌 6. UI 백엔드(UI Backend)
- 기본 운영 체제의 사용자 인터페이스 방법을 사용한다.
- 기본 위젯(창 및 콤보 상자)을 그리는 데 주로 사용된다.
📌 7. 자료 저장소(Data Persistence)
- 브라우저 상에서 저장해야 하는 정보들을 모두 관리한다.
- 브라우저가 설치된 컴퓨터의 로컬 드라이브에 생성된 작은 데이터베이스이다.
- 캐시, 쿠키, 책갈피 및 기본 설정과 같은 사용자 데이터를 관리한다.
📌 파싱(Parsing)
-
토큰화 된 코드를 구조화하는 과정을 말한다.
-
이러한 파싱 과정을 전문적으로 해주는 부분을 파서(Parser)라고 부른다.
-
입력받은 문자열이 정해진 문법들을 모두 다른지를 확인하는 과정이다.
📌 더티 비트 시스템(Dirty Bit System)
-
가상 기억 장치 시스템에서 교체될 페이지의 내용이 변경되었는지를 표시하는 비트.
-
특정 엘리먼트의 레이아웃이 변경이 되었을 때, 렌더 트리를 처음부터 탐색하면서 레이아웃을 계산하지 않고 특정한 부분만 다시 계산하여 리소소의 낭비를 줄이는 최적화 방법이다.
📌 가상 돔(Virtual DOM)이란?
-
화면의 변경사항을 바로 DOM에 반영하지 않고 메모리상에 복사본을 모아뒀다가 한 번에 반영하는 개념이다.
-
가상 DOM은 사실 2개(구 가상 DOM, 신 가상 DOM)가 존재하는데, 바꾸고 싶은 것들을 모아 두고 리렌더링(re-rendering)을 일으켜야 할 때 구 가상 DOM과 신 가상 DOM을 비교하여 실제 DOM에 필요한 변경만 수행합니다.
Reference
