naver.com을 검색하면?

주소창에 naver.com을 입력한다면?

먼저, 밑에 그림에 대해서 한번 훑어보고 그림과 함께 동작 과정을 알아보자.

그림에 있는 각 구름은 웹 요청과 응답이 이동하는 단계별 네트워크 계층이나 프로토콜을 의미하는 것으로 볼 수 있다.

 

• ① 사용자 입력 
  • 사용자가 웹 브라우저 주소창에 URL을 입력한다.
• ② 웹 페이지 URL
  • 브라우저에서 HTTP 요청 준비, 브라우저는 입력된 URL을 확인하고, 해당 URL을 요청할 준비를 한다.
• ③ 도메인 네임
  • 브라우저는 HTTP 요청을 통해 DNS서버로 도메인 이름을 보낸다.
• ④ IP주소
  • DNS는 도메인 이름을 IP주소로 변환하여 HTTP를 통해 브라우저에게 보낸다.
  • 이로써, 브라우저는 서버와 연결할 IP주소를 알게 된다.
• ⑤ HTTP 요청 메세지
  • 브라우저는 요청할 웹 페이지의 URL을 포함한 HTTP 요청 메세지를 만들어 단계별 프로토콜을 거쳐 서버측 네트워크로 보낸다.
• ⑥ HTTP 요청 메세지
  • 요청 메세지가 인터넷을 통해 서버와 연결된 네트워크로 이동한다.
• ⑦ 웹 페이지 URL
  • 서버 네트워크로 이동한 요청 메세지가 단계별 프로토콜을 거쳐 웹 서버로 전달된다.
• ⑧ 웹 페이지 데이터
  • 웹 서버는 요청된 페이지를 찾고 HTML, CSS, JavaScript 등의 웹 페이지 데이터를 준비한다.
• ⑨ HTTP 응답 메세지
  • 준비한 데이터를 담아 응답 메세지를 생성하여, 사용자 측 네트워크로 보낸다.
• ⑩ HTTP 응답 메세지
  • 응답 메세지가 인터넷을 통해 사용자 측 네트워크로 이동한다.
• ⑪ 웹 페이지 데이터
  • 브라우저는 이러한 과정을 거쳐 웹 페이지 데이터를 받게 된다.
• ⑫ 사용자 출력
  • 브라우저는 받은 웹 페이지 데이터를 파싱하고 렌더링하여 사용자에게 화면을 보여준다.

해당 그림은 DNS 조회, TCP연결, HTTP 요청 및 응답을 중점으로 인터넷을 오가며 데이터가 전달되는 과정을 보여준다.

(전반적인 흐름을 알고 각 단계별로 더 깊이 공부하는 게 더 수월한 것 같다.)

 

 

그렇다면 CS면접에서 "www.naver.com을 주소창에 치면 어떻게 될까요?"라고 질문이 나온다면 뭐라고 대답해야 할까?

 

답은 다음과 같다.

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 또한 이러한 과정이 캡슐화, 비캡슐화과정을 거쳐서 이뤄지게 됩니다.

 

면접 대답에 대해서 좀 더 자세히 알아보자.

 

1. 대기열(Queue)
   • 사용자가 www.naver.com을 주소창에 입력하면 브라우저는 해당 요청을 처리하기 위해 브라우저의 요청 대기열(Queue)에 등록한다.
   • 여러 요청이 동시에 발생할 수 있기 때문에, 요청들이 차례로 처리될 수 있도록 대기큐에서 관리한다.
2. 캐싱(Caching)
   •  브라우저는 우선 브라우저의 캐시를 확인해 www.naver.com에 해당하는 데이터가 저장되어 있는지 확인한다.
   • 만약 캐시된 데이터가 있다면, 네트워크 요청을 줄이고 페이지 로딩 속도를 높일 수 있다.
3. DNS(Domain Name System)
   •  브라우저는 DNS 서버를 통해 www.naver.com의 IP주소를 얻는다.
   • DNS 쿼리는 브라우저 캐시, 운영체제의 DNS 캐시, 라우터 캐시, ISP(Internet Service Provider)의 DNS 서버 순서로 진행된다. 여기서 찾지 못하면 상위 DNS 서버로 쿼리가 전송된다.
4. 라우팅 (Routing)
   • DNS 응답을 통해 얻은 IP주소를 바탕으로 라우팅을 진행한다.
   • 라우팅 과정에서 최적의 경로를 통해 요청이 목적지 서버까지 전달된다.
5. ARP (Address Resolution Protocol)
   • ARP 프로토콜을 사용해 목적지 IP주소를 물리적인 MAC주소로 변환한다.
   • 이 과정은 네트워크 계층과 데이터 링크 계층 사이에서 일어나며 로컬 네트워크 내에서 패킷이 전달되기 위해 필요한 단계이다.
6. 초기 연결 설정 (TCP 3-Way HandShake)
   • DNS, 라우팅, ARP를 거쳐 서버에 도착하면 브라우저(클라이언트)와 네이버(서버) 간의 신뢰성 있는 데이터 전송을 위해 TCP 3-Way HandShake로 연결이 설정된다.
7. HTTP 요청 전송 및 컨텐츠 다운로드
   • 연결이 설정되면 브라우저는 GET 요청을 보내 네이버의 웹 페이지 콘텐츠를 요청한다.
   • 네이버는 브라우저로부터 요청을 받고, 응답으로 HTML, CSS, JavaScript, 이미지와 같은 웹 페이지 콘텐츠를 브라우저로 전송한다.
8. 캡슐화 및 비캡슐화 과정
   • 캡슐화 : 요청 메세지는 브라우저의 애플리케이션 계층에서 시작해, 각 계층(TCP, IP, 데이터 링크)에서 각각의 프로토콜 헤더를 추가하며 캡슐화된다.
   • 비캡슐화 : 서버에 도달하면 각계층의 헤더가 역순으로 제거되며 원본 데이터가 추출된다.
   • 서버의 응답이 클라이언트로 전송될 때도, 역순으로 각 계층을 거쳐 캡슐화, 비캡슐화가 일어난다.
9. 브라우저 렌더링
   • 브라우저는 서버에서 받은 HTML, CSS, JavaScript를 파싱하여 DOM(Document Object Model) 트리와 CSSOM(CSS Object Model) 트리를 생성한다.
   • DOM과 CSSOM 트리를 결합해 렌더 트리를 만들고, 각 요소를 배치하고 스타일을 적용해 화면에 표시할 준비를 한다. 
   • DOM 트리: HTML 문서를 트리 구조로 표현하여 웹 페이지의 요소를 노드로 나타낸다.
   • CSSOM 트리: CSS를 트리 구조로 표현하여 각 요소의 스타일 정보를 저장한다.
   • 렌더 트리: DOM과 CSSOM을 결합해 실제 화면에 표시될 요소와 스타일을 포함하는 트리. 브라우저는 렌더 트리를 기반으로 웹 페이지를 화면에 그린다.
10.  최종 화면 출력
    • 브라우저는 렌더링 엔진을 통해 네이버 웹 페이지를 최종적으로 화면에 표시한다.

인터넷 브라우저의 구조 https://d2.naver.com/helloworld/59361

 

 

 

- 면접에서 자주 나오는 단골질문이니까 전체적인 흐름을 파악하고, 각 단계의 용어와 기능은 간략하게 설명하되, 중요한 과정은 놓치지 않도록 자주 읊어보자!!!

 

출처

https://tcpschool.com/webbasic/works

코딩교육 티씨피스쿨

https://blog.naver.com/jhc9639/222700552159

[CS전공지식면접] www.naver.com을 주소창에 치면 어떻게 될까요?

https://velog.io/@sylagape1231/%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-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%EC%9D%84-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%B4%EB%B3%B4%EC%9E%90

주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자