인터넷 창에 URL을 입력하고 나서 데이터가 나오기까지 어떤 과정을 겪는지를 알아보자
1.브라우저의 URL 해석 및 파싱
가장 먼저 일어나는 일은 URL을 해석한다
Https//www.naver.com:443
- https : 프로토콜
=> http : 하이퍼텍스트 전송 규약이라는 뜻으로 HTML같은 문서를 웹 브라우저가 웹 서버에 요청하는 프로토콜이다.
프로토콜이란? 네트워크에서 데이터를 교환하거나 전송하기 위한 방법들의 집합이다.
https : http와 동일하지만 통신 내용을 암호화한다
- 도메인이름
- 443 : Port
즉, 어떤 프로토콜을 사용할 것인지, 어떤 URL로 서버에 요청을 보낼 것인지, 어떤 포트번호로 요청할 것인지 해석하는 과정이 이뤄진다.
1-2 HSTS
https 프로토콜을 사용하여 접근해야 하는데 만약 http로 접근한다면??
그렇다면 서버측에서 302: Redirect 를 통해 https로 전환시킬 수 있다. 하지만 이 방법은 http연결을 거쳐서 https로 전환되는 과정이기 때문에 쿠키 탈취 등 보안상 안전하지 못하다 따라서 https를 클라이언트에게 강제하도록 해야하는데, 이 때 HTST를 사용한다
HTST ?
HTTP Strict Transport Security(HSTS): 웹 브라우저가 HTTPS 프로토콜만을 사용하여 서버와 통신하도록 하는 기술로 HTST 응답을 받은 웹 사이트에 대해서 HTTPS프로토콜 사용을 강제화한다 HTTP를 이용한 연결 자체가 최초부터 시도되지 않으며 클라이언트 측에서 차단되다
2.DNS서버에서 IP주소 받아온다 (URL -> IP Address)
컴퓨터는 도메인을 이해하지 못한다. 그래서 도메인을 IP주소로 변경해야한다. 이 역할을 바로 DNS(Domain Name System)이다.
1) 브라우저는 해당 URL의 주소 IP주소를 Local DNS에 요청한다
2) Local DNS에 해당 URL이 존재한다면 바로 응답을 보내고 존재하지 않는다면 root DNS서버에 해당 URL의 IP주소를 다시 요청
3) root DNS서버에도 해당 URL이 없다면 하위 DNS서버에 요청하라는 응답을 준다
4) 하위 DNS서버에 요청하라는 응답을 받은 Local DNS는 .com 도메인을 관리하는 DNS서버에 해당 URL의 IP주소를 다시 요청한다.
5) .com을 DNS서버에 해당 URL의 IP주소가 없다면 또 다시 하위 DNS서버에 요청하라는 응답을 준다
6) Local DNS서버는 naver.com을 관리하는 DNS서버에 다시 요청을 보낸다
7) naver.com을 관리하는 DNS서버에게 IP주소를 응답받은 Local DNS는 해당 IP주소를 캐싱하고 응답하다.
3. 라우터를 이용해 접속하려는 네트워크로 가는 최적의 경로를 찾는다
DNS에게 IP주소를 얻었지만 우리가 접속하려는 서버는 동일한 네트워크 안에 위치하고 있지 않다. 따라서 라우터를 통해 해당 서버의 게이트웨이를 찾아 우리가 원하는 서버의 네트워크로 이동해야 한다.
4) DNS서버에서 응답 받은 IP주소를 MAC주소로 변환
IP주소란?
네트워크 통신에 있어서 각각의 통신기기에 할당된 식별번호를 나타낸다.
MAC주소란?
통신기기의 식별번호는 같지만 MAC주소는 통신기기의 하드웨어 자체에 부여된 고유한 식별번호를 나타낸다. 세상에 단 하나밖에 없는 유니크한 값을 가지며, 변경되지 않는다.
이러한 특징으로 MAC주소 외부에서 내부의 사설 IP로 통신을 요청할 때 중요한 역할을 한다. 사설 IP는 외부에서 볼 수 없기 때문에 어떤 사설 IP가 최종 목적지인지 알 수 없지만, MAC주소를 알고 있다면 IP주소에 구애받지 않고 원하는 최종 목적지에 도달할 수 있기 때문이다.
라우터에서는 IP주소에 해당하는 컴퓨터가 누군지 알아내기 위해 MAC주소가 필요하다
MAC주소를 확보했다면 TCP소켓 연결을 진행한다.
5. HTTPS 프로토콜 요청 / 응답
이제 TCP소켓을 통해 연결이 완료 되었을 때, URL페이지를 달라고 서버에 요청을 보낸다. 서버는 응답을 받고, 응답이 가능하다면 브라우저에게 해당 요청에 대한 응답을 생성하여 전달한다.
6. 브라우저가 응답
응답을 받은 브라우저는 웹 페이지를 표시한다.
'Frontend' 카테고리의 다른 글
Webpack이란 무엇이며 왜 사용할까요? (0) | 2021.12.20 |
---|---|
0.1 + 0.2 !== 0.3 (0) | 2021.12.19 |
객체지향프로그래밍이란? (0) | 2021.11.07 |
사이드작업 / 웹페이지 따라 만들기 (0) | 2021.08.18 |
HTML과 CSS 복습 및 기초다지기 (0) | 2021.07.25 |