URL 구조

예를 들어 이런 URL이 있다고 하자.

https://www.example.com:8443/path/to/page.html?search=apple&sort=asc#reviews

복잡해보이지만 실제론 브라우저와 서버가 통신하기 위한 정보가 전부 들어 있다.

프로토콜 (Scheme)

https

이 부분은 브라우저와 서버가 어떤 방식으로 통신할지 를 의미한다.

http → 일반 통신
https → TLS 암호화 통신 (SSL)
ftp → 파일 전송

도메인 (Host)

www.example.com

이건 사람이 읽기 쉬운 서버 주소다.

근데 브라우저는 실제로 도메인을 이해하지 못한다. 즉 결국엔 IP 주소가 필요하다.

여기서 DNS가 등장한다.

DNS의 개념

google.com
↓
DNS 조회
↓
142.x.x.x

처럼 IP 주소로 변환하는 과정이 먼저 일어난다.

즉 브라우저는 사실상 “이 도메인의 실제 서버 주소가 어디인지” 를 먼저 물어보고 있다.

포트는 “서버 안의 문 번호”

처음엔 포트 개념이 가장 추상적이었다.

왜 서버 주소 뒤에:

:3000
:8080
:3306

같은 숫자가 붙는지 이해가 안 갔다. 서버 내부 어떤 프로그램과 연결할지 를 의미한다고 보면 될것 같다.

예를 들어

80 → HTTP
443 → HTTPS
3306 → MySQL
6379 → Redis

즉 하나의 서버 안에서도 여러 서비스가 동시에 동작할 수 있다.

Next.js 개발을 할때도 포트를 쓰고있다. 처음엔 그냥 관습처럼 보였는데,
실제로는 3000번 포트에서 실행 중인 Next.js 서버에 연결하고 있었던 것

Path는 서버 안의 리소스 위치

/path/to/page.html

이건 서버 내부 어떤 리소스를 요청하는지 의미한다.

Query String

?search=apple&sort=asc

이 부분

처음엔 그냥 검색용 파라미터 정도로 생각했다.

검색
필터링
페이지네이션
상태 공유

전부 여기 들어간다.

Hash(Fragment)는 서버로 안 간다

#reviews

이 부분은 브라우저 내부 이동용이다.

즉 HTTP 요청에 포함되지 않는다.

URL 전체가 서버로 가는 줄 알았는데 아니다. 실제로는 Fragment는 브라우저 전용

전체 과정

1. DNS 조회

브라우저는 먼저 도메인을 IP로 변환한다.

example.com
↓
192.x.x.x

이 과정도 네트워크 요청이다.

즉 DNS가 느리면 사이트 진입 자체가 느려질 수 있다.

2. TCP 연결 (3-Way Handshake)

SYN
SYN + ACK
ACK

어렵다. 쉽게말하면

“너랑 통신 가능?”
“응 가능”
“좋아 시작하자”

같은 의미!

3. HTTPS라면 TLS Handshake 추가

HTTPS는 여기서 끝이 아니다.

SSL인증서라고 부르는것! 프로젝트를 aws에 올리고나면 왜 자물쇠표시안뜨지? https로는 안되네 싶을때 설치해야하는 것

TLS 를 추가하면 암호화 연결을 만들기 위해

인증서 검증
공개키 교환
대칭키 생성

과정이 추가된다.

4. HTTP 요청 전송

그 다음 실제 요청이 전송된다.

GET /products HTTP/1.1
Host: example.com

브라우저와 서버가 대화하는 프로토콜 자체이다.

5. 서버 응답 반환

200 OK
Content-Type: text/html

그리고 HTML, JSON 등을 반환한다.

여기서 끝인 줄 알았는데,
실제로는 브라우저가 다시 엄청 바빠진다.

HTML 을 받고난후

브라우저는 HTML을 파싱하면서 다시 요청한다.

예를 들어

CSS
JS
이미지
폰트

전부 추가 요청이 발생한다.

그래서 DevTools Network 탭을 보면 수십~수백 개 요청이 생긴다.

URL DOMAIN