FE 기술면접 대비 / 브라우저가 웹서버로 요청을 보내는 과정

FeBase에서 출제한 FE 기초지식 테스트를 쳐봤다. 20점인가 그랬떤듯^^;

docs.google.com/forms/d/e/1FAIpQLSer5oRzyfqxpX8gg4_cQuPUpoMIyMJob369WCLYFtgisnh4Gg/viewform

2020 FeBase Season 1 Exam

 

FE 기술면접 질문으로도 많이 나오는듯 하여 위 설문에서 나온 것 뿐만 아니라 주워들은것 하나씩 작성하려 한다!

 

Q. 브라우저가 웹서버로 요청을 보내는 과정?

ex. www.google.com 요청

 

A. 

여기에 너무 잘 정리되어 있어서 이걸 보면 된다. 출처는 FEBase Github

samslow.github.io/development/2020/06/29/WebBasicConcept/

Javascript 기초 - 별에서 온 그대, Web이 동작하는 방식

 

아래는 내가 외우려고 작성해봄.

웹 서버로 요청

1. 사용자는 주소창에 도메인 www.google.com을 입력
2. 브라우저는 해당 도메인을 HTTP 규약에 맞춰 데이터 패킷을 준비한다.
3. 준비된 패킷은 ISP 까지 전달된다.
   1. 이때 클라이언트는 빠른 응답을 위해 Cache Server에 캐싱 해 놓은 결과가 있는지 먼저 확인하고 만약 캐시된 데이터가 있으면 더 진행하지 않고 이를 다시 클라이언트에 되돌려준다.
4. ISP는 DNS를 겸하기도 하기 때문에 요청으로 들어온 www.google.com의 IP 주소를 확인한다.
   1. 만약 해당 DNS에 정보가 없다면 다른 DNS 서버에 해당 도메인이 있는지 확인한다.
5. 브라우저는 216.58.220.142 가 www.google.com 의 IP 주소임을 알게 되고, 해당 IP 주소로 HTTP Request를 보낸다.
6. Google의 Web Application Server는 요청을 처리한다. (ex. db작업)
7. 사용자 요청에 맞는 컨텐츠를 Status Code같은 내용과 함께 HTTP Response로 돌려 보낸다.
8. 다시 수많은 Router들과 ISP를 거쳐 사용자의 브라우저에 컨텐츠가 도달한다.

웹 서버로부터 응답 받고 브라우저가 하는 일

1. 브라우저가 가지고있는 파서를 이용해 HTML문서를 DOM 트리 형식으로 파싱한다.
2. CSS를 파싱하여 스타일 구조체 CSSOM의 형식으로 만든다.
3. DOM과 CSSOM을 실제 화면에 표현하기 위한 데이터 구조인 렌더링 트리로 변환한다.
4. 해당 렌더링 트리를 그리고 화면에 표시한다.