FrontEnd Roadmap 02 - 인터넷 파트2: 브라우저와 DNS

Domain Name이란?

CloundFlare의 “도메인 이름이란?”를 기반으로 작성했습니다

이전 회차에서 Domain Name 정의를 빌려오면 “웹사이트를 식별하는 데 사용되는 사람이 읽을 수 있는 이름(google.com, naver.com)”으로 볼 수 있다.

웹사이트와 브라우저는 실제로 IP 주소를 가지고 통신을 하지만 사용자 친화적인 domain name과 DNS 덕분에 원하는 웹사이트로 이동할 수 있다.

(궁금증)Domain Name과 URL의 차이점

• URL은 protocol + domain name + 경로 = https://google.com/search?=…..

Domian Name의 구조

도메인 이름은 점으로 구분되어 나누어지고 오른쪽에서 왼쪽으로 읽어나가며 일반적인 가장 구체적으로 바뀌며 아래와 같이 볼 수 있다.

	google.com	google.co.uk
TLD	.com	uk
2LD	google	co
3LD		google

• google.com에서
  • ‘.com’은 TLD(가장 일반적)
  • ‘google’은 2LD(가장 구체적)
• google.co.uk에서
  • ‘uk’는 TLD(가장 일반적)
  • ‘co’는 2LD
  • ‘google’은 3LD(가장 구체적)

DNS(Domain Name System)란?

DNS는 IP를 매칭

컴퓨터의 주소는 IP로 기억된다. 이 IP를 통해서 router가 특정 컴퓨터를 찾아서 연결시켜준다. 하지만 우리는 이 IP 주소를 기억하고 있기 어렵기에 ‘자연어’를 사용하고 있다. 이런 자연어를 IP와 매칭 시켜주는 것이 DNS이다

DNS의 서버들

HowDNSworks의 “DNS 작동방식”을 기반하고 CloudFalre의 “DNS란 무엇입니까?” 내용을 추가하여 작성했습니다

웹 페이지로드와 관련된 4개의 DNS 서버가 먼저 있다.

1. DNS 리졸버(DNS recursive resolver): 클라이언트의 쿼리를 받는 서버로써 요청값을 찾아주는 “사서”로 비유.
2. 루트 이름 서버: 사람이 읽을 수 있는 호스트 이름을 IP주소로 변환하는 첫 번째 단계
3. TLD(Top-Level Domain) 이름 서버: 도서관의 특정 책장으로 비유. 호스트 이름의 마지막 부분을 호스팅(.com, .kr, .im 등등)
4. 권한 있는 이름 서버(authoritative nameserver): 최종 이름 서버로서 권한이 있다면 요청한 호스트 이름의 IP 주소를 DNS 리졸버에게 전달

DNS 조회 단계

HowDNSworks의 “DNS 작동방식”을 기반하고 CloudFalre의 “DNS란 무엇입니까?” 내용을 추가하여 작성했습니다

1. 브라우저 내부 캐싱 먼저 확인 후 OS내부를 확인하여 요청 DNS가 캐싱되어 있는지 체크. 있다면 바로 7번 실행, 없다면 2번 실행
   • 브라우저 내부 저장 여부는 크롬 기준 chrome://net-internals/#dns 에서 확인 가능
2. 사용자가 웹 브라우저에 ‘google.com’을 입력하면 쿼리를 DNS 리졸버가 수신
3. DNS 리졸버는 루트 이름 서버에 질의
4. 루트 이름 서버는 최상위 도메인을 확인하고 TLD 위치를 반환
5. TLD 이름 서버는 ‘google.com’을 질의
6. TLD는 권한 이름 네임 서버를 리졸버에게 반환
7. 권한 있는 이름 서버에게 질의
8. 질의한 쿼리에 해당하는 IP 주소를 리졸버에게 반환
9. 리졸버는 브라우저에 IP 전달
10. 브라우저는 해당 IP에 조회를 요청하고 HTTP 요청 이후 인증서 있을 시 HTTPS 연결
11. 통신 연결이 되면 데이터를 브라우저에게 주고 렌더링 시작

브라우저

앞서 1회차에서는 HTTP요청이 어떻게 일어나는지 위에서는 DNS 서버가 어떤 일을 하는 지 봤다. 이 작업을 하는 브라우저는 무엇일까?

브라우저의 정의

브라우저는 “사용자가 월드 와이드 웹을 통해 인터넷의 정보에 액세스할 수 있는 소프트웨어 프로그램”이라고 한다.

브라우저의 구조

web.dev의 “How browsers work”를 기반하여 작성했습니다.

• User Interface
  • 브라우저에 표시되는 인터페이스들(주소창, 뒤로가기 버튼, 탭 등등)
• Browser Engine
  • rendering engine을 조작하는 곳
• Rendering Engine
  • 웹페이지의 시각적 정보를 만들어내는 곳
  • 메인 엔진들: (Chrome)Blink, (Safari)WebKit, (FireFox)Gecko
    • css에서 들어가는 webkit은 왜 chrome에도 있는 걸까?
      • WebKit 엔진은 Apple에서 개발하고 Safari에 사용된다
      • Blink 엔진은 WebKit를 fork하여 만들어졌고 Chromium 브라우저에 사용되면 이를 활용하여 Chrome이 개발
      • Chrome의 개발자도구 콘솔에서 webkit관련 메서드는 호환성을 위해서 남겨 둔 과거의 잔재들
      • 현재 Blink와 WebKit은 독립적으로 개발
• Networking
  • HTTP 요청과 같은 네트워크 통신에 사용
• UI Backend
  • combo box난 window와 같은 기본 위젯을 그리는 곳. 또한 각 사용자의 운영 체제의 user interface method를 사용
• Javascript Interpreter
  • Javascript 코드를 읽고 실행하는 공간
• Data Persistance(Data Storage)
  • 브라우저가 저장하는 모든 것들이 있는 공간
  • (사견) 브라우저가 프로그램이라는 인식을 가지게 될 수 있는 공간
    • 데이터를 HDD에 저장했다가 RAM에 올리고 CPU를 통해서 유저 인터렉션을 통한 변경

정리

Domain Name이란 웹사이트를 식별하는 데 사용되는 사람이 읽을 수 있는 이름이다.

DNS란 Domain Name과 IP와 매칭 시켜주며 IP를 찾는 순서는 브라우저 → OS → 리졸버 → 루트 서버 → TLD → 권한 있는 이름 서버 이다. 이를 통해서 찾은 IP는 브라우저에게 전달되고 HTTP 통신 준비를 시작한다

브라우저는 UI, Browser Engine, Rendering Engine, Networking, UI Backend, Javascript Interpreter, Data Persistance가 존재한다.

참고자료

도메인 이름이란? | 도메인 이름 및 URL 비교 | Cloudflare

How DNS works. What is DNS? Learn how step by step.

DNS란 | Cloudflare

How browsers work  |  Articles  |  web.dev