1단계
1단계 — 인터넷이 어떻게 작동하나
20 분
1단계 — 인터넷이 어떻게 작동하나
브라우저 주소창에 codingstairs.duckdns.org 를 치면 무슨 일이 일어날까요? 프론트엔드를 시작하기 전에, 그 사이 가 어떻게 굴러가는지 한 번만 봐 두면 평생 도움이 됩니다.
단계별 흐름
브라우저는 다음 네 단계를 자동으로 처리합니다.
- DNS 조회 — 도메인 이름을 IP 주소로 바꿉니다 (전화번호부 같은 역할)
- HTTP 요청 — 그 IP 의 443 번 포트로 "이 주소 페이지 줘" 라고 메시지를 보냅니다 (HTTPS 는 암호화된 HTTP)
- 응답 수신 — 서버가 HTML/CSS/JS 파일과 데이터를 응답으로 돌려줍니다
- 렌더링 — 브라우저가 받은 코드를 해석해 화면을 그립니다
# 직접 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 입니다
이걸 항상 켜 두는 습관 만으로 절반은 디버깅이 됩니다.
더 깊이
다음 단계
2단계에서는 그 응답으로 받은 HTML 을 의미 있게 작성하는 법을 배웁니다.