웹 브라우저와 웹서버의 통신과정
지금 독자가 보는 이 글도 웹브라우저를 통해서 보고 있겠죠? 그렇다면 웹브라우저가 무엇일까요?
웹 브라우저 (Web Browser)
이전 웹로그에서 말했듯이, 클라이언트와 웹 서버에서 양방향으로 통신을 하며 HTML 문서, 멀티미디어 등의 데이터를 접근하게 해주는 GUI기반의 소프트웨어 프로그램을 의미합니다. 흔히 사용하는 사파리, 크롬 등을 의미합니다.
브라우저는 하나의 페이지를 띄우기 위해서 응용 계층의 HTTP 프로토콜을 이용해 데이터를 송신, 수신을 하며 클라이언트와 웹서버는 데이터를 주고 받습니다.
위 사진에서 주요로 봐야할 것으 웹브라우저와 웹서버와의 통신입니다. 통신을 하는 도중에 HTTP 프로토콜을 통해 DNS라는 서비스를 사용하고 TCP/IP의 계층을 통해 데이터가 이동하며 다시 HTTP 프로토콜을 통해서 웹서버간의 통신이 이루어집니다.
브라우저의 기본 구조
- 사용자 인터페이스
- 브라우저 엔진
- 렌더링 엔진
1.사용자 인터페이스(User Interface)
우리가 웹브라우저에서 보는 주소 표시줄(URL), 이전/다음 버튼, 확장 버튼과 같은 다양한 옵션
2.브라우저 엔진(Browser Engine)
사용자 인터페이스와 렌더링엔진 사용에서 동작을 제어하는 엔진을 의미합니다.
- HTML, CSS 및 JavaScript와 같은 코드로 작성된 웹 페이지를 해석하고 해석 내용을 바탕으로 브라우저 창에 표시합니다. 브라우저 엔진에는 렌더링 엔진과, JavaScript 엔진으로 구성되어 있습니다.
렌더링 엔진
HTML 및 XML 문서를 해석하고 렌더링을 진행합니다. 이 엔진은 문서의 구조를 파싱하고, 스타일 정보를 정보를 적용하며 화면 표시될 내용을 결정합니다.
| 렌더링 엔진 | 사용처 |
|---|---|
| Gecko | 파이어폭스 |
| Webkit | 사파리 |
| Blink | 크롬, 오페라 |
| Trident | 아웃룩 익스프레스, 마이크로소프트 아웃룩 |
JavaScript 엔진
JavaScript 코드를 해석하고 실행합니다. 웹 페이지의 동적 기능을 구현하기 위해 사용되며, 최적화 JIT(Just-In-Time)컴파일러를 통해 성능을 향상시킬 수 있습니다.
| JavaScript 엔진 | 사용처 |
|---|---|
| V8 | 크롬, Node.js |
| SpiderMonkey | 파이어폭스 |
| JavaScriptCore | 사파리 |
브라우저 엔진은 웹 브라우저의 성능, 안정성, 호환성 및 보안에 큰 영향을 미칩니다. 그래서 엔진의 지속적인 발전과 최적화를 통해서 사용자 경험을 개선하고 웹 기술의 발전에 따라 더 나은 성능을 제공합니다.
통신
HTTP통신과 같은 네트워크 호출에 사용되며 온라인 통신에 필수요소입니다.
UI 백엔드
UI(사용자 인터페이스) 백엔드는 소프트웨어 애플리케이션에서 사용자 인터페이스의 백엔드 부분을 의미합니다
일반적으로 웹 개발자는 프론트엔드, 백엔드 부분으로 나뉘며, 프론트엔드는 사용자가 실제로 상호작용하는 부분을 의미하는데에 반해 백엔드에서는 데이터처리 및 로직, 인증 및 권한 부여, 데이터 통합, 상태관리, 보안 등을 중점으로 처리합니다.
자료 저장소
웹 상에서의 쿠키와 같은 데이터를 저장하는 웹 데이터베이스입니다.
웹 스토리지(Web Storage)
웹 스토리지(Web Storage)는 웹 브라우저에서 데이터를 저장하는 메커니즘입니다. 일반적으로 웹 애플리케이션에서 클라이언트 측 데이터를 임시로나 영구적으로 저장하기 위해 사용됩니다.
로컬 스토리지(Local Storage):
로컬 스토리지는 데이터를 사용자의 웹 브라우저에 영구적으로 저장하는 메커니즘입니다. 이 데이터는 도메인에 바인딩되어 있으며, 동일한 도메인의 다른 페이지에서도 접근할 수 있습니다. 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 영구 저장 옵션을 제공합니다.
세션 스토리지(Session Storage):
세션 스토리지는 로컬 스토리지와 유사하지만 세션 동안에만 데이터를 유지합니다. 브라우저 세션이 종료되면 세션 스토리지에 저장된 데이터는 삭제됩니다. 따라서 세션 동안만 필요한 데이터를 임시로 저장할 때 유용합니다.
이러한 웹 스토리지 메커니즘은 일반적으로 JavaScript를 사용하여 접근하고 조작할 수 있습니다. 이를 통해 웹 애플리케이션은 클라이언트 측에서 데이터를 저장하고 가져오는 등의 작업을 수행할 수 있습니다. 웹 스토리지는 쿠키보다 용량이 크고 더 효율적인 저장 옵션을 제공하며, 서버에 데이터를 전송하지 않아도 되므로 성능과 보안 측면에서 유리합니다.
렌더링 엔진
렌더링 엔진 동작 과정
DOM (Document Object Model)
DOM은 문서 객체 모델(Document Object Model)의 약자로, 웹 페이지의 구조화된 표현을 제공하는 프로그래밍 인터페이스입니다. DOM은 HTML, XML 및 XHTML 문서의 각 요소를 객체로 표현하며, 이를 사용하여 JavaScript 및 기타 스크립팅 언어를 통해 문서의 구조, 스타일 및 내용을 동적으로 조작할 수 있습니다. DOM은 트리 구조로 표현되며, 각 요소는 노드로 표현됩니다. 주요 DOM 노드 유형에는 요소 노드, 속성 노드, 텍스트 노드 등이 있습니다.
웹 브라우저가 HTML 문서를 로드하면, 브라우저는 이를 파싱하여 DOM 트리를 생성합니다. 그런 다음, JavaScript를 사용하여 DOM에 액세스하고 수정함으로써 동적으로 웹 페이지를 변경할 수 있습니다.
CSSOM (CSS Object Model)
CSSOM은 CSS Object Model의 약자로, CSS 스타일 시트를 표현하는 객체 모델입니다. CSSOM은 CSS 스타일 시트의 각 규칙(rule)과 각 규칙의 속성(properties)을 객체로 표현합니다. 이를 통해 JavaScript를 사용하여 문서의 스타일을 동적으로 변경할 수 있습니다.
웹 브라우저가 HTML 문서를 로드하면, 브라우저는 CSS 스타일 시트를 파싱하여 CSSOM을 생성합니다. 이후 JavaScript를 사용하여 CSSOM에 액세스하고 수정함으로써 동적으로 스타일을 변경할 수 있습니다. CSSOM은 DOM과 마찬가지로 트리 구조로 표현되며, 각 규칙과 속성은 해당하는 객체로 표현됩니다. CSSOM은 DOM과 함께 사용되어 웹 페이지의 내용과 스타일을 동적으로 제어하는 데 사용됩니다.
