-
브라우저 동작 방법CS (Computer Science) 2025. 1. 10. 22:49
브라우저 주소창에 https://naver.com 을 입력했을 때, 어떤 과정을 거쳐서 네이버 페이지가 화면에 보이는지 알아보자
브라우저 주요기능
사용자가 선택한 자원을 서버에 요청 ⇒ 브라우저에 표시
자원은 html, pdf, image 등 다양한 형태
자원의 주소는 URI에 의해 정해진다
브라우저는 html과 css 명세에 따라 html 파일을 해석해서 표시함
브라우저가 가진 인터페이스는 보통 비슷한 요소들이 존재
- URI 입력하는 주소 표시줄
- 이전 버튼, 다음 버튼
- 북마크
- 새로 고침 버튼
- 홈 버튼 등
URI 와 URL의 관계
- URI (Uniform Resource Identifier) : 인터넷 자원을 식별하는 전체적인 개념으로 URL과 URN을 포함한다. (책의 정보를 식별할 수 있는 모든 것)
- URL (Uniform Resource Locator) : URI의 한 종류로, 자원의 위치를 나타낸다. ex) https//:naver.com/page1 (위치 정보 포함)
- URN (Uniform Resource Name) : URI의 한 종류로, 자원의 이름을 나타낸다. ex) urn:isbn:1234567 (위치 정보는 없음)
브라우저 기본 구조
사용자 인터페이스 (UI : User Interface)
사용자가 브라우저를 조작할 수 있는 화면과 버튼 ex) 주소 표시줄, 이전/다음 버튼, 북마크 등
*사용자 경험(UX : User eXperience) : 사용자들의 경험을 분석하여 더 편하고 효율적인 방향으로 프로세스가 진행 될 수 있도록 만드는 것 (ex: 터치 화면, 사용자의 선택 flow 등)
브라우저 엔진
사용자 인터페이스를 통해 사용자의 명령을 받아 렌더링 엔진과 통신하며 웹페이지를 표시하는 역할
렌더링 엔진
요청한 콘텐츠 표시 ( HTML, CSS를 파싱해서 화면에 표시) ⇒ HTML, CSS를 분석해 화면에 예쁘게 그려주는 역할
*렌더링(Rendering) 이란? 웹 브라우저가 HTML(제목, 이미지, 텍스트 등), CSS(색상, 크기, 위치), JavaScript(버튼 클릭, 동작 등) 같은 코드를 읽어서 우리가 볼 수 있는 화면으로 변환하는 과정
*파싱 (Parsing) 이란? 데이터를 특정 규칙에 따라 분석하고 프로그래밍적으로 처리할 수 있도록 변환하는 과정ex)
const jsonString = '{"name:":"Song", "age":28}'; const parsedData = JSON.parse(jsonString); console.log(parsedData.name); // 출력 : Song통신
인터넷(네트워크)을 통해 서버에서 데이터를 주고받는 역할을 한다.
자바스크립트 해석기
웹페이지에서 동작하는 JS 코드를 이해하고 실행한다.
자료 저장소
쿠키, 캐시 같은 데이터를 하드디스크에 저장하는 계틍
DOM (Document Object Model : 문서 객체 모델)
DOM은 웹페이지의 구조를 표현한 트리 모양의 지도라고 할 수 있다.
브라우저가 HTML 파일을 읽어서 DOM이라는 형태로 변환한다.
예시 코드)
HTML 코드:
<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello World!</h1> <p>This is a paragraph.</p> </body> </html>HTML 코드를 DOM 트리 구조로 변환:
- html (루트 노드) ├── head │ └── title │ └── "My Page" (텍스트 노드) └── body ├── h1 │ └── "Hello World!" (텍스트 노드) └── p └── "This is a paragraph." (텍스트 노드)DOM의 사용이유 : 각 태그가 부모와 자식 관계를 지니기 때문에 이를 트리 구조로 표현하고, JS를 통해 특정 노드를 쉽게 찾고 수정할 수 있도록 사용한다.
요약
- URL입력으로 브라우저가 서버에 Request(요청)을 보내고, 서버는 HTML, CSS, 이미지 같은 자원을 Response(응답)로 보냄
- 랜더링 엔진 작동으로 HTML과 CSS를 해석해 브라우저가 화면에 페이지를 표시하도록 준비
- HTML 파싱을 통해 HTML 문서를 분석해 DOM트리 (문서 구조)를 만든다.
- CSS 파일을 분석해 스타일 정보를 만듦
- DOM 트리와 CSS 정보를 합쳐 화면에 표시할 구조를 만듦
- 렌더 트리를 기반으로 요소를 배치하고 UI 백엔드가 화면에 그린다. 자원을 모두 기다리지 않고 먼저 받은 부분부터 화면에 표시한다.(점진적 렌더링)
'CS (Computer Science)' 카테고리의 다른 글
HTTP Request Methods (0) 2025.01.10 Cookie & Session (0) 2025.01.10 Redis란? (0) 2024.07.05 DB Table Relation (0) 2024.01.23 Naming Convention [TypeScript] (0) 2024.01.12