브라우저의 작동 방식

브라우저의 기본 기능

• 웹페이지 표시: HTML, CSS, JavaScript 등을 해석하여 웹페이지를 사용자에게 시각적으로 표시합니다.
• 하이퍼링크 제공: 사용자가 다른 웹페이지로 이동할 수 있는 하이퍼링크를 제공하고, 사용자의 상호 작용에 따라 해당 링크로 이동합니다.
• 북마크 및 기록 관리: 사용자가 특정 웹페이지를 즐겨찾기에 추가하거나 방문한 웹페이지 기록을 관리합니다.
• 다양한 확장 기능 제공: 브라우저에는 다양한 확장 기능이 포함되어 있거나 추가로 설치할 수 있습니다.

브라우저의 상위 수준 구조

• 사용자 인터페이스(UI): 주소 표시줄, 뒤로/앞으로 가기 버튼, 새로고침 버튼 등 사용자와 상호 작용하는 부분입니다.
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다.
• 렌더링 엔진: HTML과 CSS를 해석하고 화면에 표시하는 역할을 합니다.
• 네트워크: HTTP 요청과 같은 네트워크 호출을 수행합니다.
• 자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행합니다.
• 자료 저장소: 쿠키, 로컬 스토리지 등과 같은 사용자의 데이터를 저장합니다.

렌더링 엔진

• 기본 흐름 (Main Flow):
  1. HTML 파싱: HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다.
  2. CSS 파싱: CSS 스타일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
  3. 레이아웃(Reflow) 및 페인팅(Paint): DOM과 CSSOM을 결합하여 화면에 표시할 노드들의 위치와 스타일을 계산하고, 이를 기반으로 실제 화면에 그립니다.

기본 흐름 - 파싱

• HTML 파싱 (HTML Parsing):
  • 토큰화(Tokenization): 문자열을 작은 조각(토큰)으로 나누어 처리합니다.
  • 토큰 스테이트(Tokenization State): 특정 토큰의 의미를 정의하는 상태 기계(State Machine)를 사용하여 토큰을 처리합니다.
  • 트리 구축(Tree Construction): 토큰을 사용하여 DOM 트리를 구성합니다.
• CSS 파싱 (CSS Parsing):
  • 토큰화(Tokenization): CSS 코드를 토큰으로 나누어 해석합니다.
  • 파싱(Parsing): 토큰을 기반으로 CSSOM을 생성합니다.

문법 (Grammar):

• HTML 문법: HyperText Markup Language의 약어로, 웹페이지의 구조를 정의하는 마크업 언어입니다. HTML은 요소(Element)와 속성(Attribute)을 사용하여 구성되며, 각 요소는 태그로 표시됩니다.
• CSS 문법: Cascading Style Sheets의 약어로, 웹페이지의 스타일을 정의하는 언어입니다. CSS는 선택자(Selector)와 속성-값 쌍(Property-Value Pair)으로 구성되어 있으며, HTML 요소에 스타일을 적용하는 역할을 합니다.

파서 - 렉서 조합 (Parser-Lexer Combination):

• 렉서 (Lexer 또는 Tokenizer): 소스 코드를 토큰으로 나누는 역할을 하는 도구입니다. HTML, CSS, 자바스크립트와 같은 언어의 렉서는 소스 코드를 토큰 단위로 분해하여 파서에게 전달합니다.
• 파서 (Parser): 토큰을 받아 문법 규칙에 따라 구문 분석을 수행하고, 추상 문법 트리(Abstract Syntax Tree, AST)를 생성합니다. 파서는 렉서에서 받은 토큰의 의미를 해석하여 프로그램이나 문서의 구조를 이해합니다.

번역 (Translation):

• 번역 과정: 렉서와 파서를 조합하여 소스 코드를 해석하고, 그 결과로 AST를 생성합니다. 이후에는 AST를 기반으로 최종 목표로 하는 형태로 변환하는 작업이 이루어집니다.
• 웹 브라우저에서의 번역: 브라우저에서는 HTML, CSS, JavaScript와 같은 웹 기술 언어를 해석하여 화면에 웹페이지를 표시합니다. 이때, 각 언어의 번역 과정이 이루어집니다.

파싱 예 (Parsing Example):

• HTML 파싱 예시: HTML 파서는 렉서를 통해 HTML 문서를 토큰으로 분해하고, 이를 기반으로 HTML 문법 규칙에 따라 문서의 구조를 이해하여 DOM 트리를 생성합니다.
• CSS 파싱 예시: CSS 파서는 CSS 코드를 토큰으로 나누고, 이를 기반으로 CSS 문법 규칙에 따라 스타일 정보를 이해하여 CSSOM을 생성합니다.

어휘 및 구문의 공식적 정의:

• 어휘 분석 (Lexical Analysis): 소스 코드를 토큰으로 분해하는 과정을 말하며, 정규 표현식과 유한 상태 기계(Finite State Machine, FSM)를 사용하여 토큰을 정의합니다.
• 구문 분석 (Syntax Analysis): 언어의 문법 규칙에 따라 토큰을 해석하고, 추상 문법 트리를 생성하는 과정을 말합니다. 이는 Backus-Naur Form(BNF)과 같은 형식으로 언어의 구문을 정의합니다.

파서 유형 (Parser Types):

• 상향식 파서 (Top-Down Parser): 시작 심벌에서부터 토큰을 찾아가는 방식으로, 예를 들어 재귀 하향 파서가 있습니다.
• 하향식 파서 (Bottom-Up Parser): 토큰에서부터 시작해 최종 목표로 가는 방식으로, LR 파서 등이 있습니다.
• 재귀 하향 파서 (Recursive Descent Parser): 함수 호출과 재귀적인 구조를 활용하여 구문을 분석하는 파서입니다. 이는 사람이 직관적으로 이해하기 쉽고 작성하기도 상대적으로 간단한 특징을 갖습니다.