[매일메일] 사용자가 웹사이트에 접근하면 발생하는 일?(FE.241225/BE.250110)

프론트엔드 관점	백엔드 관점
[1단계] DNS 조회(DNS Lookup): 도메인을 IP 주소로 변환
- 브라우저가 캐시된 DNS 기록을 확인함 - 처음 접속하는 도메인인 경우 로컬 DNS 서버에 요청함	- 도메인을 IP 주소로 변환함 - 어플리케이션 계층(7th 계층)에서 이루어짐
[2단계] TCP(Transmission Control Protocol) 연결
- 브라우저는 서버와 3-way handshake를 수행해 TCP 연결함 1. 브라우저가 SYN 패킷 보냄 2. 서버가 SYN-ACK 패킷 보냄 3. 브라우저가 ACK 패킷 보냄	- 브라우저는 서버와 통신을 시작함 - HTTP는 TCP/IP 기반으로 작동, TCP 3-Way Handshake수행 - 전송 계층(4th 계층)에서 이루어짐
[3단계] HTTP Request
- 웹페이지를 요청하는 메시지 - HTTP 요청: GET/HTTP/1.1 - HTTPS 요청: SSL/TLS Handshake(보안인증서 교환)	- Packet 형태로 GET/HTTP/1.1 요청을 보냄 - TCP Protocol을 통해 80번 포트로 전달 - 네트워크 계층(3th)에서 IP 주소를 사용   + 데이터링크 계층(2th)에서 MAC 주소를 사용해 패킷 전송
[4단계] HTTP Response
- 서버가 요청에 따라 리소스를 브라우저에게 보냄 - HTTP 응답 코드(200 OK) + HTML, CSS, JavaScript	- 서버에서 상태 코드(200 ok)와 웹 페이지 데이터를 전송함 - 브라우저에서 HTML,CSS,JS를 해석해 화면을 렌더링
[5단계] 브라우저 렌더링 파이프 라인	[5단계] TCP 연결 종료
1. DOM과 CSSOM 생성하고, 렌더 트리 구성 2. 레이아웃과 페인트 단계를 통해 화면에 표시	- 4-Way Handshake로 TCP 연결 종료

 

 

매일메일 질문 중에서 프엔/백엔이 같은 질문을 가져온 게 신기해서 합쳐봤습니다

전체 흐름은 똑같은데 포커싱 한 부분이 조금 다르네요

---

출처

1. 매일메일. 250110. 사용자가 웹사이트에 처음 접근했을 때 발생하는 일련의 과정에 대해 설명해 주세요. 89번

2. 매일메일. 241225. 인터넷 창에 www.google.com  를 입력하면 무슨 일이 일어나는지 설명해주세요. 20번

https://maeil-mail.kr

 

관련된 이 블로그의 다른 글: HTTP

https://developer-dreamer.tistory.com/101