브라우저 동작 원리(쉽게 알아보기)

이 글은 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한

"How Browsers Work: Behind the scenes of modern web browsers"를 인용하고 있습니다.

아무것도 모르는 초보자의 시선에서

하나하나 모르는 용어는 용어대로 찾아가면서

정리해보는 글입니다.

저와같이 아무것도 모르는 초보자를 기준으로 글을 작성했습니다.

부디 이 글에 마지막에는

글을 쓰고 있는 저도, 독자도 어렴풋이라도

브라우저가 어떻게 동작하는지 이해할 수 있었으면 좋겠습니다. 🙏

이 글은 브라우저 동작 원리 5편입니다.

다른 편은 아래 링크나 블로그에서 참조해주세요!

Parser–Lexer combination(파서-렉서 조합)

전문

Parsing can be separated into two sub processes: lexical analysis and syntax analysis.

Lexical analysis is the process of breaking the input into tokens. Tokens are the language vocabulary: the collection of valid building blocks. In human language it will consist of all the words that appear in the dictionary for that language.

Syntax analysis is the applying of the language syntax rules.

Parsers usually divide the work between two components: the lexer (sometimes called tokenizer) that is responsible for breaking the input into valid tokens, and the parser that is responsible for constructing the parse tree by analyzing the document structure according to the language syntax rules. The lexer knows how to strip irrelevant characters like white spaces and line breaks.

Figure : from source document to parse trees

The parsing process is iterative. The parser will usually ask the lexer for a new token and try to match the token with one of the syntax rules. If a rule is matched, a node corresponding to the token will be added to the parse tree and the parser will ask for another token.

If no rule matches, the parser will store the token internally, and keep asking for tokens until a rule matching all the internally stored tokens is found. If no rule is found then the parser will raise an exception. This means the document was not valid and contained syntax errors.

파싱은 어휘 분석과 구문 분석이라는 두 가지 서브 프로세스로 나눌 수 있습니다.

어휘 분석은 자료를 '토큰'으로 나누는 것을 의미합니다.

'토큰'에 대해 앞선 글에서 설명드렸는데요

토큰에 대한 설명은 아래에서 확인해주세요.

파싱 과정에서 데이터를 분석하려면,

데이터를 의미 있는 단위로 분해하여 분석해야 하는데,

데이터를 의미 있는 최소 단위로 분석한 것이 바로 '토큰(Token)'입니다.

한국어에서도 '나는 밥을 먹는다.'라는 문장이

'주어-서술어-목적어'의 단위로 나뉘 듯,

컴퓨터도 데이터를 추출하고 가공할 때

데이터를 의미 있는 최소 단위로 나누는 것입니다.

자바로 예를 들자면,

자바에서 'public class Determination'으로 클래스를 선언했다면,

토큰은 'public', 'class', 'Determination'이 됩니다.

구문 분석은 언어의 구문 규칙을 적용하는 것을 의미합니다.

파서(Parser)는 일반적으로 두 가지 요소로 작업이 나뉩니다.

렉서(lexer) : 자료를 유효한 토큰으로 나눈다. 'Tokenizer'라고 불리기도 한다. 렉서는 의미 없는 공백이나 줄 바꿈과 같은 문자를 제거한다.
파서(parser) : 언어 구문 규칙에 따라 문서 구조를 분석해 파스 트리를 구성한다.

파싱 과정은 반복적인 과정입니다.

파서는 일반적으로 렉서에 새로운 토큰을 요청하고,

토큰을 구문 규칙 중 하나와 일치시키려 시도합니다.

새로운 토큰과 구문 규칙이 일치하면,

토큰에 해당하는 노드가 구문 분석 트리에 추가되고

구문 분석기는 다른 토큰을 요청합니다.

만약 새로운 토큰과 구문 규칙이 일치하지 않으면,

파서는 토큰을 내부에 저장합니다.

파서는 내부에 저장된 모든 토큰과 일치하는 규칙을 찾을 때까지

계속하여 일치하는 구문 규칙을 찾으려고 시도합니다.

규칙을 끝까지 찾을 수 없는 경우,

파서는 예외를 발생시킵니다.

이는 문서가 유효하지 않고 구문 에러를 포함하고 있다는 것을 의미합니다.

Translation(변환)

전문

In many cases the parse tree is not the final product. Parsing is often used in translation: transforming the input document to another format. An example is compilation. The compiler that compiles source code into machine code first parses it into a parse tree and then translates the tree into a machine code document.

Figure : compilation flow

Parsing example

In figure 5 we built a parse tree from a mathematical expression. Let's try to define a simple mathematical language and see the parse process.

Vocabulary: Our language can include integers, plus signs and minus signs.

Syntax:

The language syntax building blocks are expressions, terms and operations.
Our language can include any number of expressions.
An expression is defined as a "term" followed by an "operation" followed by another term
An operation is a plus token or a minus token
A term is an integer token or an expression

Let's analyze the input 2 + 3 - 1.
The first substring that matches a rule is 2: according to rule #5 it is a term. The second match is 2 + 3: this matches the third rule: a term followed by an operation followed by another term. The next match will only be hit at the end of the input. 2 + 3 - 1 is an expression because we already know that 2 + 3 is a term, so we have a term followed by an operation followed by another term. 2 + + will not match any rule and therefore is an invalid input.

많은 경우에 파스 트리는 최종 산출물이 아닙니다.

파싱은 'Translation(변환)'에 자주 사용됩니다.

'Translation(변환)'은 입력 문서를 다른 형식으로 변환하는 것을 의미합니다.

예를 들어 컴파일이 있습니다.

소스 코드를 기계어로 컴파일하는 컴파일러는

먼저 파스 트리로 문서를 분석한 다음 트리를 기계어 코드 문서로 변환합니다.

Parsing example(파싱의 예)

In figure 5 we built a parse tree from a mathematical expression. Let's try to define a simple mathematical language and see the parse process.

Vocabulary: Our language can include integers, plus signs and minus signs.

Syntax:

The language syntax building blocks are expressions, terms and operations.
Our language can include any number of expressions.
An expression is defined as a "term" followed by an "operation" followed by another term
An operation is a plus token or a minus token
A term is an integer token or an expression

이 그림을 기억하시나요 ?

이 그림은 2+3-1에 관한 파싱 트리입니다.

이 식을 이용해 파싱 과정을 살펴보겠습니다.

어휘 : 우리의 언어는 정수, 더하기 기호, 빼기 기호를 포함하고 있습니다.

구문 :

언어 구문은 표현식, 항, 연산자로 이루어져 있습니다.
우리 언어는 제한 없이 표현식을 포함할 수 있습니다.
표현식은 항 뒤에 연산자 뒤에 또 다른 항이 오는 형태입니다.
연산자는 더하기 또는 빼기 토큰입니다.
정수 토큰이나 하나의 표현식은 하나의 항입니다.

규칙과 일치하는 첫 부분 문자열은 '2'입니다.

규칙 5번에 따르면, 2는 항입니다.

두 번째로 규칙과 매치되는 것은 '2 + 3'입니다.

이는 3번 규칙에 따른 것입니다.

입력이 끝나면 따른 규칙과 매치할 수 있습니다.

'2 + 3 - 1'은 표현식입니다.

왜냐하면, 우리는 이미 2 + 3이 '항 + 연산자 + 항' 형태의

표현식이라는 것을 알기 때문입니다.

'2++'는 어떨까요?

이는 '항 + 연산자 + 항' 형태를 만족시키지 못하기 때문에

잘못된 입력이 됩니다.

오늘은 파서와 렉서, 파스 트리의 산출 이후에

진행될 수 있는 프로세스인 Translation,

그리고 간단한 파싱 예를 살펴보았습니다.

다음 글에서는 파싱에 있어 어휘와 구문에 대한

공식적인 정의부터 살펴보면서

글을 이어가겠습니다.

읽어주셔서 감사하고,

내용에 오류가 있을 경우 댓글이나 메일 부탁드리겠습니다.

감사합니다!🙇‍♂️🙇‍♂️

'내가 공부하려고 올리는 > web' 카테고리의 다른 글

브라우저 동작 원리(쉽게 알아보기) - CSS 파싱/렌더 트리/스타일 계산(7) (0)	2021.11.07
브라우저 동작 원리(쉽게 알아보기) - 정규 표현식/BNF/파서의 종류/HTML 파싱(6) (0)	2021.10.05
브라우저 동작 원리(쉽게 알아보기) - Main flow/CSSOM/렌더 트리(4) (0)	2021.09.27
브라우저 동작 원리(쉽게 알아보기) - 렌더링 엔진/DOM/노드(node)(3) (0)	2021.09.26
브라우저 동작 원리(쉽게 알아보기) -크롤링/파싱/토큰 (2) (0)	2021.09.25

내삶발전기록용