일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 리액트 네이티브
- 깃
- 프론트엔드
- 리액트
- 타입스크립트
- React Native
- 자바스크립트
- CSS
- redux
- 코딩초보
- react
- scss
- SasS
- 참조자료형
- 비동기
- html기초
- git
- 코딩독학
- 코린이
- TypeScript
- 코딩공부
- 사용하는 이유
- useEffect
- Vue3
- async
- JavaScript
- 리덕스
- 코딩기초
- http
- react-router
- Today
- Total
맨 땅에 프론트엔드 개발자 되기
www.google.com 을 주소창에 치면 일어나는 일 (What happens when type www.google.com) 본문
www.google.com 을 주소창에 치면 일어나는 일 (What happens when type www.google.com)
헬로코딩 2022. 3. 23. 16:42이 글은 기본적인 네트워크 지식을 쌓기 위해 제 방식대로 정리한 글로 오류가 있을 수 있습니다. 오류가 있으면 댓글로 알려주시면 감사하겠습니다 :)
1. www.google.com 을 브라우저 주소창에 친다.
2. 브라우저는 캐싱된 DNS 기록들에서 www.google.com 에 대응되는 IP 주소가 있는지 확인한다.
DNS 란?
DNS(Domain Name System)은 URL들의 이름과 IP주소를 저장하고 있는 데이터베이스다. 인터넷에 있는 모든 URL들에는 고유의 IP 주소가 지정되어있다. 이 IP 주소를 통해서 해당 웹사이트를 호스팅하고 있는 서버 컴퓨터에 접근을 할 수 있다. (예를 들어, www.google.com의 IP 주소를 알아보기 위해서는 nslookup www.google.com 을 터미널에 작성하면 해당 사이트의 IP 주소를 알려준다.)
현재 내가 있는 지역에서 해당 명령어를 작성했을 때 142.250.66.132이 나왔고, 해당 IP 주소를 브라우저에 검색했을 때 www.google.com의 결과와 같았다. 구글을 사용하는 사용자가 매우 많기 때문에 구글의 서버 IP 주소는 여러 개가 있고, nslookup으로 그 중 내가 접근이 가능한 IP 주소를 보여준 것이다. 이처럼 DNS는 경도 위도로 주소를 외우지 않고 도로명 주소로 주소를 외우는 것과 비슷하다. 사용자가 외우기 쉬운 주소를 컴퓨터가 해석할 수 있는 IP 주소로 바꿔주는 시스템이다.
CACHE 란?
컴퓨터는 사용자의 명령이 입력되면 CPU는 연산을 하고 동작에 필요한 모든 내용이 전원이 유지되는 내내 RAM에 저장된다. 컴퓨터가 발전하면서 CPU의 처리속도가 RAM에 비해 훨씬 빨라져 왔기 때문에 CPU가 RAM에 접근할 때 병목현상이 일어나게 되었다. 이를 방지하고자 CPU와 RAM 사이에 용량은 작지만 속도가 빠른 작은 메모리를 탑재했는데 이것이 바로 캐시다. 캐시에는 CPU 캐시, 디스크 캐시, 브라우저 캐시 등 다양하다.
1. DNS 쿼리를 캐시에서 먼저 실행한다.
컴퓨터는 주소창에 입력된 주소를 브라우저 캐시에서 가장 먼저 확인한다. 브라우저는 일정 기간동안의 DNS 기록들을 저장하고 있다. (매번 새로 데이터를 받아오는 것보다 일정 기간동안 데이터를 보관해두는 것이 속도를 더 빠르게 만들 수 있기 때문이다.) DNS 쿼리(대응되는 IP 주소를 찾는 것)가 캐시에서 가장 먼저 실행이 된다.
2. 그 다음엔 브라우저는 OS(운영체제) 캐시를 확인한다.
브라우저 캐시에서 해당 IP 를 발견하지 못하면, systemcall을 통해서 OS가 저장하고 있는 DNS 기록들의 캐시에 접근한다.
3. 그 다음엔 router 캐시를 확인한다.
컴퓨터에서 DNS 기록을 찾지 못하면 브라우저는 DNS 기록을 캐싱하고 있는 router 와 통신을 해서 찾으려고 한다.
4. 그래도 못 찾으면 마지막으로 ISP 캐시를 확인한다.
ISP는 인터넷 망을 제공해주는 KT, SKT와 같은 업체를 말한다. 이러한 ISP 들은 DNS 서버를 구축하고 있다.
왜 이렇게 많은 곳에서 캐시들을 저장하는지 궁금할 것이다. 개인정보를 생각했을 때 정보가 여기저기에 캐싱된 게 조금 불편할 수 있겠지만, 캐시는 네트워크 트래픽을 조절하고 데이터 전송 시간을 줄이기 위해 매우 중요하다.
3. 요청한 URL이 캐시에 없으면, ISP의 DNS 서버가 www.google.com을 호스팅하고 있는 서버의 IP 주소를 찾기 위해 DNS query를 날린다.
ISP의 DNS 서버는 인터넷을 통해 다른 DNS 서버들에게 물어 도메인 이름의 올바른 IP 주소를 찾는데 책임을 가지고 있다. ISP의 DNS 서버를 DNS recursor라고 하고, 다른 DNS 서버를 name server 라고 한다.
DNS recursor는 name server에 연락한다. 다른 name server 들 중에서 www.google.com 에 매칭되는 IP 주소를 찾으면 DNS recursor로 전송한다.
이 모든 요청들은 작은 데이터 패킷들을 통해서 보내진다. 패킷 안에는 보내는 요청의 내용과 DNS recursor의 IP 주소가 포함되어 있다. 이 패킷들은 원하는 DNS 기록을 가진 DNS 서버에 도달할 때까지 클라이언트와 서버를 여러 번 오간다. 패킷들이 움직이는 것도 Routing table 에 기반한다. Routing table을 통해서 어떤 길로 가야 가장 빠른지 확인할 수 있다. 만약 패킷이 도중에 손실되면 Request fail error가 발생하게 된다.
4. Browser가 서버와 TCP connection 을 한다.
TCP/IP 란?
컴퓨터들끼리 네트워크로 소통을 할 때 필요한 통신규약을 말한다. IP 주소 지정 방법, 떨어진 상대를 찾기 위한 방법과 그 곳에 도달하는 순서, 그리고 웹을 표시하기 위한 순서들에 대해 정의한 규칙이다. 이러한 통신규약에는 여러 가지가 있는데 대표적인 것이 HTTP 프로토콜이고, IP 프로토콜을 사용하는 모든 프로토콜을 총칭하여 TCP/IP 프로토콜이라고 한다.
브라우저가 올바른 IP 주소를 받게 되면 IP 주소에 해당하는 서버와 connection 을 빌드하게 된다. 브라우저는 인터넷 프로토콜을 사용해서 서버와 연결이 된다. 인터넷 프로토콜의 종류는 여러가지가 있지만, 웹사이트의 HTTP 요청의 경우에는 일반적으로 TCP 를 사용한다.
클라이언트와 서버 간의 데이터 패킷들이 오가려면 TCP connection 이 되어야 한다. TCP/IP three-way handshake 라는 프로세스를 통해 클라이언트와 서버 간의 connection 이 이뤄지게 된다.
- 클라이언트 머신이 SYN 패킷을 서버에 보내고 connection 을 열어달라고 물어본다.
- 서버가 새로운 connection 을 시작할 수 있는 포트가 있다면 SYN/ACK 패킷으로 대답을 한다.
- 클라이언트는 SYN/ACK 패킷을 서버로부터 받으면 서버에게 ACK 패킷을 보낸다.
이 과정이 끝나면 TCP connection 이 완성된다.
5. Browser가 웹 서버에 HTTP 프로토콜에 따른 요청을 한다.
TCP 로 연결이 되었다면, 데이터를 전송하면 된다.
클라이언트의 브라우저는 GET 요청을 통해 서버에게 www.google.com 의 웹페이지를 요구한다. 요청을 할 때 비밀 자료들을 포함하던지, form을 제출하는 상황에서는 POST 요청을 사용할 수도 있다. 이 요청을 할 때 다른 부가적인 정보들도 함께 전달이 된다.
- browser identification(User-Agent 헤더)
- 받아들일 요청의 종류(Accept 헤더)
- 추가적인 요청을 위해 TCP connection 을 유지를 요청하는 connection 헤더
- 브라우저에서 얻은 쿠키 정보
- 기타 등등
6. 서버가 요청을 처리하고 response를 생성하고 클라이언트로 보낸다.
서버는 웹서버를 가지고 있다.(i.e. Apache, IIS...) 이들은 브라우저로부터 요청을 받고 request handler한테 요청을 전달해서 요청을 읽고 response를 생성하게 된다. Request handler 란 ASP.NET, PHP, Ruby 등으로 작성된 프로그램을 의미한다. 이 request handler는 요청과 요청의 헤더, 쿠키를 읽어서 요청이 무엇인지 파악하고 필요하다면 서버에 정보를 업데이트 한다. 그 다음에 response를 특정한 포맷으로(JSON, XML, HTML) 작성을 한다.
서버의 response에는 요청한 웹페이지, status code, compression type(Content-Encoding) - 어떻게 인코딩 되어 있는지, 어떻게 페이지를 캐싱할지(Cache-control), 설정할 쿠키가 있다면 쿠키, 개인정보 등이 포함된다.
7. Browser가 HTML content를 보여준다.
브라우저는 HTML content를 단계적으로 보여준다. 처음에는 HTML의 스켈레톤을 렌더링한다. 그 다음에는 HTML tag들을 체크하고 추가적으로 필요한 웹페이지 요소들(이미지 파일, CSS 스타일시트, JavaScript 파일 등)을 GET으로 요청한다. 이 정적인 파일들은 브라우저에 의해 캐싱이 되어 나중에 해당 페이지를 방문할 때 다시 서버로부터 불러와지지 않도록 한다. 그 다음에는 그토록 원했던 www.google.com 의 모습이 보이게 된다.
'코딩 공부 일지 > Browser & Network' 카테고리의 다른 글
Refresh Token 프론트엔드 보관 위치 (0) | 2023.04.19 |
---|---|
HTTP와 REST API (0) | 2022.07.09 |
브라우저의 인증(로그인) 방식에 대해 알아보자 Session / JWT / OAuth 2.0 (2) | 2022.06.28 |
브라우저 렌더링 동작 과정 (0) | 2022.03.23 |
웹 브라우저 쿠키에 대해 알아보자 (0) | 2022.03.23 |