React에 Node.js와 CRP

<Node.js란?>

리액트 프로젝트를 만들기 위해서 Node.js와 NPM을 먼저 설치해야합니다. 
크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 것에서도 자바스크립트를 사용하여 연산 할 수 있습니다. 

 

<React 설치 시 Node.js가 필요한 이유>

리액트 앱은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다. 이 때 사용하는 개발 도구는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때 마다 웹 브라우저를 리로딩하는 등 여러 기능을 지닌 웹팩 등이 있습니다. 

 

<웹 페이지 빌드 과정 (중요 렌더링 경로 / Critical Rendering Path CRP)>

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있습니다. 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정입니다. 

1. 웹 페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작됩니다. 서버는 응답 헤더 또는 데이터로 HTML을 반환합니다. 
2. 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정합니다. 이때 DOM Tree 생성됩니다.
3. 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘첸츠와 스타일 정보를 모드 포함하는 최종 렌더링 트리를 출력합니다. (Render Tree 생성하게 됩니다)
4. 브라우저가 페이지에 표시되는 각 요소의 트리와 위치를 계산하는 단계입니다. Layout (reflow)
5. 실제 화면에 그리기 Paint

어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render Tree가 재생성 됩니다. 즉 모든 요소들의 스타일을 다시 계산하게 됩니다. 인터렉션이 많은 페이지는 조작 비용이나 운영 비용이 상당하므로 가상 돔 (Virtual DOM)으로 보완하는 것입니다. 

 

<CSS Object Model (CSSOM>

CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함합니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM 그렇지 않아 DOM과 유사하지만 다릅니다. CSSOM이 완료 될때까지 콘텐츠를 렌더링 할 수 없습니다. 

 

참고 자료 :
https://web.dev/learn/performance/understanding-the-critical-path

중요 경로 이해  |  web.dev

https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

중요 렌더링 경로 - 웹 성능 | MDN