웹 동작 방식
나는 이제껏 웹 서비스 개발 프로젝트만 해왔는데 막상 웹이 브라우저 상에서 어떻게 동작하는지에 대해서는 제대로 모르고 있었다.
물론 그런 걸 몰라도 개발은 할 수 있었지만, 과연 제대로 된 원리와 동작 방식을 모른 채로 좋은 설계를 하고, 좋은 서비스를 만들 수 있을까? 하는 의문이 생겼다. 원리를 알아야 동작 흐름을 알 수 있고, 그래야 더 좋은 결과물을 만들어낼 수 있다고 생각하기 때문에 공부를 해보기로 했다.
웹 페이지가 만들어지는 과정
우선 웹 페이지를 구성하는 기본 요소들은 HTML, CSS, 그리고 JavaScript가 있다.
HTML은 기본 구조, CSS은 디자인, JavaScript는 동적으로 제어할 수 있게 해준다.
웹 페이지가 렌더링되는 과정
- Http response 구문 분석
브라우저가 첫 번째 데이터의 청크를 받으면, 수신된 정보를 구문 분석하기 시작한다.
(구문 분석: 브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계)
요청된 HTML 페이지의 크기가 초기 패킷의 크기인 14kb보다 크더라도, 브라우저는 구문 분석을 시작하고 가지고 있는 데이터 수준에서 렌더링을 시도한다.
→ 웹 성능 최적화에서 웹 페이지의 핵심 구조(템플릿)나 초기 스타일(CSS) 같은 중요한 콘텐츠는 이 안(첫 14kb 패킷 안)에 포함시키는 것이 좋음. 따라서 HTML의 구성이 중요.
ex) "중요한 <style>을 <head>에 인라인으로 넣는다."
"렌더링에 꼭 필요한 CSS, 구조만 먼저 넣고, 나머지는 <link rel="preload">나 <script defer>로 뒤로 미룬다." - DOM 트리 구축
HTML Parser가 작동하여 받은 데이터를 분석하기 시작한다. 이 과정은 단순한 문자열 처리 과정이 아니라, 구조화된 문서 모델인 DOM(Document Object Model)을 생성하는 작업이다.
파싱 흐름은 다음과 같다.
1) HTML 파서가 문자열을 읽으며 "토큰" 생성
ex) <div>, <h1>과 같은 태그
2) 토큰을 바탕으로 노드(Node)를 만들고 트리 구조로 구성
태그들이 중첩 구조일 경우, 부모-자식 관계로 트리가 생성됨. → 노드 수가 많아질수록, DOM 트리를 만드는 데 오래걸림
3) 이렇게 구성된 트리가 곧 DOM
HTML 팟이 도중 <script> 태그가 나오면 기본적으로 파싱이 일시 중단됨.
따라서 <script defer> 또는 <script async> 속성을 활용해 파싱 지연을 막는 것이 좋음. - CSSOM 구축
CSSOM(CSS Object Model)은 CSS를 파싱해서 브라우저가 이해할 수 있는 구조화된 객체 트리로 만든 것이다.
브라우저는 HTML과 함께 CSS 파일 또는 <style> 태그 안의 CSS 코드를 만나면, CSS 파서를 통해 CSSOM을 생성한다.
CSSOM이 생성되는 동안, 프리 스캐너 덕에 Javascript 파일 같은 다른 자원도 다운로드 된다. - Render 트리 구축
DOM에 CSSOM을 적용해 렌더 트리를 구성한다. 렌더 트리는 보이는 요소의 레이아웃을 계산한다. - Painting
Render Tree를 바탕으로 Painting하여 실제 화면에 모든 요소의 시각적인 부분을 화면에 그린다.
https://yuzulike.tistory.com/75?utm_source=chatgpt.com
추가적으로 위의 사이트를 참고해 더 공부해보면 좋을 것 같다.
우선 이렇게 웹 페이지가 렌더링되는 과정을 알아봤는데, 조금 헷갈리는 용어가 있어서 정리해보겠다.
DOM이란?
DOM은 웹 브라우저와 JavaScript가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체
CSSOM이란?
DOM에 CSS가 적용된 객체 모델
웹을 동적으로 제어한다 = DOM을 제어한다
JavaScript는 웹을 동적으로 제어하는 역할을 하는데, 이는 DOM을 제어한다는 걸 의미한다.
SPA vs MPA
SPA는 초기에 모든 리소스를 다운로드하는 방식인데, 이는 초기에 한 번만 App.js, index.html을 파싱한 뒤, 화면에 변경이 있을 때 javascript로 DOM을 동적으로 제어한다.
다시 말하면, 최초에는 JS로 DOM을 만들고, 그 이후에는 React 같은 라이브러리가 가상 DOM diffing 해서 필요한 부분만 DOM을 갱신한다.
MPA는 페이지를 전환할 때마다 전체 DOM이 새로 만들어진다.
React의 렌더링 방식
React는 위에서도 말했듯이, CSR을 수행하는 대표적인 라이브러리이다.
React는 Virtual DOM을 사용한다.
Virtual DOM?
DOM을 직접 조작하는 건 안정성이 떨어지고, DOM Api는 low-level이기 때문에 까다로울 수 있다.
앱의 규모가 커질 수록, 복잡도가 높아지기 때문에 돔을 직접적으로 조작하는 jQuery와 같은 라이브러리는 레거시 취급을 받는다.
이러한 jQuery의 한계점 때문에 Virtual DOM이라는 개념이 생겨났다.
React는 앞서 말했듯이 SPA이기 때문에, index.html 하나롸 렌더링하며, App.js라는 스크립트 파일 하나만 로드하는데, 어떻게 동작하는 걸까? 답은 번들러에 있다.
번들러(webpack)란?
웹 어플리케이션을 동작시키기 위한 리소스들을 하나로 묶고 조합해서 하나의 정적인 결과물을 만드는 도구이다. 하나로 묶어 경량화시켜서 서버의 부하를 줄이고, 로딩시간을 줄일 수 있어 성능적으로 유리하다.
React에서 리렌더링이 일어나는 경우
- Props 변경 시
- State 변경 시
- forceUpdate() 실행 시
- 부모 컴포넌트 렌더링 시
React는 값이 변할 때 화면의 깜빡임이 없이 빠른 속도로 값을 변경시키는데, Virtual DOM이 이를 가능하게 한다.
참고:
- https://developer.mozilla.org/ko/docs/Web/Performance/Guides/How_browsers_work
- https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD