[Dreamhack] Background : Web Browser

웹 브라우저

서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 일반 이용자가 인터넷의 사용을 편하게 하는 도구(?)

 

• 웹 브라우저 기본동작
  
  1. 웹 브라우저의 주소창에 입력된 주소를 해석 (URL)
  2. 주소 탐색 (DNS 요청)
  3. HTTP를 통해 주소에 요청
  4. 주소의 HTTP 응답 수신
  5. 리소스 다운로드 및 웹 렌더링 (HTML, CSS, JavaScript)

URL 

Uniform Resource Locator 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열입니다.

• Scheme : HTTP, HTTPS, FTP(파일 전송 프로토콜)와 같은 리소스에 액세스하는 데 사용할 프로토콜에 대해 설명합니다.
• User : 일부 서비스는 로그인하기 위해 인증이 필요하며, 로그인하기 위해 URL에 사용자 이름과 암호를 입력할 수 있습니다.
• Host/Domain : 액세스할 서버의 도메인 이름 또는 IP 주소입니다.
• Port : 연결하려는 포트(일반적으로 HTTP의 경우 80, HTTPS의 경우 443), 1 - 65535 사이의 모든 포트에서 호스트할 수 있습니다.
• Path : 액세스하려는 리소스의 파일 이름 또는 위치입니다.
• Query String : 요청한 경로로 보낼 수 있는 추가 정보 비트입니다. 예를 들어 /blog?id=1은 ID가 1인 블로그 기사를 수신할 블로그 경로를 알려줍니다.
• Fragment : 요청한 실제 페이지의 위치에 대한 참조입니다. 이는 내용이 긴 페이지에 일반적으로 사용되며 페이지의 특정 부분이 직접 연결될 수 있으므로 사용자가 페이지에 액세스하는 즉시 볼 수 있습니다.

Domain Name

Host는 Domain Name과 IP Address를 가짐

Domain Name을 Host값으로 이용할 떄 브라우저는 DNS(Domain Name Server)에 Domain Name을 질의하고

DNS가 응답한 IP Address를 사용합니다

 

웹 렌더링 ( Web Rendering)

서버로부터 받은 리소스를 이용자에게 시각화하는 행위

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

예를 들어, 서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여줍니다

 

렌더링에는 브라우저 별로 다른 렌더링 엔진을 사용하는데 사파리는 웹킷(Webkit), 크롬은 블링크(Blink), 파이어폭스는 개코(Gecko) 를 사용합니다

 

개발자 도구 (Dev Tools)

개발자 도구는 브라우저를 열고 F12를 누르면 볼 수 있습니다

이런식으로 나타납니다

 

개발자 도구 레이아웃

요소 검사

요소 검사를 통해 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있습니다

요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면 대상의 정보가 출력됩니다

그 상태에서 클릭하면 이와 관련된 HTML 코드가 하이라이팅됩니다

디바이스 툴바

디바이스 툴바를 활용하면 현재 브라우저의 화면 비율 및  User-Agent를 원하는 값으로 변경할 수 있습니다

화면 비율을 통해 핸드폰, 태블릿, 노트북등 비율이 다양한 환경을 테스트 해볼 수 있습니다

Sources

현재 페이지를 구성하는 웹 리소스 확인하고 원하는 JS를 디버깅도 해볼 수 있습니다

Sources 레이아웃

Network

서버와 오가는 데이터를 확인 할 수 있습니

Application

쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있습니다

 

Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고 수정할 수 있습니