STUDY - WEB

수현·2023년 7월 31일

📒 브라우저의 작동 원리

📕 웹 브라우저 개념

동기(Synchronous)적으로 (HTML+CSS), JavaScript 언어를 해석하여 화면에 보여주는 응용 소프트웨어
웹 브라우저가 웹 서버에 웹 페이지를 요청하면 서버는 응답하고, 브라우저는 해석한 후 사용자에게 보여줌
웹 브라우저 종류 (사용 렌더링 엔진)
- 네이버 웨일
- 파이버폭스 (게코(Gecko) 엔진)
- 사파리 (웹킷(Webkit) 엔진)
- 크롬 (블링크 엔진)

📖 참고 📖 크롬 특징
- 웹킷을 사용하다가 웹킷을 Fork하여 블링크 엔진을 자체적으로 구현해 사용
- 다른 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스 유지 (각 탭마다 독립된 프로세스로 처리)

📕 브라우저 구성요소

(1) 사용자 인터페이스
- 사용자 접근 가능 영역
- 요청한 페이지를 보여주는 창을 제외한 모든 영역
- 🗒️ 예시
  - URI 입력하는 주소 표시줄
  - 이전/다음 버튼
  - 북마크 메뉴
  - 새로 고침 버튼
  - 홈 버튼
(2) 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
- Data Storage 참조하여 로컬에 데이터 쓰고 읽는 작업
(3) 렌더링 엔진
- 웹 서버로부터 요청하여 응답 받은 HTML 문서를 파싱하여 웹 브라우저 상에 나타냄
- 🗒️ 예시 : 브라우저가 서버로부터 HTML 문서를 받을 경우
  ➡️ 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(parsing)됨
  ➡️ DOM 트리와 CSSOM 트리로 변환되고, 렌더 트리로 결합함
  ➡️ 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타냄
(4) 통신
- HTTP 요청 같은, 서버와 통신이 가능하게 하는 네트워크 호출에 사용
(5) 자바스크립트 해석기
- 자바스크립트 코드 해석 후 실행
(6) UI 백엔드
- select, input 등 기본 위젯을 그리는 인터페이스
(7) 자료 저장소
- Cookie, Local Storage, Indexed DB 등 브라우저 메모리 활용하여 저장

📕 브라우저 동작 과정

(1) 서버에서 응답 받은 `HTML 데이터` 파싱 ➡️ `DOM Tree` 생성

무엇을 그릴지 결정

🗒️ 예시 🗒️ : 브라우저 주소창에 url을 입력할 경우
브라우저는 해당 서버에 요청 보냄

서버는 응답으로 HTML 문서 전달

브라우저가 HTML 문서를 하나씩 파싱하고, 데이터를 화면에 그리는 과정 시작됨

미디어 파일을 만나면, 추가로 요청 보내 받아옴

JavaScript 파일 만나면 해당 파일 받아와 실행할 때까지 파싱 멈춤
html 예시
<html>
<head>
	<meta charset="utf-8">
	<link href="./style.css" rel="stylesheet">
</head>
<body>
  <p>Hello, <span>web performance</span> students</p>
  <div>
      <img src="./image.png">
  </div>
</body>
</html>
- 브라우저가 HTML 바이트 데이터를 지정된 인코딩(UTF-8)에 따라 문자열로 변환
- 문자열을 HTML 표준에 따라 토큰(Token)으로 변환
  - <html> ➡️ StartTag: html, </html> ➡️ EndTag: html로 변환
- 토큰을 노드로 바꾸는 과정
  - StartTag:html ➡️ html 노드, EndTag: html 이전 까지 들어오는 토큰을 html 자식 노드로 넣음
  - Tree 모양의 DOM 완성

(2) 파싱하는 중 `CSS 파일` 링크 만나면 `CSS 파일` 요청해서 받아서 ➡️ `CSSOM` 생성

어떻게 그릴지 결정

🗒️ 예시 🗒️

HTML 파싱 중 CSS 링크 만나면 CSS 파일 요청 후 받아옴

HTML 파싱과 유사한 과정으로 Tree 형태의 CSSOM 생성

특성상 자식 노드가 부모 노드의 특성을 계속 이어받는(cascading) 규칙 추가됨 (이외 HTML과 동일)

(3) `DOM Tree`와 `CSSOM`이 만들어지면 ➡️`Render Tree` 생성

화면에 그려질 것 결정

🗒️ 예시 🗒️

DOM + CSSOM 합쳐서 RenderTree 생성

DOM Tree 중 화면에 실제로 보이는 것만으로 생성

CSS에서 display: none의 경우는 포함되지 X

HTML의 태그 안의 내용의 경우 포함되지 X

(4) `Render Tree`에 있는 각 노드가 화면의 어디에 위치할지 계산하는 Layout 과정

🗒️ 예시 🗒️

Render Tree에 있는 각 노드들이 화면의 어디에 위치할지 계산

CSSOM의 스타일 정보로 어떻게 생길지는 알지만,

CSS Box model 사용하여 현재 viewport 기준으로 실제로 놓으려면 어디에 둘지 계산 (position, width, hegiht 등 위치)

(5) 렌더링 트리 그리기

화면에 실제 픽셀을 Paint

🗒️ 예시 🗒️

visibility, outline, background-color 등 눈에 보이는 픽셀 그려짐

Render Layer이 2개 이상이면, 각 Layer를 paint한 뒤 하나의 이미지로 Composite하는 과정을 추가 후 화면에 그려짐

📕 렌더링 엔진 동작 과정

(1) HTML 문서 파싱하고, 해당 내부에서 태그를 DOM 노드로 변환함
- 그 다음 외부 CSS 파일과 함께 스타일 요소도 파싱
(2) 스타일 정보와 HTML 표시 규칙으로 렌더 트리 형성
- 색상 또는 면적과 같은 시각적 속성이 있는 사각형 등을 정해진 순서대로 화면에 표시
(3) 렌더 트리 배치
- 각 노드가 화면의 정확한 위치에 표시되는 것
(4) 렌더 트리 그리기
- UI 백엔드에서 렌더 트리의 각 노드들로 형상을 만들어 냄
빠르게 내용을 표시하기 위해 (1), (2) 기다리지 않고, (3), (4) 먼저 시작

📖 참고 📖 웹킷 동작 과정

📖 참고 📖 파싱

브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 과정

문서를 문맥 자유 문법에 따라 변환 ➡️ 파싱 트리 or 문법 트리

문서(소스 코드) ➡️ 어휘 분석(공백, 줄바꿈 등 제거) ➡️ 구문 분석 ➡️ 파싱 트리 ➡️ 변환 ➡️ 기계코드

📖 참고 📖 DOM (문서 객체 모델, Document Object Model)

애플리케이션의 UI, HTML파일의 자바스크립트 표현

웹페이지가 화면에 로딩되면, 브라우저는 페이지의 문서객체모델(DOM) 생성

W3C의 명세에 정해져 있음

DOM요소 + 속성 노드의 트리 = 파싱 트리

🗒️ 예시
 <html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>  

📕 React 렌더링 방식 차이점

1) 리렌더링 방식

JS 브라우저 : render tree 다시 생성 ➡ Reflow/Repaint
- reflow : 변경이 필요한 렌더 트리에 대한 렌더링 트리 생성과 레이아웃 과정 다시 수행 (re-layout)
- repaint : 새로운 결과를 화면에 그리기 위해 다시 페인팅 단계 수행 (redraw)
React 브라우저 : 전체를 가상 DOM에 리렌더링하고, 이전 가상 DOM과 내용 diff 후 바뀐 부분 한번에 실제 DOM에 적용
- reflow와 repaint 최소화

2) Virtual DOM

개념
- DOM : 애플리케이션의 UI의 상태가 변경될 때마다 DOM은 트리형태라, 특정 노드를 찾아 수정/제거/삽입 가능
  ➡ DOM 자주 조작시 성능에 영향으로 속도 저하
- Virtual DOM : 실제 DOM에 접근하여 조작하는 대신, 추상화한 가상 DOM 사용
과정
- (1) 데이터 업데이트시 전체 UI를 Virtual Dom에 리렌더링함
- (2) 이전 Virtual Dom에 있던 내용을 현재 Virtual Dom에 적용함 (diffing)
- (3) 바뀐 부분만 실제 DOM에 적용

📒 Web Server vs Web Applicatin Server

📕 개념

Web = World Wide Web 의 약자로서, 인터넷을 기반으로 사용되는 서비스이다. WWW or W3 라고 많이 불려진다.

기본적으로 웹의 3대 요소에는 URI(주소), HTML(내용), HTTP(통신 규약)등 3개의 구성요소를 가지고 있다.

URI : Uniform Resource Identifier 로서 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열로서, 주소를 나타내고 있다.

HTML : Hypertext Markup Language 로서 웹 문서의 구조를 만들기 위한 언어로서, 정적인 컨텐츠를 담당하고 해당페이지의 내용을 담고 있다. HTML 은 Markup Language 로서 Programing Language가 아니다.

HTTP : Hyper text Transfer Protocol 로서 웹 상에서 정보를 주고 받을 수 있는 프로토콜로서 일종의 통신 규칙 이다.

server = 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템.

1. `Web Server` = 클라이언트에게 인터넷을 통해 웹 서비스를 제공하는 컴퓨터로서 정적인 컨텐츠들만 사용자에게 제공할 수 있다.

2. `Web Application Server` = Web Server + Web Application 이다.

Web Application은 웹에서 실행되는 응용 프로그램으로서, 웹 애플리케이션이 서버환경을 만들어 동작하는 기능을 제공하는 소프트 웨어.
필요한 동작을 수행하고 결과물을 웹 서버로 전달하는 역할을 한다. (간단히 프로그램 실행시, 데이터베이스에 접속하는 기능을 제공하고 비즈니스 로직 수행이 가능해 진다.)

변화하는 정보를 사용자에게 제공한다. ⇒ WAS

정적인 이미지와 같은 데이터를 사용자에게 제공한다. ⇒ WS

📕 정적 웹 페이지 (Static Web Page) vs 동적 웹 페이지(Dynamic Pages)

Web Server 에 미리 저장된 파일이 그대로 사용자에게 전달되는 웹 페이지 이다.

→ HTML, CSS, JS, IMG가 예시이다.

⇒ 클라이언트에 요청에 따라 저장된 파일을 응답하므로 빠르다는 장점이 있지만 But 저장된 데이터 이외의 데이터는 보여줄수 없어 서비스가 한정적 이라는 단점이 있다.

Web Server에 있는 데이터들을 스크립트에 의해 가공처리 한 뒤 생성되어 전달하는 웹 페이지 이다.

→ JSP, php, aps와 같은 페이지 생성 가능

⇒ 클라이언트의 요청에 따라 C, U, D가 가능하고, 동적으로 데이터를 처리하므로 여러 서비스를 제공할수 있다는 장점 이 있지만, But 처리하는 비즈니스 로직을 가지고 있어 이를 처리하는 Web Application Server가 필요하므로 비용적 단점이 있다.

📕 Web Server 와 Web Application Server

1. Web Server

하드웨어 적 의미의 WebServer : Web 서버가 설치되어 있는 컴퓨터.

소프트웨어 적 의미의 WebServer : 웹 브라우저 클라이언트로부터 HTTP 요청을 받아 정적인 페이지를 제공하는 컴퓨터 프로그램

HTTP 프로토콜을 기반으로 클라이언트의 요청을 서비스하는 기능을 담당한다.
1. 정적인 컨텐츠(이미지)의 요청이 들어온다면 WAS를 거치지 않고 바로 사용자에게 제공해준다.
2. 동적인 컨텐츠의 요청이 들어 온다면, WAS에게 요청을 보내고 해당 응답을 받아 사용자에게 전달 해준다.
예시
1. Apache Server, Nginx, IIS등 이 있다.

2. Web Application Server

Web Server + Web Container 로서 DB조회나 다양한 비즈니스 로직을 처리하여 동적인 컨텐츠를 제공하기 위해 만들어진 Application Server이다.

자바 개발자들은 Web Application Container 라고도 불린다. ( 웹 애플리케이션이 배포되는 공간 이므로)

HTTP 를 통해 컴퓨터나 장치에 애플리케이션을 수행하는 미들웨어 이다.
WAS 는 Web Container or Servlet Container 라고도 부른다.

Container → JSP Servlet을 실행시킬 수 있는 소프트 웨어
WAS의 대표적인 기능으로는 DB 접속과 비즈니스 로직 수행 등이 있다.
예시
1. Tomcat, JBoss, Jeus, Web Sphere

3. 예시

사용자가 URI를 통해 서버에 이미지를 요청할때 웹 서버의 경우 어떠한 동작을 요구하는 것이 아닌 웹 서버에 저장되어 있는 이미지를 사용자에게 응답해준다면 끝이다. 이러한 과정에서는 WAS 까지 요구되지 않으므로 빠른 처리가 가능하다.
하지만 예를 들어 구구단을 사용자가 요청한다고 생각해보자, 정적인 페이지만 제공하는 Web Server의 경우 반복문을 돌릴수 없다. Why? 응답으로 보내는 HTML 의 경우 Programing language가 아니라, 구조를 잡는 Markup language 로서, 일반적인 For 문을 돌릴수없다. 만약 그렇게 되면 해당하는 응답에 대한 모든 페이지를 만들어놓고 처리를 해야하지만, 사실상 불가능 하다. 따라서 Web Application Server의 경우 Java와 같은 Programing language로 구성되어 있어, for 문을 돌려 나온 결과를 처리 할 수 있어 매우 효과적 이다.
따라서 정적인 페이지에 대한 요청이 들어올땐 Web Server 가 처리를, 동적인 요청이 들어 올땐 Web Application Server가 처리를 해야 한다.

📕 Web Server Architecture

Web Server 구조는 여러가지 구조를 가질수 있지만, 일반적인 구조의 경우
- Cient → Web Server → Web Application Server → DB 구조를 가지고 있다.

Web Application Server 와 Web Server를 공부하면서 가장 궁금했던 부분이, 그렇다면 Web Application Server는 Web Server를 포함하고 있는데 그냥 WAS 만 사용하면 안되나? 단지, 속도 차이 때문에 그런것인가? 에대한 의문이였는데. 정확한 해답을 이해할수 있었다.

보통 일반적인 웹 서버의 구조의 경우 WAS 앞에 웹서버를 두어 분산 처리를 한다.

WAS 의 경우 DB 조회나, 다양한 비즈니스 로직을 처리하는 대에 집중을 해야하고, 웹 서버의 경우 정적인 컨텐츠에 대한 요청을 맡기며 서로 기능을 분리 해주어야 서버의 부하를 방지하여 효율적인 서버 운영이 가능해 진다. 만약 모든 요청을 WAS 가 관리하게 된다면, 일반적인 이미지 요청에도 데이터 처리가 지연되고 속도가 느려지며 여러 문제가 발생하게 된다.

⇒ 따라서 Cient → Web Server → Web Application Server → DB 구조를 통해, 사용자의 요청이 정적인 컨텐츠라면 Web Server에서 바로 응답 해주며 1차적으로 걸러주고, 동적인 컨텐츠 라면 WAS에게 요청을 보내어 응답을 받는 구조를 가져 효율적인 분산 처리를 진행해 준다.

📖 참고 📖 번외

Apache 와 Apache Tomcat

Apache ⇒ Web Server

Apache Tomcat ⇒ Web Application Server

옛날에는 웹 서버는 Apache, WAS 는 Tomcat 이었으나 Tomcat 자체가 업데이트 되어오며, 정적인 컨텐츠를 처리하는 기능이 추가되었고, 순수 Apache만을 사용하는 것과 성능 차이가 없어 Apache Tomcat으로 불리게 되었다.

수현

Notion으로 이동 (https://24tngus.notion.site/3a6883f0f47041fe8045ef330a147da3?v=973a0b5ec78a4462bac8010e3b4cd5c0&pvs=4)

STUDY - WEB

IT (CS)

📒 브라우저의 작동 원리

📕 웹 브라우저 개념

📕 브라우저 구성요소

📕 브라우저 동작 과정

(1) 서버에서 응답 받은 `HTML 데이터` 파싱 ➡️ `DOM Tree` 생성

(2) 파싱하는 중 `CSS 파일` 링크 만나면 `CSS 파일` 요청해서 받아서 ➡️ `CSSOM` 생성

(3) `DOM Tree`와 `CSSOM`이 만들어지면 ➡️`Render Tree` 생성

(4) `Render Tree`에 있는 각 노드가 화면의 어디에 위치할지 계산하는 Layout 과정

(5) 렌더링 트리 그리기

📕 렌더링 엔진 동작 과정

📕 React 렌더링 방식 차이점

1) 리렌더링 방식

2) Virtual DOM

📒 Web Server vs Web Applicatin Server

📕 개념

1. `Web Server` = 클라이언트에게 인터넷을 통해 웹 서비스를 제공하는 컴퓨터로서 정적인 컨텐츠들만 사용자에게 제공할 수 있다.

2. `Web Application Server` = Web Server + Web Application 이다.

📕 정적 웹 페이지 (Static Web Page) vs 동적 웹 페이지(Dynamic Pages)

📕 Web Server 와 Web Application Server

1. Web Server

2. Web Application Server

3. 예시

📕 Web Server Architecture

STUDY - DataBase

STUDY - Network

0개의 댓글

STUDY - WEB

IT (CS)

📒 브라우저의 작동 원리

📕 웹 브라우저 개념

📕 브라우저 구성요소

📕 브라우저 동작 과정

(1) 서버에서 응답 받은 HTML 데이터 파싱 ➡️ DOM Tree 생성

(2) 파싱하는 중 CSS 파일 링크 만나면 CSS 파일 요청해서 받아서 ➡️ CSSOM 생성

(3) DOM Tree와 CSSOM이 만들어지면 ➡️Render Tree 생성

(4) Render Tree에 있는 각 노드가 화면의 어디에 위치할지 계산하는 Layout 과정

(5) 렌더링 트리 그리기

📕 렌더링 엔진 동작 과정

📕 React 렌더링 방식 차이점

1) 리렌더링 방식

2) Virtual DOM

📒 Web Server vs Web Applicatin Server

📕 개념

1. Web Server = 클라이언트에게 인터넷을 통해 웹 서비스를 제공하는 컴퓨터로서 정적인 컨텐츠들만 사용자에게 제공할 수 있다.

2. Web Application Server = Web Server + Web Application 이다.

📕 정적 웹 페이지 (Static Web Page) vs 동적 웹 페이지(Dynamic Pages)

📕 Web Server 와 Web Application Server

1. Web Server

2. Web Application Server

3. 예시

📕 Web Server Architecture

STUDY - DataBase

STUDY - Network

0개의 댓글

(1) 서버에서 응답 받은 `HTML 데이터` 파싱 ➡️ `DOM Tree` 생성

(2) 파싱하는 중 `CSS 파일` 링크 만나면 `CSS 파일` 요청해서 받아서 ➡️ `CSSOM` 생성

(3) `DOM Tree`와 `CSSOM`이 만들어지면 ➡️`Render Tree` 생성

(4) `Render Tree`에 있는 각 노드가 화면의 어디에 위치할지 계산하는 Layout 과정

1. `Web Server` = 클라이언트에게 인터넷을 통해 웹 서비스를 제공하는 컴퓨터로서 정적인 컨텐츠들만 사용자에게 제공할 수 있다.

2. `Web Application Server` = Web Server + Web Application 이다.