브라우저의 구조

 

< 사용자 인터페이스 (User Interface) >

-UI라고도 부른다.

-가장 유저와 밀접하게 맞닿아있는 부분이다.

-주소 표시줄, 이전/다음버튼, 북마크 메뉴 등에 관련된 GUI부분을  통칭한다.

 

< 브라우저 엔진 (Browser Engine) >

-사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

-주된 역할은 HTML문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현한다.

-레이아웃 엔진(layout engine)라고도 부른다.

-렌더링 엔진(rendering engine)과 밀접한 연관이 있어 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부른다.(여기서는 구분해서 표현.)

- 브라우저 엔진은 웹 브라우저마다 전용 엔진을 사용하고 있다. 

-밑 표의 엔진 외에도 많은 브라우저 엔진이 존재한다.

 

< 렌더링 엔진 (Rendering Engine) >

-요청한 콘텐츠를 화면에 출력하는 역할을 한다.

-HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML문서와 이미지를 표시할수있다.

-플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할수있다.

-브라우저 엔진과 밀접하게 결합되어 있으므로 보통은 하나의 엔진으로 보는 시각이 많다.

-렌더링 엔진도 웹 브라우저마다 전용 엔진을 사용하고 있으나, 엔진의 동작 원리는 공통된 부분이 많다.

 

< 통신 (Networking) >

-http 요청과 같은 네트워크 호출에 사용된다.

-보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행된다.

 

< 자바스크립트 해석기(JavaScript Interpreter) >

-자바스크립트 엔진(javascript engine)이라고도 부른다.

-javascript는 코드를 위에서 아래로 한 줄씩 읽어 내려가는 방식으로 파싱(parsing)하는 언어(interpreted language)이다.

따라서 javascript 코드를 해석하고 실행하는 자바스크립트 해석기가 필요에 의해 등장하게 되었다.

-여러목적으로 사용이 되지만 대체로 웹 브라우저에서 이용이 되며, 브라우저마다 전용 엔진이 탑재되어 있다.

-밑 표의 엔진 외에도 많은 브라우저 엔진이 존재한다.

---

V8 엔진의 메모리 구조를 알아보자.

V8 엔진의 메모리 구조는 크게 Heap Memory와 Call Stack으로 구성되어있다.

 

#힙 메모리(Heap Memory)

-힙 메모리 내부에는 다양한 공간이 있다.

-힙(heap)은 동적 메모리 할당에 사용되는 자료구조이다.

이 힙을 이용하여 V8은 객체 또는 동적 데이터를 저장한다.

여기에 저장되는 메모리는 V8 엔진내부에서 가장 큰 공간을 차지하고 있으며, 가비지 컬렉션 또한 발생하는 곳이다.

 

#콜 스택(Call Stack)

-콜 스택이 하나라는 의미이며, 한 번에 한 작업만 사용할수있다.

-프로그램상에서 우리가 어디에 있는지 기록하는 자료구조이다.

-힙과는 달리 자료구조 자체가 크기에 제한이 있다. 따라서 한정된 메모리 공간을 넘어버리게 되면 어떠한 에러를 발생시키게 되는데 그것을 바로 스택 오버플로(Stack Overflow)라고 부른다.

 -실행하기 전에는 아직 스택에는 아무것도 들어가지 않은 상태였다.

-제일 먼저 printSquare(4)가 호출될것이다.

-호출되는 순간 해당하는 함수가 스택으로 push된다.

-함수 printSquare 내부에서는 다시 square(n)을 호출하고 있으므로, 함수 square를 이어 스택 안으로 push한다. 

-그 뒤, 함수 square내부에서도 multiply(n,n)을 호출하고 있으므로 함수 multiply를 뒤이어 스택 안으로 push한다.

이 과정에서는 return문으로 함수 호출만 되고 return 되는 특정 값이 없어 쌓이기만 한다.

-함수 multiply까지 도착해서야 드디어  return 되는 특정한 값을 얻는다. return a*b;

-이제 스택 안에서 return 되는 순서대로 stack을 제거한다.

-함수 multiply와 함수 square에서 차례대로 return 문의 결과를 얻는다.

-함수 printsquare로 돌아와 console.log(squared)를 실행시킨다.

-함수 printSquare 내부에 console.log(squared)가 있으므로, 해당 메소드를 실행하는 순간 스택 안에 console.log 스택이 쌓인다.

-console.log의 실행이 끝나면 스택에서 제거되고, 함수 printSquare 또한 실행이 완료되었으므로 스택에서 제거가 된다. 이렇게 다시 스택이 완전히 비어있게 된다.

 

#

-콜 스택에 쌓이는 데이터 하나하나를 스택 프레임(Stack Frame)이라고 부른다.

-스택 내에 쌓이는 printSquare(4) 하나가 프레임 하나임을 의미한다.

-스택 프레임들은 쌓이는 순서가 있기 때문에 콜 스택이 동작하는 방식을 안다면 스택의 추적 또한 가능해지게 된다.

 

#스택 오버플로(Stack Overflow)

-콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일때 일어난다.

-계속 쌓이면 그림처럼 프레임이 스택의 크기(용량)을 넘어버리게 된다. 콜 스택의 제한된 크기를 스택 프레임이 넘어버리게 되면 웹 브라우저는 멈춰버리게 된다. 

 

#스택 추적(Stack trace)

function foo(){
	throw new Error('오류 발생');
}
function bar(){
  foo();
}
function baz(){
  bar();
}
baz();

위의 코드는 baz()는 함수 bar()를 호출하고, bar()는 foo()함수를 호출하고, foo()는 에러메시지를 출력한다.

이렇게 브라우저의 콘솔 로그를 살펴보면 에러의 발생과 발생한 이유를 훌륭하게 추적해낼수있다.

이것이 바로 스택추적 이라고 부르는 것이다.

---

< UI 백엔드 >

-렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당한다.

-select, input 창과 같은 기본적인 위젯을 그려준다. 

-플랫폼에서 명시하지 않은 일반적인 인터페이스로, OS 사용자 인터페이스 체계를 사용한다.

-사용자 인터페이스, 또는 유저 인터페이스(UI)는 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다.

-거의 모든 운영체제는 사용자 인터페이스를 가지고 있으며, 이 인터페이스는 여러 형태를 가지고 있다.

이러한 종류의 인터페이스를 다룰때는 특정한 명령 체계를 사용해야 하는데 그게 명령어 라인 인터페이스(CLI), 일괄 처리 인터페이스(Batch Interface)이다.

-CLI는 터미널,명령 프롬프트등의 문자로만 명령어를 입력해 처리해야하는 인터페이스를 의미한다.

-일괄 처리 인터페이스는 사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스이다. 대규모의 시스템에서 대량의 데이터를 처리하는 데에 자주 사용되는 인터페이스이다. 가장 일반적으로 사용되는 것은 그래픽 사용자 인터페이스(GUI)이다.

 

< 자료 저장소 >

-자료를 저장하는 계층이다. 

-HTML 5 명세에는 브라우저가 지원하는 웹 저장소(웹 스토리지) 스펙이 정의되어 있다.

-영구적인 저장소인 로컬 스토리지와 임시적인 저장소인 세션 스토리지를 따로 두어 데이터의 지속성을 구분할수 있어 응용환경에 맞는 선택이 가능해진다.

 

#웹 스토리지 특징

-HTML5이전에는 응용 프로그램이 데이터에 서버를 요청할때마다 매번 쿠키에 그 정보를 저장해왔다. 그러나 보안상의 약점 등으로 인해 웹 스토리지가 나오게 되었다.

-웹 스토리지는 웹 브라우저가 직접 데이터를 저장할수 있게 해준다. 

-사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할수 있게 해준다.

-이런 모든 정보는 절대 서버로 전송되지 않으므로 저장된 데이터가 클라이언트에만 존재하기때문에 네트워크 트래픽 비용 또한 줄여준다는 특징 또한 가지고 있다.

-웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다.

-오리진(origin)은 도메인과 프로토콜 한쌍으로 이루어진 식별자로, 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할수있게된다.

-웹 스토리지는 사용하기 전에 사용자의 웹 브라우저 버전이 이를 지원하는지 먼저 확인을 해봐야 한다.

 

#웹 스토리지 종류

-웹 스토리지는 데이터의 지속성과 관련해 두가지 용도의 저장소 객체를 제공한다.

 

1. 로컬 스토리지(localStorage)

-로컬 스토리지 객체는 보관 기한이 없는 데이터를 저장한다.

-브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않는다.

-windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능하며, 도메인마다 별도의 localStorage가 생성된다. 따라서 도메인만 같으면 전역으로 데이터의 공유가 가능해진다.  

 

2. 세션 스토리지(sessionStorage)  

-세션 스토리지 객체는 하나의 세션만을 위한 데이터를 저장한다.

-데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지되기 때문에, 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라진다.

-브라우징: 브라우저 프로그램을 실행해서 인터넷에 들어가 필요한 정보를 찾는 행위를 말한다.

-브라우저 컨텍스트: 브라우저가 문서를 표시하는 환경.

각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서의 출처, 표시했던 모든 문서의 방문기록을 가지고 있다.

 

# 

-저장과 조회는 windows 전역 객체의 세션 스토리지라는 컬렉션을 통해 이루어지며, 도메인별로 별도로 생성된다.

-브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징이 있다!!!!!

즉, 브라우저 두개를 실행해 같은 페이지를 열었을때, 브라우저의 컨텍스트가 서로 다르므로 이 두 페이지의 세션 스토리지는 각 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능해진다.

 

#웹 스토리지를 사용하기 위한 문법

-웹 스토리지는 클라이언트에 데이터를 저장하기 위한 두가지 객체를 제공한다.

-window.localStorage: 만료 날짜가 없는 데이터를 저장할때 쓰인다.

-window.sessionStorage: 세션이 있는 데이터를 저장할때 쓰인다. 

(브라우저 탭을 닫으면 손실되는 것을 의도한 데이터를 저장할때 쓰인다)

//window 객체에 있는 Storage 객체를 통해 확인할 수 있습니다.
//해당 객체가 존재하지 않는 브라우저라면 `undefined`를 반환하고, 존재한다면 객체를 반환합니다.
if (typeof(Storage) !== "undefined") {

    // web storage를 위한 코드 부분

} else {

    // web storage를 지원하지 않는 브라우저를 위한 안내 부분
}

-해당 코드는 웹스토리지를 사용하기 이전에 해당 브라우저의 버전이 웹 스토리지를 지원하는지 확인하고자 할때 쓰이는 코드이다. 먼저 웹 스토리지가 존재하는지 확인을 한 다음에, 웹 스토리지에 무엇을 저장할지 결정하여 조건문 안에 작성한다.

 

#웹 스토리지를 활용한 대표적인 기능

-브라우저 컨텍스트 내에서 저장한 데이터를 가지고 활용할수 있기 때문에 복구 및 백업에 관련된 기능에 주로 사용이 된다.

-블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능.

-사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능.

-현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)