google.com 같은 사이트에 접속할 때 실제로 무슨 일이 벌어지는지를 이해하기 위한 오늘의 주제. 흐름 중에 네트워크를 우선 정리해보았다.
1.CSR에서 “접속 → 화면” 전체 흐름
[네트워크]
DNS → TCP → HTTPS → index.html 다운로드
↓
[브라우저]
HTML 파싱 → JS 번들 다운로드
↓
[자바스크립트]
React/Vue 앱 실행
↓
[API 네트워크]
백엔드 API 호출
↓
[렌더링]
DOM 생성 → 화면에 UI 표시
CSR이란? Client Side Rendering의 줄임말로 서버가 빈껍데기의 HTML과 Js 파일을 보내면 브라우저가 JS를 실행해서 직접 화면을 그리는 것
전통적인 방식 SSR(Sever side Rendering)은 서버가 HTML을 완성해서 브라우저에 보내면 브라우저는 그냥 그걸 보여주는 것!
-> 예전에 자바 스프링 교육 받을 때 JSP를 배웠는데 지금 생각해보니 이게 SSR 방식이였던 것 같다. 그 때는 그저 너무 재미없다, 하기 싫다만 생각하고 회사 입사하고서는 html을 전혀 할 일이 없어서 잊고 있었다... 혼자 프로젝트를 만들면서 react로 프론트엔드를 만들었을때 폴더 구조에 index.html, APP.js같은 파일이 있었는데 그게 바로 프론트엔드가 화면을 만드는 주체라는 뜻이였다!
[출발점]
0) 사용자가 https://google.com 입력 + Enter
브라우저는 내부적으로 “이 URL의 서버에 연결해서 리소스(HTML/JS/CSS) 를 받아와야 한다”라고 판단.
[Network]
1) 브라우저는 google.com을 접속하기 위한 실제 주소인 IP가 필요함
-> DNS(IP의 주소록 같은 역할)에게 IP를 물어봄
실제흐름
1. 브라우저 / OS 캐시 확인(캐시 DNS): 최근에 접속한 적이 있으면 여기서 끝(가장 빠른 방법)
2. 로컬 DNS(보통 통신사/회사 DNS)에 질의
3. 2번까지해도 없으면 DNS가 계층적으로 찾아감
- Root DNS → TLD(.com) → Authoritative DNS(해당 도메인 담당)
로컬 DNS에 있는 도메인을 matching -> Root DNS로 가서 검색할 때 .형태로 올라가게 되는데 쿼리를 하게 되면 com이라는 쿼리를 검색하고 .com이라는 정보가 있는 DNS에 가서 google.com이라는 쿼리를 조회-> 그거에 대한 정보를 리턴 받아서 client한테 해당 정보를 넘겨줌(매칭되는 record값)
cmd에서 ping google.com이라고 치면 해당 IP가 나옴
2) TCP: “연결” 만들기 (3-way handshake)
브라우저는 IP를 알아냈으니 이제 그 서버에 “대화할 통로”를 만들어야 함
TCP(Transmission Control Protocol)는 신뢰성 있는 전송을 위한 프로토콜이라, 서로 통신 가능한지를 확인하는 절차가 있어 -> 3-way handshake
3-way handshake (개념)
Client → Server: SYN (연결 요청)
Server → Client: SYN-ACK (오케이 + 나도 준비)
Client → Server: ACK (확인)
이게 끝나면 TCP 연결이 성립!
3) HTTPS(TLS): 암호화 + 신원 확인
TLS Handshake
client와 server가 “서로 신원 확인 + 암호화 방법 합의”를 하는 과정
HTTP: 데이터가 평문으로 전송됨
HTTPS: HTTP + TLS(Transport Layer Security) -> 전송되는 데이터를 암호화해서 보안을 보장함
HTTPS를 사용하려면 서버는 인증서(SSL/TLS 인증서) 를 가져야 한다.
이 인증서는 CA(Certificate Authority, 인증기관) 가 발급한다.
인증서에는 다음 정보가 들어 있다:
-
서버의 도메인
-
서버의 공개키(Public Key)
-
인증서를 발급한 CA의 서명
-
SSL 인증서: 웹사이트와 사용자 브라우저 간의 통신을 암호화하여 데이터를 안전하게 전송하고, 웹사이트 소유자의 신원을 확인시켜주는 디지털 증명서
-
인증기관(CA, Certificate Authority): 웹사이트, 이메일 주소, 개인 또는 조직의 디지털 신원을 확인하고 보증하는 신뢰할 수 있는 제3자 기관
TLS Handshake에서 실제로 일어나는 일
- Client → Server : "HTTPS로 통신하고 싶어요"
- Server → Client : 인증서(공개키 포함) 전달
- Client :
- 인증서 검증 (CA, 도메인, 만료 여부)
- Client :
- 세션 키 생성
- 서버 공개키로 암호화해서 전송
- Server :
- 개인키로 복호화 → 세션 키 확보
- Client & Server :
- 같은 세션 키로 HTTPS 통신 시작
| 키 종류 | 역할 |
|---|---|
| 공개키 | 세션 키를 안전하게 전달하는 데 사용 |
| 개인키 | 서버만 가지고 있으며, 암호화된 정보를 복호화 |
| 세션 키 | 실제 데이터(HTTP 내용)를 암호화하는 대칭키 |
만약 내 프로젝트를 https로 만들고 싶다면?
- 도메인을 산다 ex) gabia.com 같은 사이트에서
- DNS 등록
- DNS 호출 되는지 확인
- Let's Encrypt(무료(테스트용)) 인증서 발급
- 인증서를 적용한다.
4) index.html 다운로드 (첫 요청)
GET / HTTP/1.1
Host: google.com서버는 보통 CSR이면 이런 걸 전달:
- index.html (아주 얇은 껍데기)
- 그리고 그 안에 JS 번들 링크가 들어있음
예)
<div id="root"></div>
<script src="/assets/main.abc123.js"></script>여기서 포인트: index.html 자체는 UI가 거의 없음
UI는 다음 단계에서 JS가 만듦
* 도식화
