1단계 — 인터넷이 어떻게 작동하나

브라우저 주소창에 codingstairs.duckdns.org 를 치면 무슨 일이 일어날까요? 프론트엔드를 시작하기 전에, 그 사이 가 어떻게 굴러가는지 한 번만 봐 두면 평생 도움이 됩니다.

단계별 흐름

브라우저는 다음 네 단계를 자동으로 처리합니다.

1. DNS 조회 — 도메인 이름을 IP 주소로 바꿉니다 (전화번호부 같은 역할)
2. HTTP 요청 — 그 IP 의 443 번 포트로 "이 주소 페이지 줘" 라고 메시지를 보냅니다 (HTTPS 는 암호화된 HTTP)
3. 응답 수신 — 서버가 HTML/CSS/JS 파일과 데이터를 응답으로 돌려줍니다
4. 렌더링 — 브라우저가 받은 코드를 해석해 화면을 그립니다

# 직접 DNS 조회
nslookup codingstairs.duckdns.org
# → IP 주소가 출력됩니다

핵심 용어 4개

평생 들고 다닐 단어들이에요.

• URL: https://codingstairs.duckdns.org/edu/frontend-foundations/1 같은 주소 한 줄
• HTTP/HTTPS: 요청·응답 규약. HTTPS = 암호화된 HTTP
• DNS: 도메인 이름을 IP 로 변환하는 분산 데이터베이스
• 포트: 한 IP 안의 창구 번호 (HTTP=80, HTTPS=443, 개발 서버=3000 같은 식)

직접 해 보기

브라우저에서 F12 (혹은 우클릭 → 검사) 로 개발자 도구를 엽니다. 상단 탭 중 Network 를 누르고 페이지를 새로고침해 보세요.

• 모든 HTTP 요청·응답이 줄줄이 나옵니다
• 각 요청을 누르면 헤더·바디·시간 정보가 보여요
• 첫 요청 (Document) 의 응답이 바로 우리가 보는 HTML 입니다

이걸 항상 켜 두는 습관 만으로 절반은 디버깅이 됩니다.

더 깊이

• HTTP & REST 노트
• URL 의 구조 노트
• 브라우저 DevTools 노트
• 인터넷이 어떻게 작동하나 노트

다음 단계

2단계에서는 그 응답으로 받은 HTML 을 의미 있게 작성하는 법을 배웁니다.