[CS]www.naver.com을 주소창에 치면 무슨 일이 일어날까요?

개발자 관점

개발자는 과정을 이해하는 사람이다.

www.naver.com  -> 리다이렉트 -> 캐싱 ->  DNS(DNS캐싱)  -> IP라우팅&ARP -> TCP연결->  Domanload -> BrowerRad

 

리다이렉트, 캐싱, DNS, IP라우팅, TCP 연결 구축을 거쳐 요청, 응답이 일어나는 TTFB(Time to Firest Byte)가 시작되고 이 후 컨텐츠를  다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다.

1. 리다이렉트, 캐싱

리다이렉트

리다이렉트가 있다면 리다이렉트를 진행하고 없다면 그대로 해당 요청에 대한 과정이 진행됩니다.

 

캐싱

해당 요청이 캐싱이 가능한지 가능하지 않은지를 파악합니다. 캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다. 캐싱은 요청된 값의 결과값을 저장하고 그 깞을 다시 요청하면 다시 제공하는 기술입니다.

이는 브라우저캐시와 공유캐시로 나눠집니다.

 

네이버 새로고침을 하게되면 네이버에 접속을 많이하면 캐시로 인해 빠르게 로딩

캐시지우기 강력 새로고침하면? 느리게 로딩

 

캐시 종류

1. 브라우저 캐시

브라우저캐시는 쿠기, 로컬스토리지 등을 포함한 캐시입니다. 캐인 캐시(private cache)라고도 합니다. 브라우저 자체가 사용자가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말합니다. 예를 들어 어떤 사이트를 갔다가 다시 방문하면 굉장히 빠르게 컨텐츠가 나타나죠? 그것이 바로 브라우저캐시입니다. 인터넷 사용기록을 삭제하고 싶어서 누르려고 하면 쿠키 및 기타 사이트 데이터, 캐시라고 있죠? 바로 이 부분입니다.

 

2. 공유 캐시

공유캐시는 클라이언트와 서버 사이에 있으며 사용자간에 공유할 수 있는 응답을 저장할 수 있습니다. 대표적인 예로 요청한 서버 앞단에 프록시 서버가 캐싱을 하는 것을 말합니다. 이를 리버스 프록시를 둬서 내부서버로 포워드한다고도 말합니다. 

 

nginx(캐싱) -> node.js

node.js로 서버를 만드는 앞단에 ngnix 프록시 서버(캐싱서버)  서버 요청을 node.js로 요청하지 않고 사용자에게 바로 보냄

 

캐싱서버로 많이 쓰이는 것: AWS의 cloud frint, cloudflare

 

 

1. No cache

사용자가 요청할때마다 오리진 서버에 요청이 간다.

 

2.Shared cahe(공유캐시)

앞단에 서버 기반으로 막아 캐시에 요청한 정보가 있으면 그 정보를 준다

 

3. Local(private) cache(브라우저 캐시)

 브라우저에 캐시에 저장되어 오리진 서버에 대한 요청을 줄인다.

---

2. DNS

DNS(Domain Name System)은 계층적인 도메인 구조와 분산된 데이터베이스를 이용한 시스템으로 FQDN을 인터넷 프로토콜인 IP로 바꿔주는 시스템입니다. 이는 DNS관련 요청을 네임서버로 전달하고 해당 응답값을 클리아언트에게 전달하는 리졸버, 도메인을 IP로 변환하는 네임서버 등으로 이루어져입니다. 

 

참고: FQDN(Fully Qualified Domain Name)은 호스트와 도메인이 합쳐진 완전한 도메인 이름을 말합니다. www 등은 호스트 부분이며 naver.com은 도메인이라고 합니다. www.naver.com   >> IP

 

www = host주소 또는 Third level 도메인, sub 도메인이라고 불림.

naver = second level 도메인

com = top level 도메인

 

컴퓨터와 컴퓨터는 IP주소를 기반으로 통신하기 때문에 IP로 바꿔주어야 합니다. 

 

예를 들어 www.naver.com에 DNS쿼리가 오면 오른쪽부터 역순으로 [Root  DNS] -> [.com DNS] -> [.naver DNS]->[.www DNS]과정을 거쳐 완벽한 주소를 찾아 IP주소를 매핑합니다.

 

www.naver.com  = IP주소

 

DNS캐싱

미리 해당 도메인이름을 요청했다면 로컬 PC에 자동적으로 저장됩니다. 브라우저캐싱과 OS캐싱이 있습니다.

브라우저 캐싱

chrom://net-internals/#dns

OS캐싱(window)

ipconfig/displaydns

---

IP라우팅

해당 IP기반으로 라우팅, ARP 과정을 거쳐 실제 서버를 찾음

TCP 연결 구축

브라우저가 TCP 3웨이 - 핸드셰이 및 SSL 연결 등을 통해 연결을 설정합니다. 이 후 요청을 보낸 후 드디어 해당 요청한 서버로부터 응답을 받습니다.

콘텐츠 다운로드

요청한 콘텐츠를 서버로부터의 다움을 받습니다.

브라우저렌더링

받은 데이터를 바탕으로 브라우저 엔진이 브라우저렌더링 과정을 거쳐 화면을 만듭니다.

 

TCP연결은 HTTP/2까지 일어납니다.

HTTP/3는 TCP연결이 아닌 QUIC연결이 일어납니다.

 

---

인프라 관점

1. 주소 입력

• 사용자가 브라우저 주소창에 www.naver.com 입력
• 여기서 URL / URI 개념 차이:
  • URL (Uniform Resource Locator): 자원의 "위치"를 지정 (http://www.naver.com/index.html)
  • URI (Uniform Resource Identifier): 자원의 "식별자"를 의미 (URL을 포함하는 더 큰 개념)

---

2. IP 주소 확인 과정

운영체제(Windows)는 도메인 이름을 바로 이해하지 못하므로, IP 주소로 변환해야 함 → DNS Query 필요

순서:

1. Hosts 파일 확인 (C:\Windows\System32\drivers\etc\hosts)
   → 수동으로 등록된 도메인-IP 매핑 우선
2. DNS Cache 확인 (이전에 접속한 기록이 있으면 캐시 사용)
3. DNS 서버로 질의
   • PC는 네트워크 설정에 등록된 DNS 서버(보통 ISP에서 제공)를 사용
   • DNS는 분산형 DB 구조
   • DDNS(Dynamic DNS)는 동적 IP 환경에서 도메인과 IP를 매핑해줌

---

3. DNS 질의 & 응답

• PC → ISP의 DNS 서버에 www.naver.com 질의
• ISP DNS가 모르면 루트 DNS → TLD DNS → Authoritative DNS 순으로 찾아감
• 최종적으로 네이버 서버 IP를 반환받음

---

4. TCP 연결 (3-way handshake)

• IP 주소를 얻으면 PC에서 네이버 서버로 TCP 연결 시도
• 브라우저는 HTTP(S) 요청을 하기 위해 반드시 TCP 기반 연결이 필요함
• 과정:
  1. SYN →
  2. SYN/ACK ←
  3. ACK →
     연결 수립 완료

---

5. HTTP 요청 & 응답

1. 브라우저 → 서버로 HTTP Request
   • 예: GET /index.html
2. 서버 → 브라우저로 HTTP Response
   • HTML, CSS, JS, 이미지 등 전달

---

6. 브라우저 렌더링

• 받은 데이터를 해석하고 화면에 표시
• HTML 파싱 → DOM Tree → CSSOM 병합 → 렌더 트리 구성 → 화면에 그려짐

---

 글로벌 서비스 고려 (경력 관점)

• 네이버나 구글처럼 글로벌 트래픽이 많은 서비스는 GSLB (Global Server Load Balancing) 를 사용
  • 사용자의 위치, 트래픽 상황에 따라 가장 가까운 서버로 분산
• 또는 CDN (Content Delivery Network) 사용
  • 정적 콘텐츠(이미지, 동영상, JS 파일 등)를 전 세계 캐시 서버에 배포
  • 사용자와 물리적으로 가까운 서버에서 제공 → 응답 속도 향상

출처

큰돌의터전 정리

https://www.youtube.com/watch?v=YahjHM9UNCA

 

널널한 개발자 TV 

https://www.youtube.com/watch?v=GAyZ_QgYYYo