1월 18일 여정 10일차이다.

오늘의 Today I Learned

Problem

오늘 자바스크립트 공부를 하다가 '파싱'이라는 단어에 궁금증이 생겨 깊게 공부해보았다.

Try

기본적으로 스크립트 파일을 읽어올때, 파싱한다 라고 배웠다. 그러나 보다 더 깊이 들어가기 위해 구글에 검색을 여러번 시도해 보았다.

Solve

1. 브라우가 랜더링을 할때, HTML,CSS 파일도 파싱을 한다고 한다. HTML은 파싱 후에 DOM(Document Object Model)이라는 것을 구축하게 된다.
   DOM은 어떻게 보면 '화살표'이다. 각각의 요소에 접근하는 방법을 제공하는 화살표라고 생각하면 편하다.

2. 그 다음에는 CSS를 파싱한다. 그리고 CSSOM트리를 구축한다. CSSOM도 DOM이랑 비숫하다. 결국 자료를 구조화 해놓은 것이다.

3. 이후에 자바스크립트 파일을 실행한다. 그리고 아까 위에서 파싱한 CSSOM과 DOM으로 랜더트리라는 것을 구축하게 된다. 랜더트리는 간단하게 말해서 CSSOM과 DOM을 합쳐놓은 것이다. 랜더트리는 각 페이즤 레이아웃을 계산하는데 사용된다고 한다.

4. 랜더트리가 구축되면 뷰포트를 기반으로 Layout이 (위치와 크기가 계산된다.)형성된다.
   그리고 Layout을 기반으로 화면에 나타난다.

Knew

사실 너무 깊게 공부한 것일 수도 있다. 하지만 파싱이라는 단어가 자주 보이고 들리는 만큼 중요한것은 확실하다. 또한 브라우저에서 랜더링 할 때, 크롬은
블링크(Blink)라는 랜더링 엔진을 사용한다고 한다.

마지막으로

프론트엔드 개발자가 될 사람으로써 이 내용은 왠지 모르게 알고 있어야 할 것 같다.