알토르0

toddcanwell·2025년 7월 20일

Web Browser

웹브라우저는 웹서버로부터 요청된 리소스를 받아 웹페이지를 사용자에게 나타내주는 도구 이다.

사용자가 특정 url에 접속한다면, Web Server host에게 웹 페이지를 표시하기위해 필요한 리소스 요청을 보내고 , Web server는 요청된 데이터를 응답한다.
이때에 요청된 데이터는 컴퓨터 코드 형태로 전송이 되어지는데 , HTML,CSS,JavaScript 와 같은 웹페이지를 표시하는데 필요한 파일이 포함된다. 요청받은 데이터를 사용자에게 나타낸다.

  • 브라우저 내부구조

  • User Interface : 주소창, 뒤/앞 버튼, 탭, 북마크등 사용자가 보는 부분

  • Browser Engine : UI와 Rendering Engine 사이의 중재자로 주소를 입력,새로고침 하면 브라우저엔진이 렌더링엔진에게 페이지 로드를 요청한다.

  • Rendering Engine : HTML,CSS 파싱-> DOM,CSSOM을 합성 -> 렌더 트리 구성 -> Layout -> Paint -> 최종화면에 출력
    웹 브라우저마다 Rengering Engine이 다르다.

  • Network : Http/Https 프로토콜로 서버에 요청하여 필요한 파일(HTML,CSS,이미지등등) 을 수신받는다.

  • JavaScript Interpreter : 자바스크립트 코드를 분석하고 실행함.

  • UI Backend : 브라우저가 위치/크기를 계산한 UI 요소를 OS의 그래픽 API를 통해 실제 화면에 버튼이나 입력창을 그리게 한다.

  • Data Persistence : 쿠키, localStorage 등 , 브라우저가 도메인에 대한 정보를 저장하는 저장공간

    • 쿠키:브라우저와 서버 간에 HTTP 요청마다 자동으로 전송되는 작은 파일로, 주로 인증이나 세션 유지에 사용됨.
    • LocalStorage : 서버와 통신하지않고 , 브라우저 저장소에 저장된다. 탭을 닫아도 유지된다. 수동삭제해야한다.
      ex) 자동로그인
    • SessionStorage : 서버와 통신하지않고 , 탭을 닫으면 삭제된다.
      ex) 장바구니에 담긴 상품들

렌더링

렌더링이란 서버로 부터 받은 리소스들을 사용자가 화면을 볼 수 있게 픽셀 형태로 변환되는 과정이다.

DOM

웹서버로부터 받은 자원중 , HTML를 파싱하여 노드 객체들을 (부모-자식관계)트리 구조로 연결하여 메모리에 저장한 모델이다.
DOM을 사용하는 이유는 JavaScript가 버튼을 누르는 이벤트들이 발생할때 실시간으로 반영하여 사용자에게 보여주기 위함이다.
즉 DOM을 실시간으로 노드를 조작하여, UI의 즉각적인 변화를 반영하도록한다.

  • DOM 생성과정

  1. 서버로부터 HTML 바이트 수신

  2. 문자열화 & 토큰화: 바이트 → 문자 → HTML 토큰으로 나눔

  3. 노드 생성: 토큰마다 Element, Text 같은 DOM (객체)노드로 변환

  4. 트리 구조 구축: 각 (객체)노드를 부모-자식 관계로 연결 → DOM 트리 완성

Browser rendering process

DOM 생성
HTML을 파싱해서 DOM tree를 생성한다.

CSSOM 생성
CSS 선택자와 스타일을 트리 구조로 변환해 빠른 스타일 계산이 가능하도록 CSSOM 생성한다.

렌더 트리
DOM tree + CSS tree , 합성해서 Render Tree를 생성 , 화면에 보이는 요소들을 구성한다.

Layout
렌더 트리를 분석해 모든 요소의 정확한 위치와 크기를 계산한다.

Paint
GPU와 그래픽 라이브러리를 사용해 픽셀, 레이어를 그린다.

다양한 Web Broswer

위의 사진과 같이 다양한 Web Broswer 들이 존재한다.

2024년 기준 전 세계에서 가장 많이 사용되는 브라우저는 Google Chrome ( 시장 점유율 약 66% ), Safari (16%), Edge (6%), Firefox (3%), Samsung Internet (2%), Opera (2%)입니다. - 위키피아

HTML

HTML(HyperTextMarkuplaungage)이란 웹페이지의 구조와 화면에 정적인 data를 표현해주는 언어이다.

CSS

CSS (Cascading Style Sheets)는 HTML을 디자인을 해주는 언어이다. 색상, 폰트 ,여백 ,위치 조정등 디자인을 담당해준다.

JavaScript

JavaScript는 기존의 HTML만 사용하여 정적인 화면을 동적이게 만들어주는 언어로 , 화면에 보다 동적인 data를 표현해준다.

Server , Client

Server (서버)란 Service+ er 을 붙인 뜻인걸로 , 서비스를 제공하는 컴퓨터를 의미한다.
ex) web server , game server , db server ...등으로 server앞에 붙은 단어의 서비스 및 기능을 제공한다.
Client 란 Server에게 해당 service를 받는 사용자 또는 컴퓨터을 뜻한다.

컴퓨터가 서비스를 제공하면 server , 서비스를 제공받으면 Client가 되는 것이다.

Network

네트워크는 최소 2명이상이 하는 통신이다.
컴퓨터 네트워크는 컴퓨터 와 프린터, 스마트폰과 장치들이 통신하는것이다.
통신을 위해서는 컴퓨터와 장치가 정보 전송을 지원하는 케이블 매체이나 무선 주파수 매체를 통해 연결되어야 한다.
이때에 통신 프로토콜 이라는 합의된 규칙에 따라 통신한다.
사람끼리 대화활시에 언어와 환경을 맞추듯이, 컴퓨터도 데이터형식이나 통신순서를 미리 약속해야 통신가능하다.
ex) Internet -TCP/IP , WEB - HTTP/HTTPS , File- FTP 등등..

전세계에 종이컵선과 같이 케이블들이 전세계에 뻗쳐있다. (해저케이블이나 땅밑에 매설되어있다.)
이선들로 구축되어있는 네트워크를 Internet이라고 한다. (네트워크의 네트워크)

Internet위에서 서로 통신하기위해 필요한 TCP/IP (외에도 많은 프로토콜이 Internet 네트워크 통신에서 사용된다.)

  • TCP
    통신하는 데이터의 순서를 연결하고, 통신중 누락된 데이터를 재전송해주는 역할을 하는 프로토콜
  • IP
    데이터 , 즉 패킷을 어디로 라우팅 할지에 초점을 맞춘 프로토콜
  • Http
    Hyper Text Transfer protocol 로 ,
    Web client <-> Web Server가 서로 HTML , CSS ,JS 과같은 언어를 주고 받을 때 사용하는 프로토콜이다.
    암호화되지않아서, 네트워크 통신 중간에 도청당할수있다.
    HTTP는 누가 요청을 받아와도 무조건 응답해준다. 즉 , client에 대한 확신도, Server에 대한 확신도 떨어진다.
    네트워크 통신중 누군가가 정보를 바꿀수있다. 신뢰성이 떨어진다 라는 단점이있다.
  • Https
    Http + secure 를 더한 https으로 인터넷 통신을 위한 보안기능이 추가된 프로토콜이다.
    기존의 http의 단점을 ssl/tls 와 같은 데이터를 암호화하는 프로토콜을 사용하여 사용자의 개인정보나 보안을 책임진다.
  • tls : ssl의 취약점을 보완하여 표준화된 프로토콜

IP address

인터넷 위에서 컴퓨터가 서로 통신하기위한 식별주소이다.

Domain

도메인은 IP address의 별명과 같다. 사용자가 다른 host들의 IP address를 외우는것은 너무 힘들다.

DNS

Domain name system 이란 사용자가 입력한 Domain 이름(www.naver.com ..)와 같은 실제 서버가 사용하는 IP address를 변환해주는 시스템이다.

인터넷 사용자가 통신하려는 IP address를 전부 외우고 다닐수가 없으니 DNS을 이용한다. 이를 위해 Client는 계약된 ISP(Internet Service Provider)가 할당해준 DNS Server에게서 해당 IP address를 알 수 있다.
실제 www.naver.com와 같은 url에 접속한다면, DNS Server가 해당 www.naver.com 할당된 IP address 주소를 알려준다.

DHCP란 Dynamic host configuration protocol 로 네트워크에 접속시 IP와 네트워크설정을 자동할당해주는 프로토콜이다.
네트워크에 접속한 장치(클라이언트)에게 자동으로 IP 주소, 서브넷 마스크, 게이트웨이, DNS 등의 네트워크 정보를 할당해주는 프로토콜이다.

Mac address는 통신장비 하드웨어 하나하나의 고유식별번호를 말한다.

Port

하나의 컴퓨터에서 제공하거나 이용할 service의 식별번호
한 컴퓨터 내에서 여러 애플리케이션이 네트워크 통신을 할 때 각각 식별할 수 있게 해 주는 16비트 숫자 주소이다.

포트는 총 65,536개가 있으며, IANA에서 범위를 세 가지로 나눴다.

Well-Known (0~1023): 시스템 및 주요 서비스 전용, root 권한 필요 ex) 80 - http ,

Registered (1024~49151): 응용 프로그램용으로 등록된 포트

Dynamic/Private (49152~65535): 동적 포트 및 임시 포트

  • TCP(Transmission Control Protocol) : 서버로 데이터를 보내기전에 3 -way handshake를 통해 연결 설정, 신뢰성 보장(데이터 순서,오류시 재전송 등등)
  • UDP (User Datagram Protocol) : 연결 수립없이 지연시간 최소화, 즉 신뢰보다 빠른속도가 중요시 사용되는 프로토콜
    ex) DNS 조회 , DHCP 등등...

Router

우리는 IPv4(IP address version 4) 는 0.0.0.0 ~ 255.255.255.255 (총 2^32,32bit, 주소 약 43억개) 까지만 사용될수있다.
현재 사용되고있는 장치들에 비해 IP address는 턱없이 부족하기에 이를 해결하기위한 IPv6 와 2대역(public, private address)
가 있다.
1. IPv6(128 bit)는 더많은 IP address를 제공하고있으나 하위 호환성 문제가 존재한다.
2. IPv4에서 public IP address와 private IP address가 나눠져 IP address 부족문제를 해결하고있다.
이때에 * Private IP address의 할당된 주소범위

  • Public IP address => 인터넷 내부에서 존재하는 IP address
  • Private IP address => Router로 구축된 Network안에서 네트워크 라우터가 할당한 IP address이다.
    • Private IP address의 할당된 주소범위 (이를 제외한 주소는 전부 외부IP주소)
      10.0.0.0 – 10.255.255.255 (10.0.0.0/8)
      172.16.0.0 – 172.31.255.255 (172.16.0.0/12)
      192.168.0.0 – 192.168.255.255 (192.168.0.0/16)

출처
https://www.founderjar.com/types-of-web-browsers/
chatgpt
위키피아

profile
toddcanwell
toddcanwell
다음 포스트

JavaScript

0개의 댓글