Web Browser #1

filoscoder·2019년 12월 2일
0

Basic Web-Architecture

목록 보기
1/2
post-thumbnail

웹 브라우저(일반적으로 브라우저라고 함)는 월드 와이드 웹(World Wide Web - www)의 정보에 접근하기 위한 소프트웨어 응용 프로그램이다. 사용자가 특정 웹 사이트를 요청(request)하면 웹 브라우저가 웹 서버에서 필요한 콘텐츠를 검색한 다음 사용자의 장치에 결과를 응답(response)하여 표시한다.

🧐 wiki: History of the Web Browser

🙄 Browser의 목적은 무엇일까?

웹 브라우저의 목적은 웹에서 정보 리소스를 가져와 사용자의 장치에 표시하는 것이다.

이 프로세스는 사용자가 https://www.naver.com/,과 같은 URL(Uniform Resource Locator) 주소를 브라우저에 입력하면 시작된다. 웹 페이지가 검색되면 브라우저의 렌더링 엔진은 웹 페이지를 사용자의 장치에 표시한다. 여기에는 브라우저에서 지원하는 이미지 및 비디오 형식이 포함될 수 있다.

웹 페이지는 보통 다른 페이지와 자원에 대한 하이퍼링크(Hyperlink)를 포함한다. 각 링크에는 URL이 포함되어 있으며, 클릭하면 브라우저가 새 리소스로 이동한다. 따라서 사용자에게 컨텐츠를 가져오는 과정이 다시 시작된다.

기술적인 면에서는 1990년대 이후 브라우저가 HTML, CSS, Javascript과 멀티미디어 기능을 크게 확장했다. 한 가지 이유는 웹 애플리케이션과 같이 더 정교한 웹사이트를 가능하게 하기 위해서였다. 또 다른 요인은 전화 접속 모뎀 (Dial-up modem) 시대에는 불가능했던 Youtube 스트리밍과 같은 데이터 집약적인 웹 콘텐츠에 접속할 수 있게 해주는 광대역(Broadband) 접속의 현저한 증가다.

🤔 Browser는 어떻게 작동할까?

월드 와이드 웹클라이언트-서버 모델에서 작동한다. 클라이언트인 사용자 컴퓨터의 브라우저는 데이터를 서버로 요청-수신 하며 작동한다. 사용자가 웹 페이지를 요청하면 브라우저가 요청된 서버(웹 사이트가 저장된 위치)에 접속하여 요청된 파일을 가져오고 해석하여 컴퓨터 화면에 웹 페이지를 표시한다.

전체 과정은 다음과 같은 세 가지 단계에서 이루어진다.

#1. DNS 서버에 접속 (Domain Name System)

사용자가 주소 표시줄에 URL을 입력하고 '입력' 또는 'Enter'키를 누르면, 브라우저에서 DNS 서버에 접속한다. DNS 서버는 해당 도메인 이름(예: https://www.google.com/)과 연결된 서버의 IP 주소(예: 192.168.1.4)를 조회한다.

DNS 서버는 브라우저에서 도메인 이름을 가져와서 해당 IP 주소를 브라우저로 반환한다.

#2. 서버 접속 (Server)

입력 된 웹페이지의 URL은 DNS의 의해 도메인을 번역하여 서버의 IP 주소를 얻은 후, 브라우저는 해당 서버로 접속하여 페이지를 요청을 한다. 예를 들어: https://www.google.com/ -> 192.168.1.4

URL은 3 부분으로 나뉜다:

  1. HTTP 또는 HTTPS – 이것은 브라우저가 서버와 통신하는 방법을 정의하는 Hyper Text Transfer Protocol이라는 프로토콜이다. (https://)
  2. Adress - IP 주소로 DNS 서버에서 번역한 www.google.com이다. 요청된 웹 페이지가 저장되는 컴퓨터(Web Server)의 주소다.
  3. Request - 웹 사이트의 루트 또는 다른 요쳥명의 주소를 알려주는 '요청명'이다. (/ 데체적으로 HOME 페이지 요청이다)

https:// + www.google.com + /

#3. 렌더링 (Rendering)

  1. Load HTML – 브라우저에서 웹 페이지를 찾자마자 http 프로토콜을 사용하여 브라우저에 로딩된다. 모든 html 태그뿐만 아니라 html 태그에 언급된 다른 리소스(이미지, 플래시 파일, pdf 등)도 별도로 로드된다.
  2. ParsingHTML parser는 html 파일을 해석하고 컨텐츠 트리를 작성한다.
  3. Style – 웹 페이지에는 스타일 시트가 부착되어 있을 수 있으며 웹 브라우저에도 기본 스타일이 있다. CSS parser를 사용하여 html에 지정된 내용에 대한 스타일(높이, 너비, 간격, 테두리, 색상, 여백 등)을 정의하기 위해 해석한다.
  4. Frame 구성 – HTML과 스타일시트를 사용하여 브라우저는 프레임을 만든다. 프레임은 너비, 높이, 색상, 간격 등과 같은 다양한 특성을 가진 직사각형 블록이다.
  5. Frame Layout – 이 프로세스에는 웹 페이지의 레이아웃을 만들기 위해 모든 프레임을 정렬하는 것이 포함된다.

🏆🇰🇷 대한민국 Browser 순위 (2019년 8월 기준)

  • 1위 Chrome (69.5)
  • 2위 Internet Explorer (17.63)
  • 3위 Edge (4.14)
  • 4위 Safari (2.7)
  • 5위 Whale (2.08) 네이버의 브라우저
  • Firefox, Opera, 등등

참고: Korea HTML5

profile
Never gets bored of making mistakes and wonder why is that

0개의 댓글