브라우저에서 google.com을 치면 일어나는 일

프론트엔드 개발자가 알아야 할 네트워크 기초 개념 정리

---

전체 흐름

google.com 입력
→ DNS가 IP 주소로 변환
→ TCP로 서버랑 연결
→ HTTP 요청 전송
→ (프록시 거칠 수도 있음)
→ (CORS 확인)
→ 서버가 HTTP 응답
→ 브라우저가 화면 렌더링

---

1. 도메인 / IP / DNS

• IP : 인터넷에 연결된 모든 기기의 주소. 집 주소와 같음. (예: 142.250.xxx.xxx)
• 도메인 : IP 주소의 이름표. 사람이 외우기 어려운 IP 대신 사용. (예: google.com)
• DNS : 도메인을 IP 주소로 변환해주는 전화번호부 시스템.

google.com → DNS 조회 → 142.250.xxx.xxx

---

2. TCP

• 인터넷에서 데이터를 주고받는 신뢰성 있는 규칙
• 데이터를 보낼 때 "잘 받았어?" 확인하고, 못 받으면 다시 보냄
• 연결 전에 3-way handshake 진행

나 연결할게 → 어 받아 → 확인

---

3. HTTP

브라우저와 서버가 데이터를 주고받는 대화 규칙 (편지)

주소창에 URL을 치는 순간, 브라우저가 자동으로 GET 요청(편지)을 보내는 것!

URL 구조

https://www.google.com/search?q=안녕
  ↑          ↑              ↑
프로토콜    도메인(IP이름표)   경로
(편지규칙)

HTTP 요청 (Request) — 브라우저 → 서버

구성요소	설명	예시
Method	뭘 하고 싶은지	GET, POST, PUT, DELETE
URL	어디에 요청하는지	https://api.example.com/users
Header	요청의 부가 정보	Content-Type, Authorization
Body	실제 보내는 데이터	{ "email": "...", "password": "..." }

fetch('https://api.example.com/users', {
  method: 'POST',                              // 편지 종류
  headers: { 'Content-Type': 'application/json' }, // 봉투에 적는 부가 정보
  body: JSON.stringify({ name: '홍길동' })      // 편지 내용
})

HTTP 응답 (Response) — 서버 → 브라우저

Status Code	의미
200	성공
201	생성 성공 (POST 후)
400	내 요청이 잘못됨
401	로그인 안 했음 (토큰 없음)
403	권한 없음
404	그런 거 없음
500	서버가 터짐

HTTP vs HTTPS

• HTTP : 데이터를 암호화 없이 전송 → 중간에 가로채면 다 보임
• HTTPS : 데이터를 암호화해서 전송 → 안전
• 브라우저가 "안전하지 않은 사이트" 경고 = HTTP로 접속할 때

---

4. CORS

브라우저가 출처(도메인)가 다른 곳에 요청할 때 서버한테 허락을 구하는 것

내 사이트: https://mysite.com
API 서버:  https://api.other.com  ← 출처가 다름!

브라우저가 본 요청 전에 preflight 요청을 먼저 보냄
→ 서버가 Access-Control-Allow-Origin 헤더로 허락해줘야 통과

CORS 에러 = 서버가 "이 출처는 허락 안 해" 한 것

---

5. 프록시

브라우저가 직접 서버에 요청하지 않고 중간에서 대신 전달해주는 것

브라우저 → 프록시 서버 → 실제 서버

• CORS 우회할 때 사용
• 브라우저 입장에선 같은 출처에 요청하는 거라 CORS 안 걸림
• Next.js의 rewrites가 바로 프록시 역할

---

6. 배포

내 코드를 인터넷 어디서든 접근 가능한 서버에 올리는 것

로컬 개발  →  내 컴퓨터에서만 돌아감
배포       →  전 세계 누구나 HTTP 요청 가능

• Vercel에 배포 = Vercel 서버에 코드 올려서 누구나 접근 가능하게 만드는 것
• HTTP 응답을 해줄 서버를 세팅하는 과정

---

💡 내가 직접 연결한 개념들

"API 전송할 때 http로 붙여서 보내는 게 서버에 보내는 편지구나"

"http는 사이트 주소인 줄 알았는데, 주소창에 http 주소 쓸 때 편지 자체인 거였구나. 도메인이 사이트 이름이고 http는 편지 규칙이었던 것"

---

https://www.google.com/search?q=안녕
  ↑          ↑              ↑
프로토콜    도메인(IP이름표)   경로
(편지규칙)

• https:// → "나 HTTP 규칙으로 편지 보낼게" 선언
• www.google.com → 편지 받을 주소 (도메인)
• /search?q=안녕 → "search 페이지에 있는 거 줘, 검색어는 안녕"

즉 주소창에 URL 치는 순간 브라우저가 자동으로 GET 요청 편지를 보내는 거예요. 우리가 fetch() 코드 안 써도 브라우저가 알아서 하는 거고요.

📌 복습 포인트

• DNS가 하는 역할 설명할 수 있다
• HTTP 요청의 4가지 구성요소 말할 수 있다
• Status Code 200 / 400 / 401 / 404 / 500 의미를 안다
• CORS가 왜 생기는지 설명할 수 있다
• 프록시가 CORS를 어떻게 우회하는지 안다
• 배포가 뭔지 한 문장으로 말할 수 있다