단의 개발 블로그

웹 브라우저에 요청 시 일어나는 과정 본문

ETC

웹 브라우저에 요청 시 일어나는 과정

danso 2024. 11. 7. 16:54

면접 볼 때 당황스러웠던 질문이 있었다. 면접관님이 사용자가 www.naver.com 입력했을 때 어떤 과정을 거치는지 말씀해주세요 라고 하셨다. 당연히 어버버 했고, 그냥 뭐라고 했는지도 잘 기억이 나지 않는다. 해당 질문은 SW 엔지니어 인터뷰에서 나오는 단골 질문이라고 한다. 이번 기회에 정리를 해야겠다. 

 

  1. 사용자가 웹 브라우저에서(크롬, 엣지 등) https://www.naver.com을 요청한다.
    • 요청 주소 시작 점 부터 :// 이전까지를 프로토콜이라고 부른다. (프로토콜: 통신 규약)
    • https는 HyperText Tranfer Protocol Secure의 약자로 보안을 사용하여 서버와 통신할 수 있는 프로토콜이다.
    • 전송 계층에서 (TLS)으로 보안된다. 
    • 이외에도 ftp://, mailto://, file:// 등이 있다.
  2. 브라우저는 인터넷 사이트를 호스팅하는 서버를 파악하기 위해 naver.com 도메인을 검색하여 주소를 찾는다. (DNS)
    • DNS란 Domain Name System 의 약자로 1번에서 사용자가 naver.com로 요청하면 해당 값을 ip로 변환하는 것을 말한다.
    • DNS는 속도가 빨라야 하기 때문에 해당 데이터는 웹 사이의 서로 다른 계층과 인터넷 여러 곳에 위치하게 된다. 이를 캐시라고 부르며 웹 브라우저는 고유 캐시 -> 운영 체제 캐시 -> 라우터의 로컬 네트워크 캐시 ->  회사 네트워크 또는 인터넷 서비스 제공업체 캐시를 확인한다.
    • 웹 브라우저가 캐시 계층에서 IP 주소를 못 찾을 경우 회사 네트워크 혹은 ISP의 DNS 서버가 재귀적으로 DNS 조회를 수행한다.
  3. 웹 브라우저(사용자)가 서버와 TCP 연결을 한다.
    • 보통 인터넷 통신 데이터를 패킷이라고 부른다. 패킷은 TCP/IP(Transmission Control Protocol/Internet Protocol)이라고 하는 전송 제어 프로토콜을 사용하여 라우터, 교환기 등을 따라서 연결할 IP 주소의 웹서버를 찾는다.
    • 통신 거리가 늘면 그만큼 자원을 많이 사용하기 때문에 CDN(콘텐츠 전송 네트워크)를 사용하여 가까이 위치 시킨다.
    • 네트워크가 어떻게 이동하는지 확인하려면 traceroute naver.com 을 입력하면 추적할 수 있다. 이때 hop 이라는 용어가 사용되는데 hop이란 패킷이 네트워크 상에서 이동할 때 거치는 라우터나 스위치 등 장비 수를 카운트 한 것을 의미한다.
    • 브라우저가 서버를 찾으면 TCP 연결을 설정하고, HTTP 프로토콜로 통신을 시작한다. 만약 HTTPS를 사용하는 경우 주고 받는 데이터 암호화를 위해 위에서 언급한 TLS(Transport Layer Security) 핸드셰이크 과정을 추가로 수행한다.
  4. 웹 브라우저(사용자)가 HTTP 요청한다.
    • 사용한 프로토콜 통신 규칙에 따라 콘텐츠 요청을 하기 위해서 규격에 맞게 헤더와 메타 데이터 설정을 한다.
  5. 웹 서버가 요청을 처리하고 응답을 전송한다
    • 사용자가 요청을 받고 요청라인, 헤더 및 본문의 정보를 기반으로 요청을 처리하고, 응답한다.
  6. 웹 브라우저는 서버가 보낸 데이터를 렌더링한다.
    • 서버로 부터 응답을 받은 데이터 헤더를 검사하여 정보를 확인하고 페이지를 보여준다.

 

 

위 과정을 간단히 요약하면

  1. 웹 브라우저에서 naver.com 요청
  2. 먼저 캐시된 데이터에 naver.com의 실제 IP 주소를 조회, 만약 없을 경우 DNS를 검색하며 naver.com의 IP 주소를 조회한다.
  3. 찾은 IP 주소로 해당 IP 주소에 위치한 서버와 TCP 연결을 한다.
  4. 웹 브라우저는 연결 맺은 서버로 사용자가 요청한 프로토콜에 맞게 요청한다.
  5. 해당 서버는 웹 브라우저의 요청을 처리하고 응답을 전송한다.
  6. 웹 브라우저는 전송 받은 데이터로 콘텐츠를 렌더링한다.

 

아래 링크에 잘 기술되어 있어서 도움을 많이 받았다.

참고

https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/

 

 

'ETC' 카테고리의 다른 글

코드 스타일  (0) 2024.08.27
Github 협업 방식 (Upstream/Downstream & Remote repository)  (0) 2024.08.26
GitHub 이력서 작성하기  (0) 2024.08.24