브라우저의 동작 원리

리액트js를 공부하면서 필요한 브라우저의 동작원리에 대해 한번 공부해보았습니다.

아주 간단하게 기록을 해봤습니다.

저희가 브라우저 주소창에 http://google.com과같은 과같은 웹주소를 입력하면 브라우저는 Http GET요청을

해당 URL의 서버로 전송합니다. 보통 프론트엔드가 있는 웹 서비스의 경우 HTML파일을 결과로 반환합니다.

HTML을 받은 브라우저는 그림처럼 두 단계를 거쳐 텍스트로된 HTML을 브라우저에 보여줍니다. 

첫 번째 단계는 파싱이고, 

두 번째 단계는 랜더링입니다.

파싱은 쉽게 말씀드리면 랜더링의 전처리 단계입니다.

파싱 단계에서 브라우저가 하는 일은 크게 3가지가 있습니다.

• 첫 번째 : 브라우저는 HTML을 트리 자료 구조의 형태인 DOM트리로 변환합니다.
• 두 번째 : 이미지, CSS, SCRIPT 등 다운로드해야하는 리소스를 다운로드 합니다. 특히 CSS의 경우 다운로드 한 후 CSS를 CSSOM 트리로 변환합니다.
• 세 번째 : 다운받은 자바스크립트를 인터프리트, 컴파일, 파싱 및 실행합니다.

파싱을 마친 후 브라우전느 렌더링에 들어갑니다.

랜더링은 첫번쨰로 DOM트라와 CSSOM 트리를 합쳐 랜더 트리를 만듭니다. 

내용인 DOM과 다지인인 CSSOM을 합치는 것입니다.

그런 다음 레이앗웃을 정합니다. 이는 트리의 각 노드가 브라우저의 어디에 배치될지, 

어떤 크기로 배치될지를 정하는 겁입니다.

마지막으로 브라우저 스크린에 렌더 트리의 각 노드를 그려줍니다.

그러면 사용자는 브라우저 상에서 시각화된 HTML파일을 볼 수 있게됩니다.

또 대부분의 브라우저는 개발을 돕는 개발자 툴을 제공합니다.

브라우저 상에서 시각화된 HTML이나 CSS, 자바스크립트 로그를 보고 싶다면 F12를 눌러

개발자 도구를 실행하면 됩니다.

왼쪽은 HTML/ 오른쪽은 CSS

자바스크립트 콘솔 입니다.

개발자 툴을 열면 오른쪽 또는 아래쫏에 디버깅창이 생긴다.