파서(Parser)
HTML, XML, 프로그래밍 언어 소스 코드, JSON 등을 받아서 의미 있는 구조(Tree 등)로 만드는 역할
파서(Parser)는 입력된 텍스트 데이터를 일정한 문법에 따라 구조화된 데이터로 분석하고 변환하는 프로그램 또는 알고리즘입니다.
- 웹 브라우저 핵심: HTML, CSS, JS 모두 파싱을 통해 트리 구조로 구성됨
- 컴파일러의 핵심: 모든 프로그래밍 언어의 컴파일 과정에서 필수
- 데이터 처리: XML, JSON, Markdown 등 구조화된 데이터 해석에 필수
파서의 위치: 전체 처리 흐름에서의 위치
[원시 문자열 입력]
↓
Tokenizer / Lexer
↓
Parser
↓
[구문 트리(Syntax Tree) 또는 DOM Tree 생성]- Tokenizer (또는 Lexer)
- 텍스트를 의미 있는 최소 단위인 "토큰(token)"으로 나눔
- 예: <html lang="ko"> → <, html, lang, =, "ko", >
- Parser
- 그 토큰들이 정해진 문법에 맞는지 검사하고, **구조적 데이터(Tree)**로 변환
- 예: <html>...</html> → 루트 노드로 html을 만들고 자식 요소들을 계층 구조로 구성
컴파일러 이론에서의 Tokenizer, Lexer, Parser
컴파일러는 소스 코드를 기계어로 번역하는 과정에서 아래 3가지 주요 단계를 거칩니다.
Tokenizer + Lexer = 어휘 분석, Parser = 구문 분석
| 1단계 | Tokenizer (Scanner) | 입력 문자열을 의미 있는 단위인 토큰(token)으로 분리 |
| 2단계 | Lexer (Lexical Analyzer) | 각 토큰의 의미를 분석해 문법 범주(class)를 부여 (예: 식별자, 연산자 등) |
| 3단계 | Parser (Syntax Analyzer) | 문법에 따라 토큰을 조합해 트리 구조(Syntax Tree)로 변환 |
파서의 주요 기능
| 기능 | 설명 |
| 문법 검사 | 태그나 기호가 올바르게 열리고 닫혔는지 확인 (<tag>...</tag>) |
| 계층 구조 생성 | 중첩 구조를 트리로 구성 (ex. DOM 트리) |
| 오류 감지 | 문법 오류(잘못된 중첩 등)를 식별 |
| 구조화된 결과 생성 | Abstract Syntax Tree(AST), DOM, JSON 등으로 변환 가능 |
파서의 종류
| 구분 | 종류 | 설명 |
| 사용 목적 | XML 파서 | XML 구조 문서를 읽고 DOM 트리 생성 |
| JSON 파서 | 문자열 JSON을 객체로 변환 (JSON.parse) | |
| 프로그래밍 언어 파서 | 소스 코드에서 AST 생성 | |
| 분석 방식 | Top-down parser | 시작 기호에서 문장을 내려가며 분석 |
| Bottom-up parser | 입력에서부터 문법 구조를 올라가며 분석 |
XML 파서 작동 방식 예시
<HTML lang="ko">
<BODY>
<P>Hello</P>
</BODY>
</HTML>
파서 처리 과정
- 시작 태그: <HTML lang="ko"> → 태그명과 속성 파싱
- 중첩 구조 감지: <BODY>, <P> 등을 자식 노드로 연결
- 텍스트 노드 처리: Hello는 P 태그의 value로 처리
- 종료 태그 확인: </P>, </BODY>, </HTML> 순으로 닫힘 확인
- 트리 구조 생성: 전체 구조를 JSON/DOM처럼 저장
브라우저에서의 파서: DOM Parser
브라우저는 HTML 문서를 파싱하여 DOM(Document Object Model)을 생성합니다.
처리 과정
- HTML 소스를 한 줄씩 읽으며 토큰화
- Lexer가 태그명, 속성 등을 분석
- Parser가 태그의 중첩 관계를 기반으로 DOM 트리를 생성
생성된 트리는 document.body, document.querySelector() 등으로 접근 가능합니다.
브라우저의 DOM 파서는 비정상적인 HTML 구조도 자동 보정하는 능력이 있고, 각 요소는 Node 객체로 추상화됩니다.
정규표현식과 파싱의 관계
정규표현식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 추출, 대체하는 데 사용하는 강력한 도구입니다. 파서를 구현할 때는 특히 Tokenizer와 Lexer 단계에서 유용하게 활용됩니다.
파싱과의 관계
| 구성 요소 | 정규표현식 활용 | 설명 |
| Tokenizer | tagRegex로 XML을 태그/텍스트로 분리 | <[^>]+> ^<]+ |
| Lexer | parseAttributes() 등에서 속성 추출 | name="value" 형태 탐색 |
| XPath | findXPath()에서 태그명+인덱스 분해 | TAG[2] 형태 분리 |
개발자 도구에서 XPath
Chrome 등의 개발자 도구에서는 HTML 요소를 마우스 오른쪽 클릭 > "Copy > Copy XPath" 하면 해당 요소의 XPath가 나옵니다. 브라우저에서는 이 XPath를 기준으로 document.evaluate()로 노드를 정확히 찾을 수 있습니다.
XPath: /html/body/div/p
<body>
<div>
<p>Hello</p>
</div>
</body>
'CS' 카테고리의 다른 글
| 프로세스 메모리 관리 모델과 가상 메모리 구조 (6) | 2025.07.17 |
|---|---|
| JSON과 XML: 웹 데이터 교환 방식 비교 분석 (1) | 2025.07.16 |
| 리눅스(Linux)란 무엇인가? (0) | 2025.07.16 |
| git vs GitHub (0) | 2025.07.15 |
