브라우저에 주소를 입력하면 무슨 일이 생길까?

우리가 크롬이나 엣지 등 브라우저를 켜고 https://www.google.com 이라는 주소를 입력하고 enter 키를 눌렀을 때, 우리는 어떤 정보를 알 수 있을까?? 우선 이 주소를 뜯어보자!

https://는 우리가 흔히 말하는 통신 프로토콜을 말한다. HTTPS는 HTTP(Hypertext Trasfer Protocol)에 전송 계층 보안 (TLS)를 사용하여 Secure를 붙인 합성어 이다.
TLS는 통신을 보호하는 암호화 프로토콜을 말한다. TLS를 이용하여 HTTP 통신 시 header 혹은 body에 담는 정보들 (암호, 결제 정보, 로그인 정보 등..)이 서버에 전송될 때 암호화되어 보내진다.
www.google.com은 웹 사이트 도메인 이름을 뜻한다. 숫자로 이루어진 IP 주소의 경우 하나하나 기억하기 힘들기 때문에 우리는 이름으로 기억하기 위하여 도메인 이름을 지정한다.
blog를 접속한다고 가정했을 때, https://이곳은 블로그예요/blog/first로 보면 blog는 서버가 요청받은 리소스인 first로 갈 수 있는 path를 말한다.
위 블로그 주소에 first는 리소스 이름을 말하며 서버에 저장되어 있는 html과 같은 정적 컨텐츠를 말한다.

입력한 도메인 이름과 일치하는 IP 주소를 조회한다.
- 주소를 입력하는 순간 브라우저는 인터넷에서 연결할 서버를 파악한다.
- 이 때 도메인을 중심으로 이 웹 사이트를 호스팅하고 있는 서버에서 IP 주소를 조회한다.
- 이 때 이를 이용하는 서버를 DNS (Domain Name Server)라고 하고 이 복잡한 과정을 빠르게 처리하기 위해 웹 브라우저 사이에 다른 계층, 다른 위치에 골고루 분포되어 임시로 저장된다. 우리는 이를 Cache라고 부른다.
- 즉 웹 사이트를 불러오기 위해 브라우저는 고유 캐시, 운영 체제의 캐시, 라우터의 로컬 네트워크 캐시, DNS 서버 캐시를 확인한다.
브라우저가 서버와의 TCP 연결
- 웹 브라우저의 요청 패킷은 TCP/IP라고 불리는 전송 프로토콜을 사용하여 라우터 장비 등을 타고 라우팅 테이블을 따라 연결할 IP 주소가 있는 Web server를 찾는다.
- 너무 많은 웹사이트를 찾는 행위는 비효율적일 수 있기 때문에 CDN(콘텐츠 전송 네트워크)를 사용하여 정적 혹은 동적 콘텐츠를 웹 브라우저 근처에 위치 시키는 방법을 사용하기도 한다. (AWS CloudFront..)
- 영상, 음악, 이미지는 외국에 저장되어 있는 Web server보다 네트워크를 제공하는 데이터 센터에 배포 서버가 있을 수 있다. (각 클라우드의 데이터 센터 region 확인 필요..)
- 정리하여, 인터넷에서 서버를 찾으면 웹 서버와 TCP 연결을 설정하고 HTTP를 활용하여 평문 통신을 시작한다. (HTTPS를 사용하는 경우 TLS handshake를 수행한다.
  - TLS는 암호화, 인증, 무결성을 실행하는 보안 프로토콜이고 연결 시 TLS handshake라는 순서를 사용하여 초기화 작업을 한다. 이를 이용하여 클라이언트와 Web server간 통신을 한다.
    - TLS 버전 선택
    - 암호 제품 선택
    - TLS 인증서를 이용한 서버 신원 인증
    - Handshake 완료 후 메시지 암호화를 위한 세션 키 생성
1. 브라우저가 HTTP 요청을 서버로 전송
  - 서버에 연결이 성공하면 HTTP(s) 프로토콜에 대한 통신 규약을 따라 요청을 전송한다.
    - GET, POST, PUT, DELETE, PATCH 메서드를 활용한다.
    - path
    - HTTP 버전
  - 요청 헤더에 대한 예시이다.
```
GET /blog/first HTTP/1.1
Host: rootjang.blog.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: curl/7.64.1
Accept: */*
```
2. Web server가 요청을 처리하고 응답을 전송
  - 위 요청 헤더, body request 등을 받아 응답을 처리하고 클라이언트(브라우저)로 다시 전송한다.
    - 요청 상태를 알려주는 상태
    - 응답 처리 방법
    - 요청된 리소스
```
HTTP/1.1 200 OK
Date: Sat, 4 Mar 2023 16:30:30 GMT
Server: nginx
...
Content-Type: text/html; charset=utf-8
```
  - 이 때 전송받는 리소스는 html 콘텐츠, 이미지 파일 등 정적 파일, json 등이 있다.
  - 대부분 Web server가 동적 리소스를 생성하여 HTML를 구축하고 동적 데이터와 결합하여 응답으로 전송한다. 이를 이용하여 브라우저가 웹 사이트를 렌더링 한다.
브라우저가 콘텐츠 렌더링
- 이렇게 응답을 받으면 응답 헤더를 검사하여 리소스를 렌더링하는 방법을 확인한다. 일반적으로 Content-Type을 확인하여 어떠한 리소스를 수신했는 지 확인한다.
- 우선 브라우저는 HTML을 parsing하고 이 때 CSS, JavaScript가 사용하는 데이터를 추가 요청할 수 있다.

네트워크 환경에서 데이터가 오고 가는 과정을 이해하는 것이 왜 중요한가?

웹 어플리케이션은 동적인 동작이 훨씬 중요해졌다. 이 과정에서 데이터 전송 중 문제가 발생한다면, 그에 대한 네트워크 오류가 무엇이 발생했는 지를 파악하는 것이 중요하다. (전송 중 데이터가 손실되거나 손상됐을 경우, 서버에 문제가 있을 경우 등)
데이터는 항상 민감한 정보를 포함하고 있기 때문에 데이터 전송 방식을 이해하므로써 암호화, 인증 등 보안 기능을 강화할 수 있다.
데이터를 전송하는 프로세스를 전송 방식, 프로토콜, 데이터 크기 등을 고려하여 최적화가 가능하다.
서버 개발자, 네트워크 개발자와의 협업에서 정보 공유가 더 원활하다.
따라서 프론트엔드 개발자는 데이터를 가져오기 위한 HTTP 요청 및 응답, 데이터 전송 프로토콜에 대한 이해가 어느 정도 필요하다.
이를 전송하는 방법을 선택할 수 있다. (Socket, Ajax 등등)
또한 네트워크 전송에 대한 성능을 최적화하여 데이터 전송 과정에서 발생하는 시간, 지연, 캐싱, 렌더링 등을 고려하여 UI를 설계할 수 있다.