브라우저 동작 원리(쉽게 알아보기) -크롤링/파싱/토큰 (2)

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

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

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

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

정리해보는 글입니다.

 

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

 

부디 이 글에 마지막에는

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

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

 

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

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

• 브라우저 동작 원리 1편

 

파싱(Parsing)과 크롤링(Crawling)

---

동작원리 1편에서 브라우저의 구조를 설명드렸고,

브라우저의 구조는

UI - 브라우저 엔진 - 렌더링 엔진 순으로 되어 있고,

렌더링 엔진 아래에 네트워킹-자바스크립트 번역기-UI Backend가 있으며

지속적인 레이어로 자료 저장소가 있다고 설명드렸습니다.

 

이중 렌더링 엔진을 설명드리며 렌더링 엔진은

HTML과 CSS를 '파싱'한다고 언급했는데,

오늘은 파싱이 무엇인지, 또 파싱과 비슷한 개념인 '크롤링'에 대해서도 알아보겠습니다.

 

 

크롤링(Crawling)

---

갑분 아기사진..?

파싱을 설명하기에 앞서 크롤링에 대해 알아보겠습니다.

크롤링은 사전적인 의미로는 '기어 다니는'을 뜻합니다.

크롤링은 아기가 바닥에 기어다니 듯

웹 공간 안에서 정보 수집을 위해 돌아다니는 모양새를 의미합니다.

 

크롤링은 웹 상의 페이지를 수집하고 분류하는 작업을 하는데

자동화된 로봇들이 웹사이트를 수집, 분류하고,

이후 수집, 분류한 데이터를 저장한 후 나중에 쉽게 찾을 수 있도록

'인덱싱'하는 작업을 진행합니다.

 

 

 

파싱(Parsing)

---

혹시 자바에 대해 공부를 해보신 분이라면

'Integer.parseInt(), float.parsefloat()'과 같이 

String을 형 변환하는 함수를 보신 적 있을 텐데요,

여기서 parse는 문자열 자료를 정수형이나 실수형으로

'가공'하는 역할을 합니다.

 

마찬가지로 웹에서 '파싱'은 특정 페이지에서

사용자가 원하는 데이터를 특정 패턴이나 순서로 추출해

정보를 가공하는 것을 말합니다.

 

따라서 앞선 크롤링과 비교해보자면,

 

크롤링은 웹 사이트를 탐색해 자료를 수집, 분석하고

저장하는 역할을 하는 것이고,

 

파싱은 크롤링해서 저장한 데이터에서

필요한 정보를 추출하고, 정보를 가공하는 것을 의미합니다.

 

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

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

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

 

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

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

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

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

 

자바로 예를 들자면,

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

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

 

토큰은 후에 본문 내용을 설명하는 과정에서도 언급되기 때문에

이해하고 넘어가시는 것이 좋습니다.

 

---

이번 글에서는

'파싱'과 '크롤링' 그리고 '토큰'에 대한 기본적인 개념을 알아봤습니다.

 

다음 글에서는 브라우저 동작 원리에 대한 본문 해석과 개념 설명을

다시 진행하도록 하겠습니다.

 

읽어주셔서 감사합니다.🙇‍♂️🙇‍♂️

오류 발견 시 댓글이나 메일 주세요!!