01. 주소창의 비밀 (DNS/IP)

"우리가 친구 집에 가려면 '주소'가 필요하듯, 인터넷 상의 서버를 찾아가려도 주소가 필요합니다."

1. Why: 주소는 왜 필요한가?

컴퓨터는 숫자를 좋아하고, 사람은 문자를 좋아합니다. 인터넷은 이 두 가지 방식을 모두 지원하기 위해 똑똑한 시스템을 만들었습니다.

IP 주소 (Computer's Way): 142.250.207.14 (내비게이션용 실제 좌표)
도메인 (Human's Way): google.com (사람이 기억하기 쉬운 건물 이름)

1-1. IPv4와 IPv6: 주소 고갈 문제

우리가 흔히 보는 IP 주소는 IPv4(xxx.xxx.xxx.xxx) 형식입니다. 그런데 전 세계 스마트폰과 IoT 기기가 폭발적으로 늘어나면서 약 43억 개의 주소가 동났습니다. 그래서 IPv6(2001:0db8:...)라는 무한에 가까운 새 주소 체계가 등장했습니다.

1-2. 공인 IP vs 사설 IP (핵심!)

웹 개발자가 이 개념을 모르면 "내 컴퓨터에선 되는데 왜 안 돼요?"라는 질문을 하게 됩니다.

공인 IP (Public IP): 전 세계에서 유일한 주소. (아파트 동/호수)
사설 IP (Private IP): 공유기 내부에서만 쓰는 주소. (우리 집 안의 안방, 작은방)
- 192.168.x.x
- 127.0.0.1 (Localhost: '나 자신'을 가리키는 거울 같은 주소)

친구에게 localhost 주소를 주지 마세요!

친구에게 "내 사이트 들어와봐, 주소는 http://127.0.0.1:8000이야"라고 하면 접속하지 못합니다. 그건 마치 친구에게 "너희 집 안방으로 찾아와"라고 말하는 것과 같습니다. 친구는 자기 집 안방을 두리번거릴 것입니다.

1-3. 데이터 배달의 원리 (우편물 비유)

인터넷 통신은 우편물 배달과 놀라울 정도로 비슷합니다. 특히 Port(포트) 개념을 잘 봐주세요.

인터넷 요소	우편물 배달 비유	역할
Packet (패킷)	편지 봉투 ✉️	데이터(HTML, 이미지 등)를 담는 상자
IP Address	아파트 주소 🏢	목적지 건물 위치 (142.250...)
Port (포트)	현관문 번호 🚪	건물 내의 구체적인 방 번호
Router	우체국 허브 📦	편지를 다음 목적지로 토스해주는 중계소

💡 Port가 왜 중요한가요?

하나의 컴퓨터(IP) 안에는 카카오톡도 있고, 웹 브라우저도 있고, 게임도 켜져 있습니다. 편지(데이터)가 도착했을 때 누구에게 줄지 결정하는 것이 바로 포트 번호입니다.

웹 서버(Web): 보통 80번 혹은 443번 문을 엽니다.
개발 연습용: 보통 8000번이나 3000번 문을 많이 사용합니다.

2. DNS: 인터넷 전화번호부

주소창에 google.com을 입력하면, 브라우저는 가장 먼저 DNS (Domain Name System) 서버에게 물어봅니다.

sequenceDiagram
    participant Browser
    participant DNS
    participant Server

    Browser->>DNS: "google.com 주소가 뭐야?"
    DNS-->>Browser: "142.250.207.14 입니다."
    Browser->>Server: (142.250.207.14의 80번 문으로) "메인 페이지 줘!"
    Server-->>Browser: [HTML 도착]

3. Web Server: 24시간 열려 있는 식당

주소를 찾아가면(IP), 문을 열어주는(Port) 서버(식당)가 있습니다. 이 식당에서의 식사는 "1. 기본 세트 받기(Static) 2. 요리 추가 주문하기(Dynamic)" 순서로 이루어집니다.

3-1. index.html: 주문서가 포함된 메인 요리

여러분이 식당에 들어오면(google.com), 서버는 가장 먼저 index.html이라는 파일을 줍니다. 이것은 웹의 메인 요리(HTML 뼈대)이자, 다른 반찬들이 어디 있는지 적혀 있는 주문서(Instruction)입니다.

브라우저는 이 파일을 읽고 나서야 "아, CSS 반찬이랑 JS 장난감도 필요하구나!"라고 깨닫고 추가 요청을 합니다.

3-2. 정적 파일 (Static Files): 해피밀 세트 완성하기 🍔

브라우저는 index.html의 안내에 따라 서버에게 나머지 파일들을 요청합니다. 서버는 요리할 필요 없이 창고에 있는 파일들을 그대로 꺼내줍니다.

HTML (밥/버거): 뼈대와 내용.
CSS (포장지): index.html에 <link rel="stylesheet">가 있다면 가져옵니다. (디자인)
Image (음료): index.html에 <img src="...">가 있다면 가져옵니다.
JavaScript (장난감): index.html에 <script src="...">가 있다면 가져옵니다. (기능)

JS는 정적 파일인가요?

네! 서버 입장에서는 그냥 저장된 텍스트 파일(.js)을 배달할 뿐입니다. (Static Delivery) 배달받은 브라우저가 이 상자를 열어서 조립(실행)해야 비로소 화면이 움직입니다. (Dynamic Execution)

3-3. Backend API: 주방장에게 요리 주문하기 👨‍🍳 (Dynamic)

해피밀(정적 파일들)을 다 받았습니다. 그런데 햄버거를 먹던 장난감(JS)이 "실시간 인기 검색어"나 "내 포인트"를 보여주려고 합니다. 이런 정보는 미리 만들어둘 수 없겠죠?

이때 장난감(JavaScript)이 주방장에게 달려갑니다.

요청 (Request): 장난감(JS)이 주방(Server)에 쪽지를 줍니다. "내 포인트 알려줘!"
요리 (Processing): 주방장(FastAPI)은 냉장고(Database)를 뒤져서 데이터를 찾습니다.
응답 (Response): 주방장이 1500점이라고 적힌 쪽지(JSON)를 돌려줍니다.
렌더링 (Update): 장난감이 돌아와서 식판 위의 점수판을 바꿔줍니다.

sequenceDiagram
    participant Browser
    participant JS as 🤖 장난감 (JS)
    participant Server as 👨‍🍳 주방장 (FastAPI)
    participant DB as ❄️ 냉장고 (DB)

    Note over Browser, JS: [1단계] 정적 파일 배달 완료
    Browser->>JS: "포인트 보여줘!" (실행)
    JS->>Server: [API 요청] "내 점수 몇 점?"

    Note over Server, DB: [2단계] 동적 데이터 요리
    Server->>DB: 데이터 조회
    DB-->>Server: 1500점

    Server-->>JS: [JSON 응답] { "point": 1500 }
    JS->>Browser: 화면에 '1500점' 표시!

4. Visible Thinking: 눈으로 확인하는 웹의 세계

우리가 배운 이론이 진짜인지 확인해봅시다. 두 가지 도구를 사용할 것입니다.

4-1. 도로 확인하기: `traceroute` (Network Layer)

여러분의 컴퓨터에서 구글 서버까지 가는 길은 험난합니다. 터미널에서 이 명령어를 치면 내 요청이 거쳐가는 중계소(Router)들을 볼 수 있습니다.

# 터미널(명령 프롬프트)을 열고 입력해보세요
traceroute google.com
# 윈도우 사용자는: tracert google.com

4-2. 배달물 확인하기: Chrome Network 탭 (Application Layer)

traceroute가 배달 트럭의 이동 경로를 보여준다면, 브라우저의 개발자 도구(Network 탭)는 도착한 택배 박스의 내용물을 보여줍니다.

우리가 앞서 배운 "index.html(식판)이 먼저 오고, 나머지(반찬)가 온다"는 사실을 직접 확인해봅시다.

[실습 가이드]

크롬 브라우저를 켜고 아무 사이트(예: naver.com 또는 우리가 만든 사이트)에 접속합니다.
F12 키 (또는 우클릭 -> 검사)를 눌러 개발자 도구를 엽니다.
상단 메뉴에서 Network (네트워크) 탭을 클릭합니다.
F5 (새로고침)를 누릅니다. (와르르 쏟아지는 파일들을 보세요!)

[무엇을 봐야 하나요?]

맨 윗줄 (Name): 가장 먼저 도착한 녀석을 보세요. 보통 www.naver.com (Type: document)입니다. 이것이 바로 HTML(식판)입니다.
그 아래 줄들 (Waterfall): HTML이 도착하고 나서야, 뒤따라서 style.css, main.js, logo.png 등이 줄줄이 비엔나처럼 도착하는 순서를 확인하세요.
Type (종류):
- document: HTML (뼈대)
- stylesheet: CSS (옷)
- script: JavaScript (장난감)
- image: 사진 (장식)

🧠 AI Native Activity: 암호문 해석하기

Network 탭에서 파일을 하나 클릭하면 오른쪽에 복잡한 정보가 뜨지만, 지금은 "순서"만 보면 됩니다. 목록을 캡처하거나 텍스트로 긁어서 AI에게 물어보세요.

Prompt

이 웹사이트 로딩 순서야.

[붙여넣기]

가장 용량이 큰 파일은 뭐야?
가장 오래 걸린 파일은 뭐야? (Waterfall 막대가 긴 것)
왜 이미지는 나중에 로딩되는 거야?