웹 브라우저의 동작 순서

웹 브라우저에 대해

 

 

특징

• 웹 브라우저 또는 웹 탐색기는 웹 서버에서 이동하며 쌍방향으로 통신함
• HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어
• 대표적인 HTTP 사용자 에이전트의 하나
• 웹 페이지를 가져오기 위해서, HTTP(HyperText Transder Protocol) 라고 하는 통신규약을 이용해 웹 서버와 통신하는 어플리케이션

 

종류

• 모질라
• 파이어폭스
• 구글 크롬
• 인터넷 익스플로러 (현재는 MS에서 지원을 중단)
• 마이크로소프트 엣지(MS가 새롭게 권고하는 웹 브라우저)
• 오페라
• 삼성 인터넷
• 사파리

 

기능

• 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시

자원이란?
보통 HTML 문서지만 PDF 나 이미지 또는 다른 형태일 수도 있음.

• 북마크 관리자, 다운로드 관리자, 웹 구성물 캐시, 플러그인을 통한 다양한 매체 지원 등
• HTTP, HTTPS
• HTML, XML, XHTML
• GIF, PNG, JPEG, SVG 등을 포함한 그래픽 파일 포맷
• CSS, JAVASCRIPT
• 쿠키와 디지털 인증서
• 즐겨찾기 아이콘 (파비콘) 및 플러그인 지원
• URL 과 폼 데이터의 자동 완성 및 탭 브라우징

---

웹 브라우저와 웹 서버의 통신 과정

 

1. 웹 브라우저에 URL 을 입력하면 웹 서버라 불리는 프로그램이 웹 브라우저에 웹 페이지를 제공함

• 웹 브라우저가 웹 서버에 연결하려면 웹 서버가 실행중인 컴퓨터의 주소를 알아야 함. 이 주소를 IP 주소 라고 함.
• 도메인 이름을 IP 주소로 변환해야하는데 이때 사용하는 것이 DNS (Domain Name Server) 이다.

1. 웹 브라우저에서 URL 을 입력한다
2. 도메인 이름에 해당하는 IP 주소를 DNS에 요청한다
3. DNS는 IP 주소를 응답으로 제공

HTTP Request (요청) : 웹 브라우저가 웹 서버에 웹 페이지를 달라고 하는 것
HTTP Response (응답) : 요청한 웹 페이지를 웹 브라우저에 제공하는 것

 

2. DNS로 부터 IP 주소를 받으면, 웹 브라우저는 이 IP 주소에 있는 서버로 찾아간다.

• 웹 브라우저와 서버는 3-way Handshake 의 과정을 거친다.

3-way Handshake 란?

네트워크 환경에서 서버와 클라이언트를 연결하는데 필요한 프로세스
데이터를 주고 받기 전에 서버와 클라이언트가 확인 패킷을 3단계로 교환하여 연결 함

서버 (Server) : 요청을 받아, 알맞은 기능이나 데이터를 제공하는 쪽
클라이언트 (Client) : 네트워크 프로그램에서 요청하는 쪽

---

브라우저의 기본 구조

 

https://velog.io/@thyoondev/%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0

1.  사용자 인터페이스
   • 주소 표시줄
   • 이전/다음 버튼
   • 북마크 등
   • 페이지 뷰 이외의 다른 부분
2.  브라우저 엔진
   • 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
3.  렌더링 엔진
   • HTML, CSS 를 파싱해 화면에 요청한 컨텐츠를 표시
4.  통신
   • HTTP 요청과 같은 네트워크 호출에 사용됨
5.  JS 엔진
   • 자바스크립트 코드를 해석하고 실행
6.  UI 백엔드
   • 기본적인 위젯 (콤보 박스 등)을 그림
7.  자료 저장소
   • 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터 베이스

---