웹 브라우저의 동작

자바스크립트와 웹 브라우저는 아주 밀접한 관계이다?? 🤷🏻  

• 정답 🙂 자바스크립트는 웹 브라우저를 프로그래밍적으로 제어하기 위한 언어이기 때문에 뗄레야 뗄 수 없는 언어라고 할 수 있다. 따라서 프론트엔드 개발자라면 웹 브라우저의 구조에 대해서는 반드시 알아야 한다고 생각한다. 또한 요즘 웹 브라우저 뿐만 아니라 다양한 환경에서 자바스크립트가 이용되고 있기 때문에 자바스크립트의 탈 웹브라우저에 대해서도 간단히 알아보자!!

 

먼저 웹 브라우저에 대해서 알아봅시다~

---

 

웹 브라우저의 기본 구조 🏗

웹 브라우저의 기본 구조

* 구조는 브라우저마다 다를 수 있다.

1. User Interface : 주소 표시줄, 다음 & 이전 & 새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용하는 인터페이스
2. Browser Engine : User Interface와 Rendering Engine 사이의 동작을 제어(연결)하는 엔진
3. Rendering Engine : HTML, CSS를 파싱(Parsing)하여 요청한 웹 페이지를 표시하는 엔진
4. Networking : HTTP요청과 같은 각종 네트워크 요청을 수행하는 네트워킹 파트 
5. Javascript Interpreter : 자바스크립트 코드를 실행하는 Interpreter
6. UI Backend : 기본적인 위젯(체크박스, 버튼, 콤보 박스 등)을 그려주는 역할
7. Data Persistance : 로컬 스토리지나 쿠키와 같이 보조 기억장치에 데이터를 저장하는 웹 데이터베이스

 

웹 브라우저의 동작 과정 ⚙️

• 사용자가 웹 사이트에 접속하는 순간 웹 브라우저는 DNS(Domain Name Server)에 호스트의 IP 주소를 요청하게 된다. (DNS를 통해 서버의 IP주소를 파악)
  •  DNS가 뭐에요?
    • DNS는 인터넷 전화번호부라고 생각하면 쉬울 것이다. 예를 들어 브라우저에서 naver.com을 검색하여 접속하려 한다. 그러면 제일 먼저 DNS로 도메인 주소가 전달되고 DNS 서버 내부에서 도메인 주소를 기준으로 'naver.com = 11.111.111.111'이라는 항목을 찾아내게 된다. DNS는 다시 브라우저에게 11.111.111.111의 IP 주소를 가지고 있는 호스팅 서버로 가라고 지시하게 되는 것이다. 이러한 과정을 통해서 브라우저가 해당 IP 주소로 접속하여 웹 사이트가 나오는 것이다.
• IP 주소를 받은 웹 브라우저는 해당 IP 서버로 찾아간다.
• • 3 Way-Handshake란?
    • 쉽게 말해서 데이터 송수신자 간 연결을 확인하는 과정이라고 생각하면 된다.
    • 예를 들어 송신자 : 들려? 👉 수신자: 응 들려! 너도 들려? 👉 송신자: 응 들려! 의 과정과 유사한 것이다.웹 브라우저는 서버에게 번호를 주게 된다. → 서버는 번호에 1을 더해서 웹 브라우저에게 준다. → 웹 브라우저는 또 한번 1을 더해서 서버에게 준다. (3 Way-Handshake 동작과정  *데이터를 주고 받기 위함)

사진 1

• 다음으로 웹 브라우저는 서버에게 자료(데이터)를 요청하게 된다. → 이를 HTTP Request 라고 한다.
• 데이터를 요청 받은 서버는 웹 브라우저에게 데이터를 보내주게 된다. → 이를 HTTP Response 라고 한다.
• 데이터를 정상적으로 받은 웹 브라우저는 사용자에게 데이터를 출력하는 작업을 하게 되는데  이때 데이터를 출력하기 전 먼저 데이터를 해석해야 하는 과정을 거쳐야만 한다.
• 대부분의 브라우저는 W3C명세에 따라 HTML과 CSS를 해석한다.
  
  • W3C가 뭐에유?
    • World Wide Web Consortium으로써 웹 표준을 개발하고 장려하는 조직이다.
    • 깨알지식 👉 W3C에서 CSS가 탄생하였다.
• 이렇게 데이터를 해석하는 것을 파싱(Parsing)이라 한다.
• 먼저 브라우저의 렌더링 엔진은 HTML을 파싱하여 DOM tree를 생성하게 된다.
  • DOM이 뭘까?
    • DOM(Document Object Model)은 웹 페이지를 이루는 태그들(HTML)을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델이다.
    • document 객체를 통해 HTML 문서에 접근 가능
  • DOM tree는 그럼 뭐지?
    • HTML 태그 별 상위, 하위가 구분되기 때문에 트리 구조로 짜여있는 것이 돔 트리라고 한다.
• HTML 파싱 과정 중 렌더링 엔진이 스타일 태그를 만나게 되면 HTML 파싱 작업을 중단하고 CSS 파싱 작업을 시작한다. 이때 CSSOM tree가 생성된다.
  • CSSOM 이란?
    • DOM과 마찬가지로 CSS 내용을 파싱하여 자료를 구조화 한 것이다.
• CSS 파싱을 완료하게 되면 HTML 파싱이 중단된 지점부터 다시 파싱을 시작하게 되는데 중간에 스크립트 태그를 만나게 되면 또 다시 HTML 파싱을 중단하고 자바스크립트 엔진에게 제어 권한을 넘기게 된다.
• 자바스크립트 엔진은 코드를 해석하여 추상 구문 트리인 AST(Abstract Syntax Tree)를 만들고 실행한다.
• 스크립트 작업이 완료되면 이제서야 중단되었던 HTML 파싱을 완료하게 된다.
• 브라우저는 DOM tree 와 CSSOM tree를 합쳐서 Render tree를 생성하게 된다. 
  • Render tree's Details
    • DOM과 CSSOM이 결합되어 렌더트리가 생성된다.
    • DOM 트리의 루트부터 노드 각각을 모두 탐색하는 작업 수행 
    • 화면에 표시되는 각 노드에 대해 일치하는 CSSOM 규칙을 찾아 적용하는 작업 수행
    • 렌더 트리가 생성되면 화면 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산하는데 이때 모든 상대적인 값 (%, rem, vh)이 절대적인 값 (px)로 변환된다. 이 과정을 Layout 또는 Reflow 라고 한다.
      • Reflow가 일어나는 경우 (화면의 구조가 변경되면 Reflow가 발생)
        1. DOM 노드의 추가 및 제거
        2. DOM 노드의 위치 변경
        3. 폰트 변경 및 이미지 크기 변경
        4. 페이지 초기 렌더링
• 여기까지 Render tree를 생성하는 과정까지를 Construnction 🏗 라고 한다.
• 그리고 렌더링 엔진은 레이아웃 작업을 진행하는데 이는 렌더 트리의 노드들을 화면의 올바른 위치에 표시하기 위한 작업이다.
• 그 다음 UI Backend가 렌더 트리의 노드들을 돌면서 UI를 그리게 되는 과정을 거친다.
• 그 후 노드들의 레이어를 순서대로 구성하는 Composition 단계를 거친다.
• 레이아웃 작업 부터 Composition 까지의 과정을 Operation ⚙️ 라고 한다.
• 이러한 과정들을 거친 후 최종적으로 사용자에게 결과 화면을 출력☀️ 하게 되는 것이다.     

 

 

Point 📌

• 서버로부터 모든 데이터를 받고 파싱과 레이아웃 배치 과정을 거치는 것이 아니다!
• 브라우저는 사용자에게 빠르게 화면을 출력하기 위해서 서버로부터 데이터의 일부를 받고 화면에 표시하고 또 데이터의 일부를 받고 화면에 표시하는 과정을 반복적으로 거치면서 사용자에게 결과 화면을 보여주게 되는 것이다.
• 그렇기 때문에 웹 페이지의 화면 전체가 한번에 뜨지 않고 부분적으로 뜨는 현상을 대부분의 우리들이 겪었던 것이다.

 

웹 브라우저 마다 다른 렌더링 엔진 🫥

• Safari : Webkit
• Firefox : Gecko
• Chrome : Blink (과거에는 Safari와 동일한 Webkit 엔진을 사용하였지만, 2013년에 Webkit에서 갈라져나온 Blink를 사용 중 이다.)

 

탈 웹브라우저 ❓   

• 과거에 자바스크립트는 웹 브라우저를 제어하기 위한 언어였다면 이제는 웹 브라우저와 자바스크립트를 구분하여 생각할 필요성이 대두되었다.

why? 자바스크립트는 현재 웹 서버로도 이용이 되고 있기 때문이다.

 

웹 서버 ❓   

• 웹 서버는 사용자가 접속하고자 하는 사이트의 주소를 입력하고 엔터를 치게 되면 웹 브라우저에서 '어떠한 정보가 필요해요!' 라고 웹 버서에 요청 (requset) 하게 되고 웹 서버에서 다시 요청된 데이터를 찾아 웹 브라우저에게 응답 (response) 하는 역할을 한다.
• 자바스크립트를 사용한 웹 서버 방식은 바로 node.js !!
• 웹 서버에서 사용되는 대표적인 기술은 php, java, python, ruby가 있는데 이제 자바스크립트를 이용해서 웹 서버를 제어할 수 있게 된 것이다.
• 따라서 node.js를 사용하게 되면 웹 서버와 웹 브라우저 2개를 자바스크립트로 동시에 제어할 수 있다고 말할 수 있다. 
• 이러한 장점들 때문에 현재 각광받고 있는 기술이기도 하다.

 

☀️ 웹 전체에서   차지하는 영향력이 계속해지는 자바스크립트 !! ☀️

 

[출처]

사진 1 👉 https://velog.io/@rlacksals96/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-TCPUDP%EC%99%80-3way-handshake