[React] CRA로 만든 React 프로젝트가 브라우저에 렌더링 되기까지의 과정 : blink 엔진과 V8, 그리고 React

이 글에서는 우리가 만든 React 프로젝트가 브라우저에 어떤 순서로 렌더링 되는지 한번 정리해 보려고 한다. (브라우저는 Chromium 기준, React는 CRA로 만든 프로젝트 기준이다.) 우리가 주소창에 주소를 쳤을 때부터 우리 눈에 보이기까지, 렌더링 엔진인 blink와 자바스크립트 엔진인 V8을 거쳐 어떻게 화면에 띄워지는지를 정리해 본 글이다. 각 내용들을 따로 정리하는 것이 아닌 react가 브라우저에 띄워지기까지의 "흐름을" 정리해 보고 싶었기에, 렌더링 파이프라인이 진행되다 V8 엔진이 자바스크립트 코드를 읽기도 하는 등 왔다 갔다 하는 방식으로 글을 작성하였다. 나름 열심히 작성하긴 했지만, 많이 난잡해 보일까 걱정이긴 하다... ㅎ 글 시작 전에 먼저, 이 글의 주제와 연계되는 다른 주제의 내용들은 이 글에서 깊게 다루지 않은 내용이 꽤 있다. 이에 관한 내용은 예전에 정리했던 아래 글들에서 다뤘었다! [HTTP] TCP 커넥션의 핸드 셰이크와 TCP 커넥션 핸...

원문링크 : [React] CRA로 만든 React 프로젝트가 브라우저에 렌더링 되기까지의 과정 : blink 엔진과 V8, 그리고 React