브라우저의 구조
브라우저의 구조
사용자 인터페이스 (User Interface)
- UI라고도 부름
- 가장 유저와 밀접하게 맞닿아 있는 부분
- 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭
브라우저 엔진 (Browser Engine)
- 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어
- 브라우저 엔진의의 주된 역할은 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 시각 표현으로 변환 시키며, 문서 객체 모델(DOM) 자료 구조를 구현함
- 레이아웃 엔진(Layout Engine)이라고도 함
- 렌더링 엔진과 밀접한 연관이 있어 보통 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부르는 경우가 많음
- 이러한 브라우저 엔진은 웹 브라우저 마다 전용 엔진을 사용하고 있음
- 아래 표가 유명한 브라우저 엔진이나 이외에도 많은 브라우저 엔진이 존재
| 이름 | 설명 |
| 게코(Gecko) | 모질라 재단에서 만든 브라우저 엔진 파이어폭스가 해당 엔진을 탑재 |
| 웹킷(Webkit) | KHTML에서 파생된 브라우저 엔진 사파리가 해당 엔진을 탑재 |
| 블링크(Blink) | 웹킷에서 파생된 브라우저 엔진 크롬, 오페라가 해당 엔진을 탑재 |
| 트라이던트(Trident) | 마이크로소프트의 브라우저 엔진 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃룩이 이를 탑재 |
| 엣지HTML(EdgeHTML) | 트라이던트에서 파생된 브라우저 엔진 마이크로소프트 엣지 스파르탄 버전(~2019)까지 탑재 (현재는 블링크로 교체) |
렌더링 엔진 (Rendering Engine)
- 요청한 콘텐츠를 화면에 출력하는 역할
- HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있음
- 위에서 기술한 브라우저 엔진과 밀접하게 결합되어 있으므로 브라우저 엔진과 묶어서 하나의 엔진으로 보는 시각이 많음
- 렌더링 엔진 또한 웹 브라우저마다 전용 엔진을 사용하고 있으나 엔진의 동작 원리는 공통된 부분이 많음
통신 (Networking)
- HTTP 요청과 같은 네트워크 호출에 사용됨
- 보통 플랫폼의 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
자바스크립트 해석기 (JavaScript Interpreter)
- 자바스크립트는 코드를 위에서 아래로 한 줄씩 읽어가는 방식으로 파싱(parsing)하는 언어임
- 따라서 자바스크립 코드를 해석하고 실행하는 자바스크립트 해석기가 필요함
- 자바스크립트 해석기는 자바스크립트 엔진이라고도 함
- 여러 목적으로 사용되나 대체적으로 웹 브라우저에서 이용되며, 브라우저마다 전용 엔진이 탑재되어 있음
- 아래 표의 엔진 외에도 다양한 엔진이 있음
| 이름 | 설명 |
| Rhino | 모질라 재단에서 운영하는 오픈소스 엔진 자바(Java)로 개발되었다는 특징 |
| SpiderMonkey | 최조의 자바스크립트 엔진으로 넷스케이프 내비게이터를 지원 현재는 파이어폭스를 지원 |
| V8 | 구글이 개발한 오픈 소스 엔진 구글 크롬의 자바스크립트 엔진 |
| JavascriptCore | 애플에서 개발 처음에 WebKit 프레임워크를 위해 개발 현재는 사파리와 React Native App를 지원 |
| Chakra | 마이크로소프트가 개발한 엔진 Edge 브라우저 지원 |
▶ V8 엔진을 통한 자바스크립트 엔진 구조 설명
- V8 엔진의 메모리 구조는 크게 Heap Memory와 Call Stack으로 구성되어 있음
힙 메모리 (Heap Memory)
- 힙 메모리 내부에는 다양한 공간이 있음
- 힙은 동적 메모리 할당에 사용되는 자료구조
- 힙을 이용하여 V8은 객체 또는 동적 데이터를 저장
- 여기에 저장되는 메모리는 V8 엔진 내부에서 가장 큰 공간을 차지하고 있으며, 가비지 컬렉션 또한 발생하는 곳
콜 스택 (Stack)
- JavaScript는 기본적으로 싱글 스레드 기반의 언어 ≒ 콜 스택이 하나라는 의미
- 한 번에 한 작업만 사용할 수 있음
- 콜 스택은 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
- 만약 함수를 실행한다면 해당 함수는 콜 스택의 가장 상단에 위치함 → 만약 함수의 실행이 끝나면 해당 함수는 콜 스택 가장 상단에 위치하고 있기 때문에 바로 제거할 수 있음
- 콜 스택의 동작 방식
함수를 실행하면
- 제일 먼저 printSquare(4)가 호출됨 → 호출이 되는 순간 해당 함수가 스택으로 push 됨
- 함수 printSquare 내부에서는 다시 square(n)을 호출하고 있으므로 함수 square를 이어 스택안으로 push함
- 그 뒤 함수 square 내부에서도 multiply(n, n)을 호출하고 있으므로 함수 multiply를 뒤이어 스택 안으로 push함
- 이 과정에서는 return문으로 함수 호출만 되고 return 되는 특정 값이 없어 쌓이기만 함
- 함수 multiply까지 도착해서 return 되는 특정한 값을 얻음
- 이제 스택 안에서 return 되는 순서대로 stack을 제거함
- 따라서 스택 내부에서 차례대로 pop함
- 함수 printSquare로 돌아오면 함수 내부에서 실행시켜야 하는 메소드(console.log(squared);)가 있음
- 함수 printSquare 내부에 콘솔 로그 명령이 있으므로 해당 메소드를 실행하는 순간 스택 안에 콘솔 로그 스택이 쌓임
- 이어 콘솔 로그의 실행이 끝나면 스택에서 제거되고 함수 printSquare 또한 실행이 완료되었으므로 스택에서 제거됨
- 여기서 스택에 쌓이는 데이터 하나하나를 스택 프레임(Stack Frame)이라고 함
- 이 스택 프레임들은 동작 방식에서도 알 수 있듯 쌓이는 순서가 있기 때문에 콜 스택 동작하는 방식을 안다면 스택의 추적 또한 가능해지게 됨
스택 오버플로 (Stack Overflow)
- 콜 스택은 힙과 달리 자료구조 자체가 크기에 제한이 있음
- 따라서 한정된 메모리 공간을 넘어버리게 되면 어떠한 에러를 발생시키게 되는데 그것을 바로 스택 오버플로(Stack Overflow)라고 함
- 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 나타남
스택 추적 (Stack trace)
- 위 그림에서 함수 baz()는 함수 bar()를 호출하고 bar()는 foo()를 함수를 호출하고 foo()는 마지막으로 에러 메세지를 출력함
- 이렇게 브라우저의 콘솔로그를 살펴보면 에러의 발생과 이유를 추적해 낼 수 있음
- 이것이 바로 스택 추적이라고 부르는 것
UI 백엔드
- 렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할을 담당
- Select, Input 창과 같은 기본적인 위젯을 그려줌
- 플렛폼에서 명시하지 않은 일반적인 인터페이스로 OS 사용자 인터페이스 체계를 사용함
* 사용자 인터페이스(User Interface;UI)란?
: 사람과 사물 또는 시스템 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적 가상적 매개체를 뜻함
* 명령어 라인 인터페이스(Command Line Interface;CLI)?
: mac이라면 터미널, 윈도우라면 명령 프롬프트 등의 문자로만 명령어를 입력해 처리해야 하는 인터페이스를 의미
* 일괄 처리 인터페이스(Batch Interface)?
: 사용자가 배치 처리에 앞서 배치 작업의 모든 세부 사항을 지정하고, 모든 처리가 완료되면 출력을 수신하는 비대화형 사용자 인터페이스
* 그래픽 사용자 인터페이스(Graphic User Interface; GUI)?
- 가장 일반적으로 사용됨
- 마우스, 키보드, 모니터 등을 이용해 아이콘을 클릭하거나 직관적인 입력이 가능한 인터페이스
자료 저장소
- 말 그대로 자료를 저장하는 계층
- 쿠키를 저장하는 것과 같이 모든 자원을 하드 디스크에 저장할 필요가 있기 때문에 존재
- HTML5 명세에는 브라우저가 지원하는 웹 저장소(Web Storage, 이하 웹 스토리지라고 지칭)스펙이 정의되어 있음
- 영구적인 저장소인 로컬스토리지(localStorage)와 임시적인 저장소인 세션스토리지(sessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 선택에 맞는 선택이 가능해짐
웹 스토리지(Web Storage) 특징
- 웹 스토리지는 웹 브라우저가 직접 데이터를 저장할 수 있게 해줌
- 또한 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있게 해줌
- 이런 모든 정보는 절대 서버로 전송되지 않으므로 저장된 데이터가 클라이언트에만 존재하기 때문에 네트워크 트래픽 비용 또한 줄여줌
- 이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재함
- 오리진(origin)은 도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자
- 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터로 접근할 수 있게 됨
웹 스토리지 종류
1. 로컬스토리지(localStotrage)
- 로컬스토리지 객체는 보관 기한이 없는 데이터를 저장
- 따라서 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않음
- Window 전역 객체에 localstorage라는 컬렉션을 통해 저장과 조회가 가능
- 도메인마다 별도의 localstorage가 생성됨 → 도메인만 같으면 적역으로 데이터 공유가 가능
2. 세션스토리지(sessionStorage)
- 하나의 세션만을 위한 데이터를 저장
- 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 테이터가 유지
- 브라우징이란? 브라우저 프로그램을 실행해서 인터넷에 들어가 정보를 찾는 행위를 말함
- 브라우징 컨텍스트란? 브라우저가 문서를 표시하는 환경. 각 브라우징 컨텍스트는 특정 출처 및 활성화되고 있는 문서 출처, 표시했던 문서 방문기록을 가지고 있음
- 저장과 조회는 Windows 전역 객체의 sessions Storage라는 컬렉션을 통해 이루어지며 도메인 별도로 생성
- 브라우저 컨텍스트가 다르면 서로 다른 영역이 된다는 특징
- 즉 브라우저를 두 개 실행해 같은 페이지를 열었을 때 브라우저 컨텍스트가 서로 다르므로 이 두페이지의 세션스토리지는 별개의 영역으로 인지되어 서로 데이터의 공유가 불가능해짐
웹 스토리지를 사용하기 위한 문법
- window.localStorage : 만료 날짜가 없는 데이터를 저장할 때 쓰임
- window.sessionStorage : 세션이 있는 데이터를 저장할 때 쓰임 → 브라우저 탭을 닫으면 손실되는 것을 의도한 데이터를 저장할 때 쓰임
- 아래의 코드는 웹 스토리지를 사용하기 이전의 해당 브라우저 버전이 웹 스토리지를 지원하는지 확인하고자 할 때 쓰는 코드
// window 객체에 있는 Storage 객체를 통해 확인할 수 있음
// 해당 객체가 존재하지 않는 브라우저라면 undefined를 반환하고, 존재한다면 function을 반환
if(typeof(Storage) !== 'undefiend'){
// web storage를 위한 코드 부분
} else {
// web storage를 지원하지 않는 브라우저를 위한 안내 부분
}
웹 스토리지를 활용한 대표적인 기능
- 브라우저 컨텍스트 내에서 저장한 데이터를 가지고 활용할 수 있기 때문에 복구 및 백업에 관련된 기능에 주로 사용
- 블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해 주는 기능
- 사용자가 입력 form을 통해 정보를 입력하다가 페이지를 벗어난 경우 복구 및 백업을 해주는 기능
- 현재 읽은 글의 히스토리 저장(카운팅, 혹은 읽은 글 표시 등으로 활용)