Intro 🚶
프론트엔드 디벨로퍼라면 반드시 알아야 할 기초적인 지식인 브라우저의 동작원리를 크게 두 가지로 나누어서 얘기를 해보려고 한다. 사실 기초적이라고 얘기했지만 안에 담겨있는 지식을 총망라하면 알아야 할 것들이 끝이 없으므로 어느 정도만 알려고 한다. 선택과 집중!😤
그중에서 두 가지로 나누어 보자면.
- 눈에 보이지 않는 곳에서 일어나는 일
- 눈에 보이는 곳에서 일어나는 일
이 두 가지 컨셉을 통해 브라우저를 파헤쳐보자.
눈에 보이지 않는 곳에서 일어나는 일
주소 창
처음 크롬 브라우저를 키게 되면 가장 먼저 보이는 인터페이스인 뒤로가기, 앞으로가기, 새로고침 등 각 브라우저의 사양에 맞게 구성이 되어있다. 하지만 여기서 가장 중요하다고 생각되는 주소창에 대해서 조금 이야기해 볼려고 한다.
브라우저의 주소창에 입력되는 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다.
URL은 Uniform Resource Locator의 줄임말로, 네트워크상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분할 수 있다.
이 말은 터미널에서 위치의 깊이를 나타내는 "/" 처럼, 이어 붙여주면 서버에서 제공하는 컨텐츠의 위치까지 깊게 들어갈 수 있다는 말이다.
프론트엔드 개발자라면 친하게 지내야 할 모질라에서 제공하는 MDN 웹페이지를 사진으로 확인해보자
위에 사진처럼 "/"를 통해 최종적으로 JavaScript라는 컨텐츠가 있는 페이지의 경로를 나타내고 있다.
URI라는 것도 있는데 이는 Uniform Resource Identifier의 줄임말로, 일반적으로 URL의 기본 요소에 query,bookmark를 포함한 좀 더 깊은 자원의 주소를 뜻한다.
사진으로 예를 들자면,
주소 뒤에 "?"로 시작되는 부분이 있는데 이걸 query라고 말한다. 웹 서버에게 전달하는 추가적인 질문이라고 이해하면 된다.
URI는 URL를 포함하는 상위 개념이다. 따라서,
- "URL은 URI이다." // true
- "URI는 URL이다." // false
우리는 이런 URL이라는 걸 주소창에 입력함으로써 방대한 인터넷 세계를 탐험할 수 있는 것이다.
Internet Protocol(IP)
IP란 "Internet Protocol"의 줄임말로 인터넷에서 사용하는 주소 체계를 의미한다.
인터넷에서 연결된 모든 PC는 IP 주소 체계에 따라 네 덩이의 숫자로 구분된다. 이렇게 네 덩이의 숫자로 구분된 IP 주소 체계를 IPv4(Internet Protocol version 4)라고 한다.
IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있는데. 이 경우의 수를 표현하면 2^(32)인 약 43억개의 IP 주소를 표현할 수 있다. 이중 기본적으로 할당되어있는 IP 주소가 있는데,
- localhost(127.0.0.1)
- 0.0.0.0 또는 255.255.255.255 (broadcast address)
등이 있다.
하지만 현대에 PC가 널리 보급되어 향후 몇 년 안에 43억 개의 IP를 소진한다고 해서 IPv6도 개발되었다.
PORT는 OSI 7계층 중 응용 계층에서 돌아가는 어플리케이션들의 방 번호라고 이해하면 충분하다. 이 방 번호는 누가 결정하는 것인가? 바로 운영체제이다.
운영체제는 PC 안에서 돌아가는 수많은 어플리케이션을 PORT라는 걸 통해 전송 계층에서 논리적으로 구분하고 어떤 어플리케이션과 통신할 것인지에 대해서 결정한다.
예를 들어, Node.JS로 React를 실행시키면 "localhost:3000" 할당이 되는데 이때 host 바로 뒤에 붙어있는 ":3000"이 PORT 번호이다.
Domain Name System(DNS)
일반적으로 사람이 네 덩이의 IP 주소를 기억하기란 쉽지 않다. 사람이 알기 쉬운 언어로 IP 주소를 표현할 수 있다면 베스트인데. DNS를 통해 이러한 문제점을 해결했다.
nslookup 명령어를 통해 네이버에 도메인만 있으면 그 도메인의 IP를 찾을 수 있다. 위에 사진처럼 Name 과 Address가 매핑되어 있는 걸 확인할 수 있다. 여기서 궁금한 건 어떻게 나의 PC가 다른 PC의 IP주소를 알 수 있는 걸까??
이에 대한 궁금증은 DNS의 반복적 질의 프로세스를 통해 해답을 찾을 수 있었다. window나 macOS에서는 hosts라는 파일이 존재한다. 그 파일 안에는 "127.0.0.1"에 해당하는 localhost와 "255.255.255.255"에 해당하는 broadcasthost를 매핑되어 있는데, 이 hosts 파일을 통해서 IP와 도메인을 매핑할 수 있다. 하지만 그뿐이다. 다른 건 딱히 보이지 않는데, 실질적으로 변화가 생기는 시점은 브라우저 창에 도메인을 검색했을때이다. 검색을 하면 DHCP설정을 통해 ISP(Internet Service Provider)라는 통신사가 나의 hosts 파일에 통신사 도메인 네임 서버 IP를 세팅한다.
그리고서 각 레벨에 해당하는 DNS 서버에 질의를 해 레벨을 한 단계씩 낮춰가면서 내가 원하는 도메인의 경우의 수를 좁혀간다. 최종적으로 원하는 IP를 반환하게 된다.
출처: 생활코딩 https://opentutorials.org/module/3421
1. 로컬 DNS 서버로의 질의
브라우저는 로컬 DNS 서버에 주소창에 입력된 www.example.com 도메인에 대한 1차 질의를 한다. 로컬 DNS는 사용자와 인접한 DNS이다. 사용자가 PC등에 수동으로 설정한 DNS의 IP 일수도 있고, PC가 아닌 DHCP 설정을 통해 사용하는 ISP의 인근 서버일 수 도 있다. 이 과정에서 해당 도메인 IP 주소가 이전에 질의되었고 그 캐시 주기 값이 남아 있다면 로컬 DNS는 자신이 캐싱하고 있는 IP주소를 반환한다.
2. 루트 DNS 서버로 질의
소유하지 않은 도메인 정보에 대한 질의를 받으면 로컬 DNS는 전체 도메인을 관장하는 루트 DNS(ICANN)에 "www.example.com" 도메인에 대한 질의를 한다. 이 정보가 없는 루트 DNS는 가지고있는 ".com" 도메인 서버의 IP 정보를 알려준다.
3. .com DNS 서버로 질의
로컬 DNS는 ".com" 도메인을 관장하는 DNS에 "www.example.com" 도메인을 질의한다. 이 정보가 없는 ".com" DNS는 자신이 알고있는 "example.com" 도메인 서버의 IP정보를 알려준다.
4. example.com DNS 서버로 질의
로컬 DNS는 "www.example.com" 도메인을 관장하는 "example.com" DNS에 "www.example.com" 도메인을 질의 한다. "example.com" DNS는 자신이 알고 있는 "www.exaple.com" 네임서버의 IP 정보를 알려준다.
출처: 루비페이퍼/웹 성능 최적화 기법
브라우저에 검색을 한다는 게 이런 프로세스를 거쳐서 최종적으로 원하는 컨텐츠를 보여준다는 게 신기했다. 아는 만큼 보인다고 과거에 호스팅 업체들의 서비스를 이용하면서 헷갈리던 게 있었는데 이번 기회로 그 궁금증을 풀어냈다. 유레카!💡
