React 프레임워크를 활용하든, php를 활용하든
웹 페이지를 만들어본 경험이 있는 사람들은 많을 것입니다
때문에 첫 페이지가 출력된 이후의 과정에 대해서는 대부분 잘 설명할 수 있을 것입니다.(자신이 활용하는 도구에 한 해).
그런데, 웹페이지가 화면에 출력되기까지 어떤 과정을 거치는지는 잘 모를 수 있을 것 같습니다.
그래서 웹 브라우저에 URL을 입력하고 웹 페이지의 화면이 출력되기까지의 과정을 살펴볼까 합니다.
(왜 학부에서 네트워크를 배우는지 깨닫게 되는 순간이었습니다.)
1. 일단, 웹 브라우저에 URL을 입력하고 Enter를 클릭합니다.
2. 그럼 바로 URL의 주소로 이동 웹 브라우저가 입력한 URL을 분석하며 일을 하기 시작합니다.
(다음은 URL 구조입니다.)
Scheme://:@:/
여기서 Scheme은 Protocol로, http, ftp, sftp, pop3, IMAP 등을 말합니다.
https://dingcodingco.tistory.com/manage/newpost/?type=post&returnURL
예전에, 제가 글을 썼던 티스토리의 위치입니다.(당시에 썻던 글을 재작성하였사옵니다..)
분석해보면 https Protocol을 사용해 dingcodingco.tistory.com 라는 Domian에 접근합니다.
이때, Path는 manage/newpost이고,쿼리는 type=post&returnURL 인 것입니다.
3. URL을 분석한 다음,
1) URL 구조에 맞지 않는다 => 사용 중인 웹 브라우저의 검색엔진으로 입력어를 검색한다.
2) URL 구조가 맞다 => HSTS (HTTP Strict transport security) 목록을 받아와 url 내의 주소와 목록의 주소가 일치하면,
https로 그렇지 않으면 http로 첫 요청을 보낸다.4. DNS( Domain Name Server )에 내가 접근하려는 name 주소의 IP 주소를 요청한다.
1) Reculsive server의 cache를 먼저 확인한다. 있으면 그 IP 주소를 리턴한다.
2) 없을 경우 DNS 시스템에 따라, Root server - TLD server - Authoriative server에 ip 주소를 물어본다.5. IP주소를 받은 다음, ARP를 통해 실질적으로 내가 접근해야할 IP주소를 할당받은 녀석의 MAC 주소를 추적한다.
1) MAC주소를 알아야하므로 OSI의 2계층도 연관되어 있다.
2) subnet인지 아닌지 판단하고, router 내에 존재할 경우(local Network), routing table을 추적하여 MAC 주소를 알아낸다.
3) local Network가 아닐 경우, gateway를 타고 밖으로 나가 상대방의 MAC 주소를 찾아낸다.
이 과정에서, ARP를 broadcasting 한다.
4) 상대방의 IP주소와 MAC주소를 응답 받으면, 다시 DNS프로세스를 시작한다.
5) DNS에서 53번 포트를 통해 UDP로 실시하며 데이터 용량이 큰 경우, TCP로 진행한다.6. 대상과 TCP 통신을 통해 Socket을 연다.
1) OSI 7계층을 통해 클라이언트에서 서버까지 데이터 전달 및 세션 연결
2) 이때, OSI(4계층-transport Layer)에서 Session을 연결할 때 TCP 연결을 진행
7. HTTPS => TLS(Seucure Sockets Layer)과정 추가
1) SYN ~ SYN, ACK : TCP socket 생성 - TLS는 TCP로만 통신
2) SYN, ACK ~ ACK (TCP 연결 상태) : 클라이언트는 TLS 버전과 옵션, 사용가능한 대칭 암호를 평문으로 전송
3) (TLS인 경우 진행) ServerHello,Certificate,ServerHelloDone : 서버측에서 2번에서 클라이언트가 보낸 TLS 버전과 옵션 중 자신에게 맞게 선택하고, 클라이언트가 보낸 암호 목록 중 압호 조합을 결정하고 인증서와 함께 반환
4) (TLS인 경우 진행) ClientKeyExchange, ChangeCiperSpec, Finished (Client) : 양측이 TLS 버전과 암호를 협상 및 키 교환 진행. 이 때 키교환은 세션에서 이루어질 대칭 키를 설정
5) ChangeCiperSpec, Finished (Server) : 클라이언트가 전송한 키 매개변수 처리 + Mac 주소 확인하여 무결성 확인 + 클라이언트에 Finished message 반환
6) Client : Finished message 와 Mac 주소가 모두 정상이면 터널 설정 및 통신 시작8. HTTP 프로토콜 요청
1) Client가 서버에 HTTP 프로토콜을 요청한다.
형식 => GET / HTTP/1.1 Host: google.com Connection: close [other headers]
이때, [other headers]는 key : value 쌍을 말한다.
2) HTML에서 참조하는 모든 페이지(Image, css, favicon.ico 등)에 대해 이 과정을 반복한다.9. HTTP의 응답
1) HTTPD(HTTP Demon : HTTP 요청 / 응답 처리 서버 => Apache, Nginx, IIS 등) 가 요청을 수신
2) 매개변수 구분 : HTTP Method(GET, POST, PUT, DELETE....) : URL을 직접 입력하는 경우는 GET + Domain ( tistory.com ) + 경로 ( /path )
3) tistory.com에 가상 호스트가 있는지 체크
4) 서버는 tistory.com이 GET 요청 수락 가능한지 체크
5) 요청에 따른 컨텐츠 불러옴
6) 해석후 출력을 클라이언트로 스트리밍10. 웹 브라우저의 그림 그리기
1) 구문 분석 (HTML, CSS, JS) + 렌더링 ( DOM Tree 구성 - 렌더 트리 구성 - 렌더트리 레이아웃 배치 - 렌더트리 그리기 )
2) HTML parsing, CSS parsing, Page Rendering, GPU Rendering 을 통해 그림을 그려냄
개발자를 위한 개발자입니다.