브라우저

1. 브라우저(Browser)

• 웹 브라우저, 웹 탐색기라고도 함
• 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반 소프트웨어 프로그램
• 페이지를 다운로드 하기 위해, 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신
• 웹(Web): 월드 와이드 웹(World Wide Web)의 풀네임
  • 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공함
  • 웹 페이지(Web Page): HTML 언어를 사용하여 작성된 문서 형태로 제공되는 문서들
  • 웹 사이트(Web Site): 웹 페이지 중에서 서로 관련된 내용으로 작성된 웹 페이지들의 집합

브라우저의 특징과 웹의 동작 원리

 

1-1. 브라우저 구조

브라우저의 구조의 도식화

 

붉은 부위가 사용자 인터페이스(UI)

• 사용자 인터페이스(User Interface)
  • 가장 유저와 밀접하게 맞닿아있는 부분
  • 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등, 관련 GUI 부분을 통칭
• 브라우저 엔진(Browser Engine)
  • 레이아웃 엔진(Layout Engine)이라고도 함. 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 역할
  • HTLM 문서와 기타 자원의 웹페이지를 사용자의 장치에 시각 표현으로 변환, 문서 객체 모델(DOM) 자료 구조를 구현
  • 렌더링 엔진(Rendering Engine)과 밀접한 연관이 있어 보통은 브라우저 엔진과 렌더링 엔진을 묶어 브라우저 엔진으로 부름
  • 유명 브라우저 엔진들
    • 게코(Gacko): 파이어폭스에 탑재
    • 웹킷(Webkit): 사파리에 탑재
    • 블링크(Blink): 크롬, 오페라에 탑재
    • 트라이던트(Trident): 인터넷 익스플로러, 아웃룩 익스프레스, 마이크로소프트 아웃록 등에 탑재
    • 엣지HTML(Edge HTML): 마이크로소프트 엣지 스파르탄 버전까지 탑재
• 렌터링 엔진(Rendering Engine)
  • 요청한 컨텐츠를 화면에 출력하는 역할
  • HTML, CSS 등을 파싱하여 최종적으로 화면에 그려주며 HTML 및 XML 문서와 이미지 표시 가능
• 통신(Networking)
  • HTTP 요청과 같은 네트워크 호출에 사용.
• 자바스크립트 해석기(JavaScript Interpreter)
  • 자바스크립트는 코드를 위에서 아래로 한 줄씩 파싱하는 언어이기 때문에 자바스크립트 코드를 해석하고 실행하는 자바스크립트 해석기가 필요에 의해 등장
  • 다양한 자바스크립트 엔진(자바스크립트 해석기)가 존재함
    • Rhino: 모질라 재단 운영. 자바로 개발됨
    • SpiderMonkey: 최초의 자바스크립트 엔진. 파이어폭스를 지원
    • V8: 구글이 개발. 크롬의 자바스크립트 엔진.
    • JavascriptCore: 애플에서 개발. 사파리와 React Native App 지원
    • Chakra: 마이크로소프트 개발, Edge 브라우저 지원

 

CLI 중 하나인 터미널

• UI 백엔드 
  • 렌더링 엔진이 분석한 Rendering Tree를 브라우저에 그리는 역할
  • Select, Input 창 같은 기본적인 위젯 그림
  • 여기서 말하는 UI는 사용자와 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 말함
  • 명령어 라인 인터페이스(Command Line Interface), 일괄 처리 인터페이스(Batch Interface) 등을 이용해 다룸
• 자료 저장소
  • 웹 저장소(Web Storage, 이하 웹 스토리지)
  • 직접 데이터를 저장할 수 있게 함
  • 좀 더 많은 양의 정보를 안전하게 저장할 수 있게 함
  • 네트워크 트래픽 비용 줄어즘
  • 오리진(도메인(domain)과 프로토콜(protocol) 한 쌍으로 이루어진 식별자)마다 단 하나만 존재
  • 영구적인 저장소인 로컬 스토리지(localStorage)
    • 보관 기한이 없는 데이터를 저장
    • Windows 전역 객체의 localStorage라는 컬렉션을 통해 저장과 조회가 가능
    • 도메인 마다 별도의 localStorage가 생성 => 도메인만 같으면 전역으로 데이터의 공유가 가능
  •  임시적인 저장소인 세션 스토리지(sessionStorage)
    • 하나의 세션만을 위한 데이터를 저장
    • 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지되기 때문에 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라짐
    • 저장과 조회는 Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 이루어지며 도메인별로 별도로 생성됨