브라우저
- 월드 와이드 웹(이하 웹)은 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결해 제공한다.
- 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램입니다.
- 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신을 합니다.
브라우저는 사용자가 선택한 자원을 서버에 요청하고, 서버의 응답을 브라우저에 렌더링하는 방식으로 동작한다.
브라우저 구조
사용자 인터페이스
- UI이라고도 부르며, 가장 유저와 밀접하게 맞닿아있다.
브라우저 엔진(Browser Engine)
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
- HTML 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환하며,
- 문서 객체 모델(DOM) 자료 구조를 구현합니다.
렌더링 엔진(Rendering Engine)
- 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부른다.
- HTML, CSS 등을 파싱해 요청한 콘텐츠를 최종적으로 화면에 출력하는 역할을 한다.
통신(Networking)
- HTTP 요청과 같은 네트워크 호출에 사용된다.
자바스크립트 해석기(JavaScript Interpreter)
- 대부분의 웹 인터랙션(Interaction)에 JavaScript가 사용 된다.
- 자바스크립트는 인터프리터 언어로 위에서 아래로 한 줄씩 코드를 해석하고 실행하는 자바스크립트 해석기의 필요성이 대두됐다.
- 힙 메모리(Heap Memory)
힙(heap)은 동적 메모리 할당에 사용되는 자료구조다.
이 곳을 통해 객체 또는 동적 데이터를 저장하며, 가비지 컬렉션 또한 발생한다.- 콜 스택(Call Stack)
콜 스택은 후입선출(LIFO)으로 처리할 작업을 기록하는 자료구조이다.
JavaScript는 싱글 스레드 기반으로 콜 스택이 하나이며, 한 번에 한 작업만 처리한다.- 스택 오버플로(Stack Overflow)
스택 오버플로는 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 일어난다.
콜 스택의 제한된 크기를 스택 프레임이 넘어버리게 되면 웹 브라우저는 멈춘다.
UI 백엔드
- 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당합니다.
- Select, Input 창과 같은 기본적인 위젯을 그려줍니다.
- 플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용합니다.
자료 저장소
- 쿠키를 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 존재하고 있습니다. - - HTML5 명세에는 브라우저가 지원하는 웹 저장소(Web Storage, 이하 웹 스토리지라고 지칭합니다.) 스펙이 정의되어 있습니다.
- HTML5 이전에는 데이터에 서버를 요청할 때마다 매번 쿠키에 그 정보를 저장해왔다.
- 보안상 취약과 더불어 저장소 용량의 적음으로 다른 대안을 찾게 되었고, 웹스토리지가 등장했다.
- 영구적인 저장소인 로컬스토리지(localStorage)와 임시적인 저장소인 세션스토리지(sesseionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능해집니다.
웹 스토리지(Web Storage) 특징
- 웹 브라우저가 직접 데이터를 저장할 수 있고, 사용자 측에 더 많은 양의 정보를 안전하게 저장할 수 있게 해준다.
- 모든 정보는 절대 서버로 전송되지 않으므로 네트워크 트래픽 비용 또한 줄여준다.
- 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다. 오리진(origin)은 도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자이다.
- 사용하기 전에 사용자의 웹 브라우저 버전이 이를 지원하는지 먼저 확인을 해봐야 합니다.
로컬스토리지(localStorage)
보관 기한이 없는 데이터를 저장하여 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 데이터는 사라지지 않는다.
도메인 마다 별도의 localStorage가 생성되어 도메인만 같으면 전역으로 데이터의 공유가 가능하다.
세션스토리지(sessionStorage)
하나의 세션만을 위한 데이터를 저장하여 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지한다.
세션 스토리지 역시 도메인 별로 별도로 생성되지만 브라우저 컨텍스트가 다르면 서로 다른 영역이 된다.
(브라우저 두 개를 실행해 같은 페이지를 열었을 때, 브라우저의 컨텍스트가 서로 다르므로 별개의 영역으로 처리한다.)
