Web Browser

<aside> 💡 Web Browser Web Browser(Internet Browser) 는 웹 서버와 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 GUI 기반의 응용 소프트웨어입니다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나 입니다. 주요 웹 브라우저로는 파이어폭스, 크롬, 익스플로러, 엣지, 오페라, 사파리 등이 있습니다. ****

</aside>

웹 브라우저는 서버로부터 웹 페이지를 가져오기 위해 HTTP(Hyper-text transfer protocol) 로 통신합니다. 즉 웹 브라우저는 HTTP 를 이용해 웹 페이지를 서버에 Requset(요청 - 데이터를 서버로 전송하기도 함) 하고 서버의 Response(응답) 를 받아 시각화 합니다.

<aside> 💡 Response 받는 정보는 주로 HTML, CSS, JavaScript, Image file 입니다. 그외에 추가적인 플러그인을 통해 PDF 등의 정보를 응답 받을 수 있습니다.ㅋ

</aside>

웹 브라우저의 구조

출처 - D2 - 브라우저는 어떻게 동작하는가?

사용자 인터페이스 - 요청한 페이지를 시각화 하는 창 부분을 제외한 나머지 부분입니다. 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등이 이에 해당 합니다.
브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어합니다. 또한 쿠키와 같은 로컬 데이터를 저장소에 저장하는 역할을 수행합니다.
렌더링 엔진 - 요청한 페이지(콘텐츠)를 표시합니다. HTML, CSS 를 파싱하고 DOM 트리 구조를 생성하여 화면에 표시하는 단계인 것입니다.
통신 - HTTP 요청과 같은 네트워크 호출에 해당합니다. 통신은 플랫폼(크롬, 사파리 등)에 대해 독립적인 인터페이스이며, 각 플랫폼 하부에서 실행됩니다.
자바스크립트 해석기(JS 엔진) - JS 코드를 해석하고 실행합니다.
UI 백엔드 - 콤보 박스, 창과 같은 기본적인 요소를 그립니다. 해당 요소들은 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용하여 그리게 됩니다.
자료 저장소 - 자료를 저장하는 계층입니다. Cookie 등의 정보 혹은 자원을 하드 디스크에 저장해야 하는 경우에 사용 되는 공간입니다.

<aside> 💡 크롬의 경우 다른 대부분의 브라우저와 달리 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지합니다. 이로 인해 각 탭은 독립적인 프로세스로 처리됩니다.

</aside>

웹 브라우저와 웹 서버간의 통신

웹 브라우저가 웹 서버로부터 웹 페이지를 가져오기 위해서는 우선 무엇을 해야 할까요? 웹 브라우저는 우선 URL 을 입력 받아 어떤 웹 서버로부터 무엇을 가져올지 알아내야 합니다. 일반적으로 정보를 요청하는 쪽을 Client, 응답하는 쪽을 Server 라고 부릅니다.