사용자가 브라우저를 통해 특정 사이트를 방문했을때 브라우저는 서버에서 필요한 데이터를 (정적파일 등) 서버에서 받아 화면에 보여준다. 이러한 정보의 통로인 브라우저의 구성요소와 구조에 대해서 공부해보자!
브라우저 구조
1) 사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 유저가 사용하는 브라우저, 유저와 가장 밀접하게 맞닿아 있음
2) 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 역할을 한다. 레이아웃 엔진이라고도 불리며 렌더링 엔진과 밀접하게 연관되어 있다.
웹 브라우저마다 전용 브라우저 엔진을 사용한다.
- Blink Engine (Chrome, Opera, Samsung Internet, MS Edge, Whale, Brave)
- WebKit Engine (Safari)
- Servo Engine (Firefox), Gecko Engine (Firefox)
3) 렌더링 엔진
요청한 콘텐츠를 화면에 출력하는 역할을 한다. HTML과 CSS를 파싱해 최종적으로 화면에 그려주며, HTML 및 XML 문서와 이미지를 표시할 수 있다.
렌더링 엔진은 아래의 순서로 컨텐츠를 화면에 표시한다.
4) 통신
HTTP 요청과 같은 네트워크 호출을 담당한다. 서버에서 받은 URI에 해당하는 응답 데이터를 렌더링 엔진에게 돌려주는 역할을 한다.
5) 자바스크립트 엔진 (=자바스크립트 해석기)
자바스크립트 코드를 해석하여 컴퓨터가 읽을 수 있는 기계어로 변환해주는 인터프리터이다.
인터프리터란? 프로그래밍 언어의 소스코드를 바로 실행하는 프로그램 또는 환경을 말함
웹 브라우저마다 전용 자바스크립트 엔진이 탑재되어있다.
- V8: Google, Chrome, Node JS
- Rhino Engine: Mozilla, Firefox
- Webkit Engine: Apple, Safari
근래 제일 많이 쓰고있는 크롬 브라우저의 V8 엔진의 작동 원리는 아래와 같다.
6) UI 백엔드
렌더링 엔진이 분석한 렌더트리를 브라우저에 그리는 역할을 수행한다. Input, Select, Button.. 기본위젯 등
7) 자료 저장소 (=웹 스토리지)
영구적인 저장소인 로컬 스토리지와 임시 저장소인 세션 스토리지를 두어 응용 환경에 맞는 선택이 가능하다.
- 로컬 스토리지 : 보관 기한이 없는 데이터, 브라우저를 닫거나 컴퓨터를 재부팅해도 사라지지 않는다. 도메인 마다 별도의 로컬 스토리지가 생성되며, 도메인만 같으면 전역으로 데이터 공유가 가능하다.
- 세션 스토리지 : 하나의 세션만을 위한 데이터를 저장한다. 브라우징 되고 있는 브라우저 컨텍스트 내에서만 유지되기 때문에 브라우저 탭을 닫으면 데이터가 사라진다.
웹 브라우저에서 직접 데이터를 저장할 수 있고 서버에 전송되지 않는 데이터이다.
서버 네트워크 트래픽 비용을 절감 시킬 수 있다. 웹 스토리지는 출처(Origin)마다 단 하나씩 존재하고, 하나의 출처에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근 할 수있다.
