[3주차] 위클리 페이퍼 - 브라우저가 어떻게 동작하는지 설명해 주세요.

브라우저란?

브라우저는 웹 상의 컨텐츠에 접근할 수 있도록 도와주는 소프트웨어, 웹 페이지를 해석하여 이미지/비디오/문서 등을 지정된 위치에 출력하는 소프트웨어이다. 간단히 말해, 웹 페이지와 이용자를 이어주는 역할을 하는 소프트웨어라 할 수 있다.

브라우저의 구성 요소

• User Interface
  • 사용자와 브라우저가 상호작용을 하는 영역. 예를 들어, 북마크를 보여 준다던지, 주소바를 보여 준다던지 등.
  • 이 부분은 사용자가 브라우저를 사용할 수 있도록, 직관적인 기능을 담당한다.
• Browser Engine
  • 브라우저의 핵심 부분으로, 사용자의 명령을 처리하거나, 다른 컴포넌트와의 통신을 담당하기도 한다.
  • 이 부분은 사용자의 명령이 동작을 보장하는 역할을 수행한다.
• Rendering Engine
  • 웹 페이지를 브라우저에서 볼 수 있도록 구성(Rendering)하는 영역이다.
  • HTML, CSS, Javascript 등의 코드를 사용자가 시각적으로 볼 수 있도록 구성한다.
  • HTML을 통해 웹 페이지의 구조를 추가하고, CSS를 이용해 페이지의 레이아웃이나 디자인적 요소를 추가하고, Javascript를 이용해 웹 페이지의 동적 요소를 추가하게 된다.
• JavaScript Interpreter
  • 브라우저에서 Javascript가 작동할 수 있도록, JavaScript를 해석하는 영역이다.
  • 이 부분은 Javascript가 정상적으로 작동할 수 있도록 보장하고, 사용자의 명령/동작에 잘 반응하도록 하며, 웹 페이지의 컨텐츠가 동적으로 실행되도록 업데이트 하는 등의 역할을 수행하게 된다.
• Networking
  • 브라우저가 외부와 통신하는, 네트워크에 관한 모든 행위를 다루는 영역이다.
  • 이 부분은 URL을 IP주소로 변경하도록 DNS에 쿼리를 요청하거나, 웹 서버에 HTTP 요청을 보내거나, 네트워크 연결을 성립(establish)하고, 응답을 받는 역할 등의 다양한 역할을 수행한다.
  • 이 영역을 통해, 웹 페이지에 대한 리소스(HTML, CSS, Javascript, 미디어 파일 등)를 받게 된다.

브라우저의 동작 과정

1. DNS에 질의를 하여, 접속하고자 하는 곳의 IP주소를 알아낸다.
2. 접속하고자 하는 곳에 HTTP 요청(Request)를 보낸다. 요청에는 목적지 주소가 가지고 있는, 웹 페이지(HTML, CSS)와 관련 파일(Javascript 파일, 미디어 파일 등등)을 보낼 것을 요청하게 된다.
3. HTTP 요청을 보낸 곳에서, 응답(Response)이 돌아오게 된다. 이 경우, 응답코드를 이용해, 응답이 정상적으로 처리되었는지를 나타내게 된다. 만약, 응답이 성공할 경우에는, 요청했던 웹 페이지가 가지고 있는 파일들을 받을 수 있게 된다.
4. 브라우저는 응답을 통해 받은 HTML, CSS, Javascript 파일 등을 해석(Parsing)하고, 웹 페이지를 구성(Rendering)하게 된다.
   • HTML 파일을 해석(Parsing)하여, 웹 페이지의 뼈대를 구성한다.
   • CSS 파일을 해석(Parsing)하여, 웹 페이지의 디자인적 요소(폰트, 색, 레이아웃 등)를 구성한다.
   • Javascript 파일 (.js)를 통해, 웹 페이지의 동적 요소를 구성한다.
5. 새로운 요소가 웹 페이지에 추가될 경우, 브라우저는 이를 반영하게 된다.

참고자료

• 주로 인용한 페이지: https://www.browserstack.com/guide/what-is-browser
• 더 알고 싶다면…
  • 네트워크의 관점에서 더 설명한 문서: https://developer.mozilla.org/ko/docs/Web/Performance/Guides/How_browsers_work
  • HTML 및 CSS의 해석(Parsing)의 관점에서 더 설명한 문서: https://d2.naver.com/helloworld/59361
  • 최신 브라우저(Chrome)의 동작 방식에 대해 설명한 문서
    • 1탄: https://d2.naver.com/helloworld/2922312
    • 2탄: https://d2.naver.com/helloworld/9274593
    • 3탄: https://d2.naver.com/helloworld/5237120
    • 4탄: https://d2.naver.com/helloworld/6204533