프론트엔드 개발 블로그

google.com을 브라우저 주소창에 입력하면 일어나는 일

by heeji_

오늘은 브라우저 주소창에 google.com을 치면 일어나는 일에 대해 공부해봤습니다.
네트워크 측면에서 바라봤을 때 일어나는 일에 중점을 두고 살펴보겠습니다.

 

1. 브라우저가 도메인 주소에 매치되는 IP 주소를 찾습니다.

  • DNS 데이터는 브라우저와 인터넷의 다양한 위치에 캐싱됩니다. 브라우저의 고유한 캐시, 운영체제 캐시, 회사 네트워크 또는 ISP의 DNS 서버 캐시를 확인합니다.
  • 만약 캐시에서 찾지 못했다면 DNS 서버가 해당 도메인을 호스팅하는 서버의 IP 주소를 찾습니다. 인터넷에 있는 여러 DNS 서버에 요청하여 검색될 때까지 재귀적 DNS 조회를 수행해 웹사이트에 대한 올바른 IP 주소를 찾을 때까지 진행됩니다.

 

2. 브라우저가 웹 서버와 TCP 연결을 시작합니다.

  • TCP 연결은 3-way handshake 과정을 통해 이루어집니다.
    • TCP/IP란?
      컴퓨터가 서로 통신할 때 특정 규칙이나 프로토콜을 사용해 데이터를 송수신할 수 있습니다.
      그 중 하나가 TCP/IP(Transmission Control Protocol/Internet Protocol)입니다.
    • 3-way handshake 과정은 다음과 같습니다.
      1. 서버에 SYN패킷을 보내 새 연결이 가능한지 여부를 묻는다.
      2. 연결을 할 수 있는 열린 포트가 있는 경우 SYN/ACK 패킷을 사용하여 SYN패킷의 ACK(승인)으로 응답한다.
      3. 클라이언트는 서버로부터 SYN/ACK 패킷을 수신하고 ACK패킷을 전송하여 승인한다.


✚ 만약 웹서버가 접근하고자 하는 클라이언트와 물리적으로 멀리 있다면 데이터
전송 속도가 차이 나겠죠. 그래서 요즘 많은 웹사이트들은 직접 서버에 연결시키기
보다는 CDN을 사용해 정적/동적 컨텐츠를 웹 브라우저 가까이에 위치 시킵니다.

 

3. 브라우저가 웹서버에 HTTP/HTTPS 요청을 보내고 서버는 이를 처리하고 응답을 내려줍니다.

  • HTTP란?
    • HTTP (Hypertext Transfer Protocol)클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜입니다. 먄약 웹 브라우저는 서버 데이터를 받아오는 요청의 이름을 FETCH라고 하고 서버에서는 GET으로 이름을 바라보고 있다면 소통이 제대로 되지 않겠죠! 그래서 메서드 이름부터 url 등을 어떻게 주고 받을지 규칙을 정해놓은 것입니다.
  • HTTPS란?
    • HTTPS (Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전입니다. HTTP 요청 및 응답을 SSL/TLS 기술에 결합한 것입니다. HTTP는 일반 텍스트를 주고받는데 보안에 취약해 다른 사용자가 이를 탈취하기 쉽습니다.
    • 이 단계에서 HTTPS를 사용하는 경우는 데이터 암호화를 위한 TLS (Transport Layer Security) handshake라는 과정을 추가로 진행합니다.

    1. 사용자가 브라우저에서 HTTPS 웹 사이트를 방문합니다.
    2. 브라우저는 신뢰성 검증을 위해 서버에 SSL 인증서를 요청합니다.
    3. 서버는 public key가 포함된 SSL 인증서를 응답으로 전송합니다.
    4. 브라우저에서 인증이 되면 public 키를 사용해 secret session key가 포함된 메시지를 암호화하고 전송합니다.
    5. 서버는 private key를 사용하여 메시지를 해독하고 session key를 검색합니다. 그 후, session key를 암호화하고 브라우저에 승인 메시지를 전송합니다.
    6. 이제 브라우저와 웹 서버 모두 동일한 session key를 사용하여 데이터를 안전하게 교환할 수 있습니다.

 

4. 브라우저가 HTML 컨텐츠를 그려 보여줍니다.


 

참고문서

'공부기록' 카테고리의 다른 글

이벤트 캡쳐링과 버블링, 이벤트 위임  (0) 2024.03.22
HTML 정리  (0) 2024.03.22
SPA란?  (0) 2024.03.22
reflow와 repaint 그리고 가상돔  (0) 2024.03.22
critical rendering path란  (0) 2024.03.22

블로그의 정보

아자아자

heeji_

활동하기