브라우저 작동원리
웹을 실행하는 환경은 브라우저입니다. 웹을 제공하는 곳은 웹 서버 입니다.
브라우저 주소창에 http://app.softweareengineer.com 같은 웹 주소를 입력하면, 브라우저는 HTTP GET 요청을 http://app.softweareengineer.com의 프론트 서버로 전송한다. 보통 프론트엔드가 있는 웹 서비스의 경우 HTML 파일을 결과로 반환한다.
서버와 주고받은 데이터를 자바스크립트 내에서 HTML로 재구성 하고 파싱과 렌더링 단계를 거쳐 브라우저 화면에 보여준다.
파싱단계에서는
- HTML을 트리 자료구조의 형태인 DOM(Document Object Model)트리형태로 변환한다.
- image, css, script 등 다운로드 해야하는 리소스를 다운로드 한다. css의 경우 다운로드하고 css를 cssom(css object mode)트리로 변환한다.
- 다운로드한 자바스크립트를 인터프리트, 컴파일, 파싱, 실행한다.
렌더링 단계에서는
- DOM 트리와 CSSOM 트리를 합쳐 렌더트리를 만든다.
- 렌더트리의 각 노드가 브라우저의 어디에 어떤 크기로 배치될지 레이아웃을 정한다.
- 사용자는 브라우저에서 HTML문서를 볼수 있다.
SPA
SPA는 싱글 페이지 어플리케이션의 약자로 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 하며 사용자가 임의로 새로고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다.
<그림 176 페이지>
첫 페이지를 로딩했을때 보이는 것은 index.html이다.
<그림>
HTML이 < body></ body> 를 렌덛링 하다 마지막에 bundle.js라는 스크립트를 로딩하게 된다.
이 스크립트는 index.js를 포함하고 있다. index.js의 일부로 ReactDom.render()함수가 실행된다. render()함수가 동적으로 HTML 엘리먼트를 리액트 첫 화면으로 보여준다.
렌더링된 하위 엘리먼트는 render()함수의 매개변수로 들어가는 부분이다.
React
리액트는 한 파일에서 HTML과 자바스크립트를 함께 사용하기 위해 JSX를 확장한다. JSX 문법은 Babel이 빌드시간에 자바스크립트로 번역해 준다.
<그림>
index.js 안의 ReactDom.render() 함수의 첫번째 매개변수는 컴포넌트이며 두번째 매개변수는 root 엘리먼트를 받는다.
첫번째 매개변수로 넘겨진 컴포넌트를 root 엘리먼트 아래에 추가 하라는 뜻이다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
ReactDom.render(
<React.StrictMode>
<App />
</React.StrictMode>
document.getElementById('root')
)
