브라우저 동작 방법

sbj·2024년 1월 2일
0

Web

목록 보기
1/4

2023년 12월 25일

2024년 1월 1일

웹 브라우저는 어떻게 작동하는가?

나는 웹 브라우저가 어떻게 작동하는지 정확히 알고 있는가?
1. 아니요.
2. 공부하자

웹 브라우저의 기본 기능

웹 브라우저의 주요 기능은 선택한 웹 리소스를 서버에 요청하여 브라우저 창에 표시하는 것이다. 리소스는 일반적으로 HTML 문서이지만 PDF, 이미지 등 여러 콘텐츠일 수 있다. 리소스의 위치는 URI를 사용하여 지정된다.

웹 브라우저의 구조

1. The user interface

사용자 인터페이스는 주소창, 뒤로가기/앞으로가기 버튼, 북마크바 등 요청된 페이지에서 볼 수 있는 모든 요소들이다.

2. The browser engine

브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 작업을 중개한다. 렌더링 엔진에 전달되는 동작을 제어하며 요청에 따라 사용자 인터페이스에서 렌더링 엔전으로 또는 그 반대로 정보를 전달한다.

3. The rendering engine

렌더링 엔진은 요청받은 콘텐츠를 화면에 표시한다. HTML과 XML 문서, 이미지를 표시할 수 있으며 플러그인이나 브라우저 확장 기능을 통해 다른 유형의 콘텐츠도 표시할 수 있다.

💡 렌더링엔진은 웹 브라우저에서 가장 중요한 부분이다.

  • 웹 페이지의 HTML, CSS, JavaScript 등 코드를 해석하고 → 사용자가 볼 수 있는 시각적인 웹 페이지로 변환하는 작업을 수행하기 때문이다.

4. Networking

네트워킹은 HTTP 요청과 같은 네트워크 호출에 사용된다. 이는 플랫폼 독립적 인터페이스로, 다양한 플랫폼에서 동일한 인터넷 프로토콜을 사용할 수 있도록 한다.

5. UI backend

UI 백엔드는 인터페이스 요소를 그리는데 필요한 기본적인 구조를 제공한다. 이는 컴퓨터에서 실행되는 운영체제의 사용자 인터페이스 요소를 그리는 역할을 한다. 예를 들어, 콤보 박스와 창 같은 기본적인 통제를 가진다.

6. JavaScript interpreter

자바스크립트 코드를 분석하고 실행한다.

7. Data storage

데이터 스토리지란, 웹 브라우저에서 사용하는 쿠키와 같은 로컬 저장소를 관리하는 모듈이다.

✔︎ 웹 브라우저에 접속하면 무슨 일이 일어날까?

1. 사용자가 웹 브라우저에 URL을 입력한다.

URL Components

http: //example.com/ product/electric/ phone

  • http: 이는 URL의 프로토콜을 나타내며, 브라우저가 서버와 통신하는 방법을 나타낸다.
  • example.com: 이는 도메인 이름으로, 웹 서버의 위치를 나타낸다.
  • /product/electric/ phone: 이는 경로로, 서버에서 찾을 리소스를 나타낸다.
    • 둘 사이의 차이점은 명확하지 않으니, 일반 파일 시스템의 디렉토리 ↔ 파일로 생각하면 된다.

2. DNS(Domain Name System)

DNS

  • 도메인 네임 시스템으로, 컴퓨터, 서비스, 또는 인터넷에 연결된 장치들의 이름을 네트워크 주소로 바꾸어주는 시스템이다. 이 시스템이 없으면 우리가 IP 주소를 직접 입력해야 하지만, DNS 덕분에 도메인 이름을 사용하여 인터넷에 연결할 수 있다.

DNS에 의해 변환된 IP 주소를 사용하여 해당 서버에 연결을 요청한다.

예를 들어, 사용자가 웹 브라우저에 "www.example.com"이라는 웹 주소를 입력하면

  1. 브라우저는 DNS 서버에 "www.example.com"의 IP 주소를 요청한다.
  2. DNS 서버는 "www.example.com"에 대한 IP 주소를 찾아 브라우저에 반환한다. 예를 들어, 이 IP 주소는 "192.0.2.44"일 수 있다. 만약 DNS 서버가 해당 정보를 가지고 있지 않다면, 다른 DNS 서버에 질의를 전달한다.
  3. 반환 받은 IP 주소 "192.0.2.44"를 브라우저는 이용하여 해당 서버에 접속을 시도합니다.

3. DNS가 IP주소를 얻은 후에, TCP를 사용한다.

브라우저는 해당 IP 주소의 서버에 접속하기 위해서 TCP(Transmission Control Protocol)를 사용한다.

TCP
인터넷에서 데이터를 전송하는데 사용되는 주요 프로토콜 중 하나로, 데이터를 패킷으로 나누고 이를 순서대로 전송하여 목적지에서 원래의 데이터로 재조립하는 역할을 담당한다.

4. 서버에 HTTP 요청을 보낸다.

브라우저는 웹 서버에 HTTP(Hypertext Transfer Protocol) 요청을 보낸다. 이 요청은 사용자가 원하는 웹 페이지의 URL을 포함하고 있다.

HTTP 요청
클라이언트가 서버에 데이터를 요청하는 방법이다. 웹 브라우저가 서버에게 웹 페이지의 정보를 달라고 요청하는 것을 예로 들 수 있다.
일반적으로 요청 메소드, URI, 프로토콜 버전, 요청 헤더 등의 정보를 포함하고 있다.

👩🏻‍💻 여기까지 정리하면

사용자가 URL을 입력하고 Enter를 클릭하면

  1. DNS는 URL을 컴퓨터가 읽기 쉽게 IP 주소로 변환한다.
  2. 브라우저는 TCP를 사용하여 서버의 IP 주소와 통신하고자 하는 포트 번호를 대상으로 연결을 시도한다. (TCP 연결 설정)
  3. 연결이 설정되면, 브라우저는 웹 페이지의 정보를 가져오기 위해서 서버에 HTTP 요청을 보낸다.

이제 서버가 요청을 응답하고 처리해야 한다.

5. 서버는 요청을 처리하고 응답한다.

웹 서버는 브라우저의 요청을 받아 처리하고, 요청한 웹 페이지의 HTML, CSS, JavaScript 등의 파일들을 HTTP 응답으로 브라우저에게 전송한다.

🤷🏼‍♀️ 궁금한 것 정리

  • 서버는 어떻게 요청을 처리하고, 응답을 생성하나?
    1. 요청 분석: 웹 서버는 HTTP 요청을 분석하여 요청 타입, 요청 리소스의 URI, 기타 헤더 정보를 파악한다.
    2. 리소스 탐색: 요청된 리소스의 위치를 찾는다. 주로 서버의 로컬 파일 시스템에서 해당 파일을 찾는 과정이다. 예를 들어 클라이언트가 [http://example.com/index.html을](http://example.com/index.html을) 요청했다면, 웹 서버는 index.html이라는 파일을 서버의 로컬 디렉토리에서 찾는다.
    3. 리소스 처리: 웹 서버는 찾아낸 리소스를 처리한다. 만약 요청된 리소스가 정적인 HTML 파일이라면 그 파일을 그대로 클라이언트에게 전송한다. 그러나 요청된 리소스가 서버사이드 스크립트(PHP, Python, Ruby)라면, 웹 서버는 해당 스크립트를 실행하고 그 결과를 클라이언트에게 전송한다.
    4. 응답 생성: 웹 서버는 처리된 리소스를 바탕으로 HTTP 응답을 생성한다. 이 응답은 상태코드 (200, 404 etc.), 응답 헤더, 그리고 실제 응답 본문(HTML, CSS, JavaScript) 등을 포함한다.
    5. 응답 전송: 마지막으로 웹 서버는 생성된 응답을 클라이언트에게 전송한다. 이후 클라이언트와의 연결은 종료되거나, 재사용을 위해 유지될 수 있다.
  • 그럼 서버는 리소스 위치를 어떻게 찾나?
    • 리소스의 위치는 URI를 사용해 지정된다. 인터넷 상 리소스를 고유하게 식별하고 위치를 지정하는 문자열이다.
  • URI는 어떻게 지정되나?
    • http: //example.com/ product/electric/phone
      • product/electric/phone 도메인 뒤, 이것이 URI이다. 인터넷 상의 리소스를 고유하게 식별하고 위치를 지정하는 문자열이다. (Uniform Resource Locator)

6. 브라우저는 웹 페이지를 렌더링한다.

브라우저는 받은 HTML, CSS, JavaScript 파일들을 해석하여 사용자에게 보여줄 웹 페이지를 만들어낸다. 이 과정을 렌더링이라고 부른다. 이렇게 하여, 사용자는 웹 브라우저를 통해 웹 페이지를 볼 수 있다.

🤷🏼‍♀️ 궁금한 것 정리

  1. 브라우저는 HTML, CSS, JavaScript를 어떻게 해석하나?
    1. 웹 페이지를 해석하는 과정에서 HTML, CSS, JavaScript 파일들을 파싱한다.
    2. HTML 파싱 과정에서 DOM(Document Object Model) 트리를 생성하며, CSS 파일은 CSSOM(CSS Object Model) 트리를 생성한다.
    3. DOM, CSSOM 트리는 렌더 트리를 만들기위해서 결합되며, 렌더 트리는 페이지의 시각적 요소를 결정한다.
    4. JavaScript는 HTML 파싱 과정에서 실행되며, DOM 트리를 조작하거나 페이지에 동적 기능을 추가할 수 있다.
    5. 렌더 트리가 완성되면 브라우저는 레이아웃 과정을 거쳐 각 노드가 화면의 어디에 위치할지 계산한다.
    6. 이후 페인트 단계에서 브라우저는 레이아웃 결과를 기반으로 각 노드를 화면에 그린다.
profile
sbj
Strong men believe in cause and effect.
다음 포스트

웹에서 사용하는 통신

0개의 댓글