www.naver.com을 주소창에 치면 무슨 일이 일어나나요?

 

 

면접관: www.naver.com를 주소창에 치면 무슨 일이 일어나나요?

 

나: 네이버가 켜집니다. 

 

 

농담입니다만, 이렇게 대답할 수는 없잖아요 ㅠ 

 

만약 면접에서 면접관님이 이런 질문을 해주신다면, 어떻게 대답하실 건가요?

 

실제로 웹사이트를 개발하는 개발자라면, 문제가 터졌을 때 "어디서부터 문제가 발생했지?" 하고 역추적하는 자세를 갖춰야 합니다.

 

제가 생각하는 이 질문의 의도는 개발자는 과정을 이해해야 하는 사람이고, 웹을 다루는 기본적인 cs 지식을 갖췄는지 여부를 묻는 것이 아닐까 싶습니다.

 

그럼 다시 질문으로 돌아와서 네이버를 주소창에 치면 무슨 일이 발생할까요?

 

답을 먼저 말씀드리자면

 

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

 

 

🧑🏻‍💻  Redirect (리다이렉트)

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

 

리다이렉트란 말 그대로 re(다시) + 지시하다(direct) 다시 지시하는 것입니다.

예를 들어 브라우저가 www.zenghyun.com/page1 URL을 웹 서버에 요청했습니다. 서버는 HTTP 응답 메시지를 통해 "www.zenghyun.com/page2 로 다시 요청하세요" 라고 브라우저에게 다른 URL(길, 방향) 을 지시할 수 있습니다.

 

🧑🏻‍💻 caching (캐싱)

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

 

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

 

📌 Browser Cache (브라우저 캐시)

 

https://velog.io/@xortm854/HTTP-Caching

 

브라우저 캐시는 쿠키, 로컬스토리지 등을 포함한 캐시입니다. 개인캐시 (private cache)라고도 합니다.

브라우저 자체가 사용자가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말합니다. 

예를 들어, 어떤 사이트를 갔다가 다시 방문하면  빠르게 콘텐츠가 나타나게 되는데 이것이 브라우저 캐시입니다. 

 

종종 인터넷 사용기록을 삭제하고 싶어서 누르려고 하면 쿠키 및 기타 사이트 데이터, 캐시라고 있는데 바로 이것을 말합니다.

 

👉 즉, 예전에 서버에 www.naver.com을 요청한 이력이 있으면 캐시가 생겨 조금 더 빠르게 사이트를 로드할 수 있게 됩니다. 

 

📌 Share Cache (공유 캐시)

https://velog.io/@xortm854/HTTP-Caching

 

공유 캐시는 브라우저 캐시와 동일한 원리로 동작하며,  클라이언트와 서버 사이에 있으며 네트워크 상에서 동작합니다. 또한, 사용자 간에 공유할 수 있는 응답을 저장할 수 있습니다.

 

대표적인 예로 요청한 서버 앞단에 프록시 서버가 캐싱을 하는 것을 말합니다. 이를 리버스 프록시를 둬서 내부서버로 포워드 한다고도 말합니다.

 

 

정리하자면, 캐싱이 없는 경우 사용자가 요청할 때마다 서버로 요청이 가게 됩니다.

공유 캐시의 경우 서버를 기반으로 캐시에 요청한 정보가 있다면 서버로 요구하지 않고 캐시에 없는 정보만 서버에 요구하게 됩니다.

브라우저 캐시의 경우 브라우저에 캐시가 저장되어 있기 때문에 캐시에 없는 정보만 서버에 요구하게 됩니다. 

 

이 캐싱 단계가 끝나면 DNS가 시작됩니다. 

 

🧑🏻‍💻 DNS (Domain Name System) 

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

 

📌 FQDN? 

FQDN(Fully Qualified Domain Name)은 호스트와 도메인이 합쳐진 완전한 도메인 이름을 말합니다. 

www 등은 호스트 부분이며 naver.com은 도메인이라고 합니다.

 

📌 www : 호스트
📌 naver.com : 도메인

 

📌 Domain Name

www.naver.com와 같은 사이트 주소는 사실 324.123.776.332 (예시)와 같은 12자리의 IP주소로 이루어져 있습니다.

이는 읽기도 불편하고, 외우기도 어렵습니다.

 

그렇기에 12자리 IP 주소를 www.naver.com과 같이 문자로 표현한 주소를 도메인 네임이라고 합니다. 

 

도메인 네임은 사람의 편의성을 위해 만든 주소이므로 실제로는 컴퓨터가 이해할 수 있는 IP 주소로 변환하는 과정이 필요합니다.

이때, 사용할 수 있도록 미리 도메인 네임과 해당하는 IP 주소 값을 한 쌍으로 저장하고 있는 데이터베이스를  DNS라고 합니다.

 

즉, 도메인 네임으로 주소창에 입력하면, DNS를 이용하여 컴퓨터는 IP 주소를 받아 찾아갈 수 있게 됩니다.

 

🧑🏻‍💻 IP Routing (IP  라우팅)

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

📌 ARP

ARP(Address Resolution Protocol)는 LAN에서 끊임없이 변화하는 IP 주소를 MAC 주소라고도 하는 고정된 물리적 컴퓨터 주소에 연결하는 프로토콜입니다. MAC 주소는 link 레이어이며 물리적으로 연결된 두 장치 간의 연결을 설정하고 종료하여 데이터 전송이 이루어질 수 있도록 합니다. IP 주소는 network 레이어입니다. ARP는 이러한 OSI 레이어 사이에서 작동합니다.

 

먼저 ARP 캐시에 목적지 IP의 ARP 항목이 있는지 확인합니다. 만약 캐시에 있다면 시스템 라이브러리 함수는 해당 MAC 주소를 반환합니다.

항목이 캐시에 없다면 라우트 테이블을 검색해 목적지 IP 주소가 로컬 라우트 테이블의 서브넷에 존재하는지 확인합니다. 존재한다면 그 서브넷에 속하는 인터페이스를 활용하고 없다면 기본 게이트웨이의 서브넷에 속하는 인터페이스를 활용합니다. 선택된 네트워크 인터페이스의 MAC 주소를 검색해 네트워크 라이브러리는 Link 레이어를 통해 ARP 요청을 보냅니다.

 

🧑🏻‍💻 TCP 연결 구축 

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

 

📌 TCP 3way handShake

연결하고자 하는 두 장치 간의 논리적 접속을 성립하기 위해 사용하는 연결 확인 방식으로, 3번의 확인 과정을 거친다고 해서 3 way handshake라고 합니다.

 

흥민이형 이번 시즌도 믿고 있다구

 

좀 쉽게 얘기하면 다음과 같습니다. 

 

 A  👉  B : 내 말 들려?

 B  👉  A : 잘 들려, 내 말도 들려?

 A  👉  B : 잘 들려!  

 

📎 SYN (synchronize sequence numbers) :  연결 확인을 위해 보내는 무작위의 숫자값 ( 내 말 들려? ) 

📎 ACK (acknowledgements) : Client 혹은 Server로부터 받은 SYN에 1을 더해 SYN을 잘 받았다는 ACK 전달 ( 잘 들려 )

 

🧑🏻‍💻 콘텐츠 다운로드 & 브라우저 렌더링

요청한 콘텐츠를 서버로부터 다운로드합니다. 이후 받은 데이터를 바탕으로 브라우저 엔진이 브라우저렌더링 과정을 거쳐 화면을 만들게 됩니다.

 

📌 브라우저 렌더링

https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC

 

사용자가 브라우저를 통해 웹 사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드합니다. 브라우저가 페이지를 렌더링 하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 합니다

 

1. 웹 엔진의 HTML/XML Parser가 문서를 Parsing 해  DOM Tree를 생성합니다.
2. CSS Parser가 CSSOM Tree를 생성합니다.
3. Rendering Tree에서 각 노드의 위치와 크기를 계산합니다. (Layout) 
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만듭니다. (Paint) 
5. 레이어를 합성하여 실제 화면에 나타냅니다. (Composite)

📎 Parsing? 

브라우저가 페이지를 렌더링 하려면 가장 먼저 받아온 HTML 파일을 해석해야 합니다. Parsing 단계는 HTML을 해석하여 DOM (Document Object Model) Tree를 구성하는 단계입니다. 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM (CSS Object Model) Tree 구성 작업도 함께 진행합니다.

 

🧑🏻‍💻 과정 총 정리

 

1. 사용자가 브라우저에 도메인 네임을 입력합니다. 👉 www.naver.com

2. 사용자가 입력한 URL 주소 중 도메인 네임 부분을 DNS 서버에 검색하고, DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다.

3. 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성하고, 이렇게 생성된 HTTP 요청 메시지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송됩니다.

4. 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환되어 웹 페이지 URL 정보에 해당하는 데이터를 검색합니다.

5. 검색된 웹 페이지 데이터는 또다시 HTTP 프로토콜을 사용하여 HTTP 응답 메시지를 생성하고 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전송됩니다.

6. 도착된 HTTP 응답 메시지는 HTTP 프로토콜을 사용하여 웹 페이지 데이터로 변환되어 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 됩니다.

 

📎 이전에 해당 도메인 이름을 요청한 기록이 있다면 로컬 PC에 자동적으로 저장됩니다.  👉 DNS  캐싱 

 

 

그래서 뭐라고요?

 

1. www.naver.com를  주소창에 입력한다.

2. 리다이렉트 여부를 확인한다.

3. 캐싱이 발생한다.

4. DNS를 통해 주소를 IP로 변환한다.

5. IP 라우팅 & ARP를 통해 실제 서버를 찾는다.

6. TCP를 연결한다.

7. 콘텐츠를 다운로드한다.

8. 브라우저에 렌더링을 한다.

 

🏷️ Ref

https://velog.io/@xortm854/HTTP-Caching

https://amunre21.github.io/web/1-site-works/

https://velog.io/@jaeyunn_15/Network-www.naver.com%EC%9D%84-%EC%B9%98%EB%A9%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC

https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC