🌏 브라우저?
웹 브라우저 또는 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다.
말하자면 웹 서버와 통신하여 인터넷 사이트 및 다양한 컨텐츠를 볼 수 있도록 지원해주는 소프트웨어 프로그램이다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
브라우저는 구글 크롬, 파이어폭스, 사파리, 오페라 등이 있다.
브라우저의 기본 구조
사용자 인터페이스
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분에 해당한다.
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. Data storage 컴포넌트와 통신할 수 있다.
렌더링 엔진
요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 요청받은 내용을 화면에 그려주는 일을 한다. 일반적으로 HTML+CSS를 보여주지만 플러그인의 도움으로 PDF, XML등의 문서도 나타낼 수 있다.
통신
HTTP 요청과 같은 네트워크 호출에 사용된다.
UI 백엔드
콤보 박스와 창 같은 기본적인 장치를 그린다. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS의 유저 인터페이스 메서드를 사용해 창이나 콤보박스, 체크박스 등의 기본적인 위젯을 그려준다.
자바스크립트 해석기(인터프리터)
자바스크립트 코드를 해석하고 실행한다.
자료 저장
자료를 저장하는 계층
💻 브라우저 주소창에 www.naver.com 을 검색하면?
1. 입력한 text 정보를 확인
내가 입력한 텍스트가 검색어인지, url 주소인지 확인한다.
크롬을 포함한 대부분의 브라우저는 주소창을 검색엔진과 같이 사용한다.
텍스트가 url 주소일 경우 브라우저 엔진에서 네트워크 호출을 수행한다.
즉, 주소창에 www.naver.com 을 입력하면 네트워크 호출 단계로 넘어간다.
2. 네트워크 호출
IP주소를 찾는 과정이다. 내 브라우저에 네이버 화면을 띄워야하는데 네이버에 대한 정보가 없으니 정보가 있는 주소에 가서 요청을 해야하는 것이다. 그 정보는? 당연히 '네이버' 라는 회사 서버에 있다. 때문에 브라우저는 네이버 서버와 통신하여 데이터를 가져와야한다.
2-1. IP 주소 찾기
인터넷 세상에서는 IP 주소를 기반으로 동작하지만 인간인 우리는 그것을 식별하기 어렵기 때문에 IP주소 대신 문자로 이루어진 도메인주소를 사용한다.
때문에 도메인 주소를 IP주소로 변환해주는 DNS(Domain Name Server)가 필요하며 이를 수행하는 것이 DNS 서버이다.
검색한 서버의 주소를 확인하기 위해 사용자(클라이언트)는 DNS 서버에 검색하기 전에 캐싱된 DNS 기록들을 먼저 확인한다. 만약 해당 도메인 이름에 맞는 IP 주소가 존재하면, DNS 서버에 해당 도메인 이름에 해당하는 IP주소를 요청하지 않고 캐싱된 IP주소를 바로 반환한다.
만약 DNS 기록에 가려고 하는 URL과 일치하는 IP주소가 존재하지 않는다면 DNS 서버에 해당 사이트 IP주소를 요청한다.
2-2. HTTP 통신
이제 브라우저가 네이버의 IP주소를 알게 되었으므로 네이버 서버와 통신할 수 있게 되었다. 클라이언트의 브라우저는 네이버 서버에 데이터를 요청하는 HTTP Request를 보낸다. request를 받은 네이버서버는 이를 바이트 형태(0,1) 로 변환하여, 클라이언트로 HTTP Response를 보낸다.
여기까지가 데이터를 불러오는 과정이며 가져온 데이터를 바탕으로 웹브라우저에 출력해야한다.
웹 브라우저에 출력되는 단계를 Critical Rendering Path 라고 한다.
브라운저 랜더링은 다음 글을 통해 알아보자
