드디어 6학기가 끝났다
os가 너무 배우기 싫었지만 하다 보니 재밌기도 하고 컴퓨터 동작에 대해서 깊이 있게 알게 되었던 것 같다.
드디어 빨리 배우고 싶었던 리액트! 그리고 방학에 해야할 프로젝트도 리액트로 만들기로 하기도 했고!
아무튼 이제 리액트의 세계로 들어가려고 한다
리액트를 시작하기 전에 먼저 브라우저란 무엇인지 그리고 chrome 브라우저와 nodejs에서 쓰이는 자바스크립트 엔진 V8에 대해서 공부 해야겠다. (이번에 배운 os 지식이 도움이 될까...?)
브라우저
브라우저는 사용자가 요청한 자원을 서버에 요청하고 브라우저에 렌더링해주는 응용프로그램이다. 응용프로그램이므로 사용자의 머신의 os위에서 수행된다. 사용자가 브라우저를 통해서 요청하는 자원은 주로 html, css, js로 웹페이지이고 요청하는 주소는 우리가 흔히 아는 url이다.
브라우저는 과거에는 브라우저끼리 경쟁하면서 독자적인 방법으로 여러 플러그인들을 넣기도하면서 웹표준을 지키지 않았었지만 최근에는 대부분의 브라우저들이 웹표준 명세를 따른다.
그러한 맥락에서 일반적으로 브라우저의 기본 구조는 다음과 같다.
user interface 먼저 보자. user interface는 지금 화면에 보이는 상단의 주소창이나 상단바 등등 사용자들이 볼 수는 있지만 조작할 수 없는 요소들이다. 가장 밑에 있는 UI backend의 도움을 받는다.
browser engine은 user interface와 rendering engine의 중간자 역할을 한다. 예를 들면 현재 화면에서 새로고침 버튼(user interface)을 누르면 browser engine이 rendering engine이 새로 고침 명령을 수행해서 다시 그려줄 수 있도록 중간 다리 역할을 해주는 것이다.
rendering engine은 HTML, CSS, JS를 파싱해서 브라우저에 화면을 그려주는 일을 한다. 즉 rendering engine은 html, xml 문서와 이미지 등을 그릴 수 있다. 크롬은 webkit이라는 rendering engine을 사용한다.
networking layer는 말그대로 브라우저가 다른 서버와 networking 할 수 있도록 해주며
javascript interpreter는 말그대로 javascript를 interpret 해준다.
data persistence는 흔히 들었던 쿠키, local storage 등과 관련된 부분이라고 생각하면 된다.
렌더링 엔진에 대해서 자세히 알아보자.
chrome의 렌더링 엔진인 webkit의 flow는 다음과 같다.
웹사이트에 접속하면(=브라우저가 서버에 자원을 요청하고 브라우저가 웹페이지 html을 받으면) 렌더링 엔진은 html을 파싱을 하고 그로부터 DOM 트리를 만든다.
그런데 이때!!! html 파서가 파싱을 하다가 javascript를 만난다면 어떤 일이 벌어질까?
즉, html 파서가 script 태그를 만난다면 어떤 일이 벌어질까?
html 파서는 위의 컴포넌트 중 자바스크립트 엔진으로 제어 권한을 넘긴다.
제어 권한을 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드를 파싱, 그리고 기계어로 컴파일해서 실행한다. 즉, 렌더링 엔진은 파싱을 하는 순서에 따라서 동기적으로 html 과 javascript를 실행한다는 것이다.
javascript로 코딩할 때 id로 html 을 찾는데 찾지 못하는 에러를 마주한 적이 있을텐데 dom 트리로 그려지지 않은 시점에 javascript가 작동하기 때문이다. 이러한 에러가 렌더링 엔진이 코드 상 동기적으로 html과 javascript를 실행한다는 방증이다. ( 따라서 body 태그가 끝난 이후에 script 태그를 사용하는 것이 국룰...)
추가적으로 css도 받았다면 css 도 파싱을 하고 스타일 규칙을 생성해서 DOM트리와 CSS를 binding 해서 렌더 트리를 만든다.
렌더 트리는 색상과 면적 같은 시각적인 속성을 갖는 사각형의 객체를 포함하고 트리의 순서대로 화면에 표시 된다.
렌더 트리가 생성되면 배치(layout)를 하는데 이는 트리의 각 노드가 화면의 정확한 위치로 표시되는 것을 말한다.
배치는 <html> 태그를 root로 하는 recursive process이다.
배치 이후에 최종적으로 UI 백엔드가 작동해서 렌더 트리의 각 노드를 순회하면서 실제 painting을 한다.
여기까지가 렌더링 엔진의 flow이다. 다만 렌더링 엔진은 더 빠른 렌더링을 위해 모든 html을 다 파싱하는 것을 기다리고 배치와 painting을 하는 것이 아니라 배치와 painting을 동시에 병렬적으로 수행한다는 것을 알아야 한다.
이제 이러한 브라우저에서 v8엔진이 어떻게 javascript를 작동시키는지를 알아보자.