728x90
최근, 모던 리액트 딥다이브를 읽고 있다. csr, ssr 차이 파트를 읽던 중 "웹 렌더링은 html을 파싱하여 dom을 만들고, css를 파싱하여 cssom을 만든다"라는 구문을 자연스럽게 읽는 순간, 파싱의 정확한 개념이 뭐지란 생각이 들었다.
면접을 준비하거나 그 전에도 자연스럽게 파싱,파싱 했는데 정확히 무슨 개념인지 모르고 사용한 것 같아서 정리해 보려한다.
파싱이란?
- 언어학에서는 문장을 그것을 이루는 구성 성분과 그 사이 위계 질서를 분석하여 문장의 구조를 결정하는 것
- 컴퓨터과학에서는 일련의 문자열을 토큰으로 분해하고 그것들로 이루는 트리를 만드는 것
- 결국, 파싱은 주어진 데이터를 해석하고 분석하여 원하는 형식 또는 구조로 변환하는 작업을 의미한다
파싱은 토큰화, 구문 분석의 단계로 나뉘어진다
- 토큰화: 입력된 텍스트 데이터를 의미 단위로 나누는 과정. 예를 들어, 문장 “Hello, world!“를 토큰화하면 “Hello”, “,”, “world”, “!“와 같은 개별 토큰으로 나뉘어진다.
- 구문 분석: 토큰화된 데이터를 문법적 규칙에 따라 구조화된 트리 형태로 변환하는 과정. 이를 통해 데이터의 계층 구조와 의미를 파악
HTML 파싱
브라우저는 HTML 문서를 받아들여 이를 파싱하여 DOM(Document Object Model) 트리를 생성
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
위 html을 파싱하면 다음과 같은 dom트리가 생성
- html
- head
- title: “Sample Page”
- body
- h1: “Hello, World!”
- head
CSS 파싱
브라우저는 CSS 파일을 받아들여 이를 파싱하여 CSSOM(CSS Object Model) 트리를 생성
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
}
위 css을 파싱하면 다음과 같은 cssom트리가 생성
- body
- background-color: #f0f0f0
- h1
- color: blue
JSON.parse, parseInt
json을 파싱하여 js 객체로 변환, parseInt로 문자열을 숫자열로 변환하는 것도 파싱의 일종이다
//json --> js
const jsonString = '{"name": "Yang", "age": 26}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Yang
//문자열 --> 숫자
const numberString = "123";
const number = parseInt(numberString);
console.log(number); // 123
결국, 파싱은 데이터를 해석하고 구조화하는 중요한 작업이다. 이를 통해 프로그램은 데이터를 이해하고 처리할 수 있게 된다.
728x90
'Web' 카테고리의 다른 글
| [Web] SDK, API란? (0) | 2024.05.06 |
|---|---|
| [Web] 쿠키, 세션 (1) | 2024.04.26 |
| [Web] CSR(클라이언트사이드랜더링), SSR(서버사이드랜더링) (1) | 2024.03.27 |
| [Web] 랜더링이란 무엇인가? (1) | 2024.03.25 |