[JS] 주소창에 www.google.com을 치면 어떤 일이 일어나나요?

유나영·2023년 4월 2일
0

JavaScript

목록 보기
3/4
post-thumbnail

웹 브라우징 동작 방식

1. 먼저 브라우저는 캐싱된 DNS에서 해당 도메인 주소와 대응하는 IP주소를 찾습니다.

캐싱된 기록이 있다면 바로 웹페이지를 렌더링해주며 없다면 다음 단계로 넘어갑니다.

DNS(Domain Name System Servers)란?
URL들의 이름과 IP주소를 저장하고 있는 데이터베이스입니다. 숫자로 된 IP주소 대신 사용자가 사용하기 편리하도록 주소를 매핑해주는 역할을 합니다.

2. 브라우저가 HTTP를 사용하여 DNS에게 입력된 주소를 요청합니다.

해당 도메인 네임에 맞는 IP 주소를 찾기 위해 DNS Query를 날립니다. DNS Query의 목적은 여러 다른 DNS들을 검색해서 해당 사이트의 IP 주소를 찾는 것입니다. 이러한 검색을 recursive search 라고 부릅니다. IP 주소를 찾을 때까지 DNS에서 다른 DNS를 오가면서 반복적으로 검색을 하던지, 못 찾아서 에러가 발생할 때까지 검색을 진행합니다. 이렇게 해서 찾은 IP 주소를 다시 브라우저에게 전달합니다.

3. 브라우저가 서버와 TCP connection을 합니다.

TCP/IP 란?
컴퓨터들끼리 네트워크로 소통을 할 때 필요한 통신규약입니다. IP 주소 지정 방법, 떨어진 상대를 찾기 위한 방법과 그 곳에 도달하는 순서, 그리고 웹을 표시하기 위한 순서들에 대해 정의한 규칙 등을 말합니다.

브라우저가 올바른 IP 주소를 받게 되면 IP 주소에 해당하는 서버와 connection 을 빌드하게 됩니다. 브라우저는 인터넷 프로토콜을 사용해서 서버와 연결이 됩니다. 웹사이트의 HTTP 요청의 경우에는 일반적으로 TCP 를 사용합니다.

클라이언트와 서버 간의 데이터 패킷들이 오가려면 TCP connection이 되어야 합니다. TCP/IP three-way handshake 라는 프로세스를 통해 클라이언트와 서버 간의 connection이 이뤄지게 됩니다.

TCP/IP three-way handshake란?
1. 클라이언트 머신이 SYN 패킷을 서버에 보내고 connection 을 열어달라고 물어본다.
2. 서버가 새로운 connection 을 시작할 수 있는 포트가 있다면 SYN/ACK 패킷으로 대답을 한다.
3. 클라이언트는 SYN/ACK 패킷을 서버로부터 받으면 서버에게 ACK 패킷을 보낸다.

이 과정이 끝나면 TCP connection 이 완성됩니다.

4. 브라우저가 웹 서버에 HTTP 요청을 합니다.

TCP로 연결이 되었다면 데이터를 전송하면 됩니다.

클라이언트의 브라우저는 GET 요청을 통해 서버에게 google.com 웹 페이지를 요구합니다.

이 요청을 할 때 다른 부가적인 정보들도 함께 전달이 됩니다.

  • browser identification (User-Agent header)

  • 받아들일 요청의 종류 (Accept header)

  • 추가적인 요청을 위해 TCP connection을 유지를 요청하는 (connection header)

  • cookie

  • etc…

5. 서버가 요청을 처리하고 response를 생성해서 클라이언트로 보냅니다.

서버는 웹서버를 가지고 있습니다. (ex. Apache) 이들은 브라우저로부터 요청을 받고 request handler에게 요청을 전달해서 요청을 읽고 response를 생성하게 됩니다. 이 request handler는 요청과 요청의 헤더, 쿠키를 읽어서 요청이 무엇인지 파악하고 필요하다면 서버에 정보를 업데이트 합니다. 그 다음에 response를 특정한 포맷으로(JSON, XML, HTML) 작성합니다.

서버의 response에는 요청한 웹페이지, status code, compression type(Content-Encoding) - 어떻게 인코딩 되어 있는지, 어떻게 페이지를 캐싱할지(Cache-control), 설정할 쿠키가 있다면 쿠키, 개인정보 등이 포함됩니다.

7. 브라우저가 HTML content를 보여줍니다.

브라우저는 HTML 파일을 파싱하여 페이지를 렌더링해줍니다.


마치며

사실 한줄로 끝낸 7단계도 파고들면 많은 일들이 일어나는데 다음 포스팅에서 자세히 다뤄보려고 한다.
처음 접했을때는 이게 뭔말이여🙄 했던 웹의 동작 방식이였는데 몇번을 서치하고 천천히 읽고 이해하니 생각만큼 어려운 개념은 아니였던 것 같다. 아직은 참고 레퍼런스를 필사한 수준이긴 하지만, 나중에는 나만의 언어로 다시 정리할 수 있을만큼 성장하길 바라며 이만 .. 🛴

참고
https://j-ho.dev/cs-4/

https://babycoder05.tistory.com/entry/wwwgooglecom-%EC%9D%84-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90-%EC%B9%98%EB%A9%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC-What-happens-when-type-wwwgooglecom

profile
프론트개발자입니다.

0개의 댓글