[Dreamhack] Background: Web Browser

Background: Web Browser

---

# 들어가며 - 서론

- 소프트웨어: 도구로서 반복적인 작업을 자동화하여 일의 능률을 높이고, 복잡한 기능을 쉽게 사용할 수 있도록 단순하고 직관적인 인터페이스를 제공

- 소프트웨어는 발전할수록 이용자 친화적인 인터페이스를 제공하면서 사용법은 쉬워지고, 다양한 기능을 제공

  > 그만큼 소프트웨어는 내부에서 처리하는 연산이 점점 많아지고 복잡해질 수밖에 없음

  > ex) 웹 브라우저

 

 

# 웹 브라우저

1. 웹 브라우저

- 웹: 인터넷이라는 글로벌 네트워크 위에 구현되어 있으며, 정해진 프로토콜을 기반으로 통신함

- 웹 브라우저: 서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 개발자가 아닌 일반 사용자가 인터넷을 사용할 수 있도록 해줌

- 웹 브라우저는 뛰어난 이용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나

  > 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고, 파일을 내려받지만

     내부에서 어떤 연산이 일어나는지 알지 못함

- 이용자가 dreamhack.io를 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작

1. 웹 브라우저의 주소창에 입력된 주소(dreamhack.io)를 해석 (URL 분석)

2. dreamhack.io에 해당하는 주소 탐색(DNS 요청)

3. HTTP를 dreamhack.io에 요청

4. dreamhack.io의 HTTP 응답 수신

5. 리소스 다운로드 및 웹 랜더링 (HTML, CSS, JavaScript)

- 브라우저: 보안과 개발에 필요한 다양한 도구들도 제공

  > HTTP의 적용 여부 및 서버 인증서의 안전성 여부 식별

 

2. URL

- URL(Uniform Resource Locator): 웹에 있는 리소스의 위치를 표현하는 문자열

- 브라우저로 특정 웹 리소스에 접근할 때는, URL을 사용하여 이를 서버에게 요청함

- URL은 Schme, Authority(Userinfo, Host, Port), Path, Query, Fragment 등으로 구성

요소	설명
Scheme	웹 서버와 어떤 프로토콜로 통신할지 나타냄
Host	Authority의 일부로, 접속할 웹 서버의 주소에 대한 정보를 가지고 있음
Port	Authority의 일부로, 접속할 웹 서버의 포트에 대한 정보를 가지고 있음
Path	접근할 웹 서버의 리소스 경로로 ‘/’로 구분됨
Query	웹 서버에 전달하는 파라미터이며 URL에서 ‘?’뒤에 위치
Fragment	메인 리소스에 존재하는 서브 리소스에 접근할 때 이를 식별하기 위한 정보를 담고 있음. ‘#’ 문자 뒤에 위치

 

3. Domain Name

- Host: 웹 브라우저가 접속할 웹 서버의 주소를 나타냄

- Host는 Domain Name, IP Address의 값을 가질 수 있음

- IP Address: 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소

  > 불규칙한 IP Address는 사람이 외우기 어려워 일반적으로는 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용

- Domain Name을 Host 값으로 이용할 때, 브라우저는 Domain Name Server(DNS)에 Domain Name을 질의하고, DNS가 응답한 IP Address를 사용함

  ex) 웹 브라우저에서 http://example.com 에 접속할 경우, DNS에 질의해 얻은 example.com의 IP와 통신함

- Domain Name에 대한 정보 MacOS/Linux/Windows에서 nslookup 명령어를 사용해 확인할 수 있음

$ nslookup example.com
Server:		8.8.8.8
Address:	8.8.8.8#53

Non-authoritative answer:
Name:	example.com
Address: 93.184.216.34

 

4. 웹 렌더링

- 웹 렌더링(Web Rendering)은 서버로부터 받은 리소스를 이용자에게 시각화하는 행위를 말함

- 서버의 응답을 받은 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 이용자에게 전달

  ex) 서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여줌

- 웹 렌더링: 웹 렌더링 엔진에 의해서 이뤄지는데, 브라우저별로 서로 다른 엔진을 사용함

  > 사파리: 웹킷(Webkit)

  > 크롬: 블링크(Blink)

  > 파이어폭스: 개코(Gecko)

  > 각각의 엔진에 따라 렌더링 과정과 순서, 속도의 차이는 있지만, HTML을 파싱하고 시각화하여

     이용자에게 보여지는 것은 같음

 

 

# 마치며

- 키워드

① 웹 브라우저(Web Browser): 웹 브라우저는 HTTP/S로 이용자와 웹 서버의 통신을 중개하며, 서버로부터 전달받은 다양한 웹 리소스들을 가공해 이용자에게 효과적으로 전달함. 이용자가 다양한 프로토콜을 알지 못해도 쉽게 웹을 사용할 수 있도록 도와줌

② URL(Uniform Resource Locator): URL은 리소스의 위치를 나타내는 문자열로, 브라우저는 이를 사용하여 서버에 특정 리소스를 요청할 수 있음

③ DNS(Domain Name Server): Host의 도메인 이름을 IP로 변환하거나 IP를 도메인 이름으로 변환

④ 웹 렌더링(Web Rendering): 서버로부터 받은 리소스를 이용자에게 시각화하는 것을 말함