브라우저의 작동 원리를 네트워크의 관점에서 살펴보자. Rendering Engine이나 JavaScript Interpretor와 같은 브라우저 구성 요소들이 HTML, CSS, JavaScript 파일을 분석해 화면에 그려주려면 먼저 네트워크 통신을 통해 HTML, CSS, JavaScript 파일들, 그 외 이미지 파일과 같이 웹사이트를 구성하는 리소스들을 서버에 요청해 받아와야한다.

예를 들어 주소창에 http://abc-company.com을 입력했다고 가정하고 네트워크 요청-응답 과정을 간략히 나타내보면 다음과 같다:

1. 주소에서 http 부분을 추출한다

서버와 http 프로토콜로 리소스를 주고받아야함을 인지한다.

2. domain name을 추출한다

예시의 경우 abc-company에 해당한다.

3. Domain Name Server(DNS)에 요청해 IP(Internet Protocol) 주소를 받아온다

웹사이트를 그리기 위한 리소스를 받아오려면 리소스가 저장된 서버의 주소를 알아야한다. abc-company와 같은 domain name은 사람이 읽거나 기억하기 좋으라고 서버의 실제 주소인 IP 주소에 매핑된 값이다. DNS 서버에 요청해 abc-company에 해당하는 IP 주소가 무엇인지 알아낸다.

4. 서버에 HTTP GET 요청을 보내 리소스를 요청한다

5. 웹 클라이언트와 서버간에 TCP 채널을 생성한다

IP가 데이터 송수신시에 출발지와 목적지를 지정해주는 프로토콜이라면 TCP(Transmission Control Protocol)는 데이터가 순서대로 손상 없이 전달됨을 보장해주는 프로토콜이다. TCP 프로토콜을 사용해 TCP 채널을 생성한 후 안정적으로 데이터를 받아올 수 있도록한다.

6. HTTP 요청에 대한 응답으로 HTML, CSS, JS 등의 파일을 받아온다

References

https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-ajax-requests-and-api-interactions/modules/bwa-http-requests/articles/http-requests
https://velog.io/@eassy/www.google.com을-주소창에서-입력하면-일어나는-일