웹 동작 원리

• IP 주소
• : Internet Protocol address, IP address 는 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다.
• 도메인 이름(Domain Name)그렇기에 이러한 IP 주소를 문자로 표현한 주소를 Domain Name이라고 한다.
• 다시 말해, 'naver.com'처럼 몇 개의 의미 있는 문자들과 점(.)의 조합으로 구성된다.
• : IP 주소는 12자리의 숫자로 이루어져 있기에 외우기가 힘들다.
• DNS도메인 네임으로 입력하면 DNS를 이용해 컴퓨터는 IP 주소를 받아 찾아갈 수 있다
• : 도메인 이름은 사람의 편의성을 위해 만든 주소이기에 실제로는 컴퓨터가 이해할 수 있는 IP 주소로 변환하는 작업이 필요하다. 이때 사용할 수 있도록 미리 도메인 이름과 함께 해당하는 IP 주솟값을 한 쌍으로 저장하고 있는 데이터베이스를 **DNS(Domain Name System)**이라고 부른다.

 

작동 방식

• TCP 소켓 오픈💡 HTTPS 요청이라면 TLS(Transport Layer Security) handshake 과정을 통해 세션키를 생성
• TCP 소켓을 열고 3-way handshake로 연결을 설정한다.
• 서버와 연결   이때 요청과 응답은 모두 HTTP 프로토콜을 사용하여 메시지를 생성한다.
• 응답의 상태 코드에 따라 다르게 처리한다.
• 세션이 유지되는 동안 서버에게 요청하고 응답받는 과정을 반복한다.
• 브라우저 렌더링
• 웹 브라우저는 응답받은 HTML/CSS/JS 및 이미지, 폰트 등의 리소스를 사용하여 페이지를 렌더링 한다.
• 연결 종료
• 서버와의 세션이 종료되면 4-way handshake로 연결을 종료한다.

 

웹의 동작 원리

①② 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력함.

③ 사용자가 입력한 URL 주소 중에서 도메인 네임(domain name) 부분을 DNS 서버에서 검색함.

④ DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달함.

⑤⑥ 웹 페이지 URL 정보와 전달 받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성함.

이렇게 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송됨.

⑦ 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환됨.

⑧ 웹 서버는 도착한 웹 페이지 URL 정보에 해당하는 데이터를 검색함.

⑨⑩ 검색된 웹 페이지 데이터는 또다시 HTTP 프로토콜을 사용하여 HTTP 응답 메시지를 생성함.

이렇게 생성된 HTTP 응답 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송됨.

⑪ 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 데이터로 변환됨.

⑫ 변환된 웹 페이지 데이터는 웹 브라우저에 의해 출력 되어 사용자가 볼 수 있게 됨

도메인의 이름을 한 서버에서 관리하기란 매우 어렵다.(도메인의 수가 매우 많기 때문) 따라서 DNS resolver는 호스트에게 직접적으로 도메인 주소를 받아 다음과 같은 과정을 통해 IP를 제공하는 역할을 한다.

 

① 간략한 과정을 통해 브라우저에 도메인 주소를 치면 DNS로 접근한다고 했다. 이때 DNS가 여기서는 DNS resolver이다. DNS resolver는 LAN에 있을 수 있고 인터넷 서비스 프로바이더, WIFI, 혹은 제 3자일 수 도 있다. Local DNS라고 설명하는 곳도 있는데 같은 역할이라고 생각하면 될 것 같다.

• Root Name Server에 가기 전 캐시를 확인
  • 첫 번째, DNS 쿼리는 우선 브라우저 캐시를 확인한다. 브라우저는 내가 이전에 방문한 웹 사이트의 DNS 기록을 일정 기간 동안 저장하고 있다.
  • 두 번째, 브라우저는 OS 캐시를 확인한다. 브라우저 캐시에 원하는 DNS 레코드가 없다면, 브라우저가 내 컴퓨터 OS에 시스템 호출(ex. 윈도우에서 gethostname 호출)을 통해 DNS 기록을 가져온다. (OS도 DNS 레코드 캐시를 저장하고 있다.)
  • 세 번째, 브라우저는 라우터 캐시를 확인한다. 만약 컴퓨터에도 원하는 DNS 레코드가 없다면, 브라우저는 라우터에서 DNS 기록을 저장한 캐시를 확인한다.
  • 마지막으로, ISP 캐시를 확인한다. 만약 위 모든 단계에서 DNS 기록을 찾지 못한다면, 브라우저는 ISP에서 DNS 기록을 찾는다. ISP(Internet Service Provider)는 DNS 서버를 가지고 있는데, 해당 서버에서 DNS 기록 캐시를 검색할 수 있다.

 

 💡 DNS reslover ⇒ 대부분의 가정집에서는 DHCP로 인터넷 접속을 하고 있다. DHCP는 Dynamic Host Configuration Protocol의 약자로, 호스트의 IP 주소 및 TCP / IP 설정을 클라이언트에 자동으로 제공하는 프로토콜이다. 사용자의 PC는 DHCP 서버에서 사용자 자신의 IP 주소, 가장 가까운 라우터의 IP 주소, 가장 가까운 DNS 서버의 IP 주소를 받는다.

② DNS resolver는 처음에 이 주소를 Root Name Server에 보내 도메인 주소에 대해 묻는다.

③ Root Name Server는 이 요청에 대해 "나는 모르고 .com을 관리하는 서버가 알거야" 라고 resolver에 전달한다.

④ resolver는 다시 .com을 관리하는 .com Top-Level Name Server에 도메인 주소에 대해 묻는다.Top-Level Name Server는 국가코드 최상위 도메인(.kr, .jp, .us)등과 일반 최상위 코드(.com, .net, edu, .org, .int, .gov, .mil)을 담당한다.

⑤ Top-Level Name Server는 naver.com을 관리하는 Name Server를 알려준다.

⑥ resolver는 또 다시 해당 Name Server에 도메인 주소에 대해 묻는다.

⑦ naver.com의 ip주소를 가지고 있는 마지막 Name Server는 최종적인 ip주소를 resolver에게 제공한다.

⑧ naver의 ip주소를 알아낸 resolver는 사용자에게 ip주소를 전송하게 된다.

 

 

브라우저 동작 과정

서버로부터 받은 데이터를 해석

대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML과 CSS를 해석(Parsing)

1. 브라우저의 렌더링 엔진은 HTML을 Parsing하여 DOM Tree를 생성
2. 렌더링 엔진이 <style>태그를 만나면 HTML Parsing을 중지하고 CSS Parsing 작업을 시작하여 CSSOM Tree를 생성
3. CSS Parsing 작업이 끝나면 HTML Parsing이 중지된 지점부터 다시 Parsing을 시작
4. <sript>태그를 만나면 다시 Parsing을 중지하고 JS Engine에게 권한을 넘김
5. JS Engine은 코드를 해석하여 추상 구문 Tree인 AST(Abstract Syntax Tree)를 만들고 실행
6. 다시 중단된 HTML Parsing을 실행하여 작업을 완료
7. DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성
8. 이 과정을 Construction 이라고 한다.
9. 렌더링 엔진은 Layout 작업을 실행 ⇒ Render Tree의 노드들을 화면의 올바른 위치에 표시
10. 그 다음 UI Backend가 Render Tree의 노드들을 돌면서 UI를 그린다. ⇒ Paint
11. Render Tree에 있는 노드를 순서(z-index)대로 구성 ⇒ Composition