IT 개발자 필수 상식인 주소창에 www.naver.com을 쳤을 때 무슨 일이 일어나는지에 대하여 정리해보겠습니다.
과정
1. 리다이렉트 → 2. 캐싱 → 3. DNS → 4. IP 라우팅 → 5. TCP 연결 구축 → 6. TTFB (Time to First Byte) 시작 → 7. 컨텐츠 다운로드 → 8. 브라우저 렌더링 → 9. 네이버 화면 표시 🥳
단계별 설명
1. 리다이렉트
먼저 리다이렉트가 있다면 리다이렉트를 진행하고 없다면 그대로 해당 요청에 대한 과정이 진행됩니다.
2. 캐싱
캐싱 단계에서는 해당 요청의 캐싱 가능 여부를 파악합니다.
캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며, 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다.
캐싱: 요청된 값의 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술
- 어떤 서버를 요청한다고 할 때 예전에 이미 요청해놓았던 것이면 캐시가 있을 것인데 이는 페이지를 조금 더 빠르게 로드하게 합니다.
- 브라우저 캐시와 공유 캐시로 나누어집니다.
- 브라우저 캐시
- 쿠키, 로컬 스토리지 등을 포함한 캐시로, 개인 캐인 캐시라고도 불립니다.
- 브라우저 자체가 사용자가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말합니다.
- 네트워크 탭에서 요청 확인시 status code가 304로 표기된 것은 브라우저 캐시를 가져온 것입니다.
- ex. 어떤 사이트 사이트를 갔다가 다시 방문하면 굉장히 빠르게 컨텐츠가 나타는 게 브라우저 캐시 덕분입니다.
- ex. 인터넷 사용 기록 삭제시 쿠키 및 기타 사이트 데이터, 캐시를 볼 수 있는데 이 또한 브라우저 캐시입니다.
- 공유 캐시
- 클라이언트와 서버 사이에 있으며 사용자 간에 공유할 수 있는 응답을 저장합니다.
- ex. 요청한 서버 앞단에 프록시 서버가 캐싱을 하는 것이 대표적인 예입니다.
- 이는 리버스 프록시를 둬서 내부 서버로 포워드한다고도 말합니다.
- ex. Node.js 서버를 만든다고 하면 앞단에 Nginx 프록시 서버를 두는데 이는 캐싱 서버로 둔 것으로, Node.js 서버에 요청하기 전에 캐싱하는 것이므로 서버 요청을 줄일 수 있게 합니다.
- ex. 캐싱 서버로 많이 쓰이는 것 = AWS의 cloudfront, cloudfare
- 브라우저 캐시
3. DNS
DNS (Domain Name System)은 도메인 구조로 분산된 데이터 베이스를 이용한 시스템으로, FQDN을 인터넷 프로토콜의 IP로 바꿔주는 시스템입니다. 이는 DNS 관련 요청을 네임버서로 전달하고 해당 응답 값을 클라이언트에게 전달하는 리졸버, 도메인을 IP로 변환하는 네임서버로 이루어져 있습니다.
FQDN (Fully Qualified Domain Name): 호스트와 도메인이 합쳐진 완전한 도메인 이름
- ex. www.naver.com
- host 주소: www
- Third level domain, sub Domain이라고도 불립니다.
- Second Level Domain: naver
- Top Level Domain : com
- host 주소: www
컴퓨터와 컴퓨터는 IP주소를 기반으로 통신하기 때문에 이를 IP로 바꿔주는 게 DNS입니다.
www.naver.com에 DNS 쿼리가 오면 주소의 역순인 [Root DNS] → [.com DNS] → [.naver DNS] → [.www DNS] 과정을 거쳐 완벽한 주소(FQDN)를 매핑합니다.
⚠️ DNS에 요청하기 전 DNS 캐싱 서버를 거쳐갑니다.
DNS 캐싱 서버
- 브라우저 캐싱 = 크롬 주소창에 chrome://net-internals/#dns 를 입력하면 확인 가능합니다.
- OS 캐싱 = Windows는 명령 프롬프트에 ipconfig/dispaydns 를 입력하면 확인 가능합니다.
4. IP 라우팅
IP 라우팅: 해당 IP를 기반으로 라우팅, ARP 과정을 거쳐 실제 서버를 찾습니다.
ARP (주소 결정 프로토콜, Address Resolution Protocol) : 해당 IP를 그 IP주소에 맞는 물리적인 주소 즉, MAC주소를 가지고 오는 프로토콜
💡IP 주소는 네트워크 계층 (3계층) 에서 사용되고, MAC 주소는 데이터 링크 (2계층)에서 사용되므로 통신 표준 (TCP/IPd와 OSI 7계층)에 따라 IP 주소는 MAC 주소로 변환해야 합니다.
MAC 주소 (Media Access Control) : 통신할 하드웨어 장비를 식별할 수 있는 고유 주소
5. TCP 연결 구축
TCP 연결은 HTTP/2까지 일어납니다.
브라우저가 TCP 3-way 핸드셰이킹 및 SSL 연결 등을 통해 연결을 설정합니다.
이후 요청을 보낸 후 드디어 해당 요청한 서버로부터 응답을 받습니다.
6. 콘텐츠 다운로드
요청한 컨텐츠를 서버로부터 다운 받습니다.
TCP 연결시 요청이 전송되고 첫 다운로드가 시작되는 시점을 TTFB (Time to First Byte)라고 부릅니다.
7. 브라우저 렌더링
받은 데이터를 바탕으로 브라우저 엔진이 브라우저 렌더링 과정을 거쳐 화면을 만듭니다.
마침
IT 개발자가 필수로 알아야 할 네트워크 지식에 대하여 정리해봤습니다.
이제 네트워크에 어떻게 연결되어 컨텐츠를 받아오는지 알았으니 브라우저 렌더링이 어떻게 이루어지는지에 대해 자세히 공부하고 싶은 것 같습니다. 다음에는 브라우저 렌더링 과정에 대하여 작성해보도록 하겠습니다!
참고
https://musclebear.tistory.com/12