오늘 끝나면
주소창에 URL 치면?
- ✓주소창에 URL 치면?의 핵심 문제를 한 문장으로 설명한다
- ✓오른쪽 실습에서 주소창에이 어떻게 움직이는지 관찰한다
- ✓다음 강의와 이어지는 한계를 말할 수 있다
실습 미션
DNS→서버→백엔드→DB→응답→렌더 — 전 과정 한 번에 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.
성공 조건
- □실습의 기본값을 먼저 관찰
- □입력값이나 모드를 한 번 이상 바꿔 결과 비교
- □왜 결과가 바뀌었는지 한 문장으로 설명
개발 · Day 20
주소창에
URL 치면?
엔터 한 번에 DNS, 서버, 백엔드, DB, 응답, 렌더가 차례로 돈다. 앞 19강의 조각이 모두 이 한 흐름 위에 놓인다.
엔터 누른 뒤 0.3초
주소 치고 엔터를 누르면 화면이 뜬다. 그 0.3초 안에 컴퓨터 여럿이 바쁘게 대화한다.
이름을 숫자로 바꾼다
멀리 있는 서버에 일을 시킨다
창고에서 데이터를 꺼낸다
응답을 만들어 화면에 그린다
이 과정이 안 보여서 개발이 막막했다. 오늘은 그 0.3초를 단계별로 펼쳐 본다.
이름을 숫자로, DNS
사람은 site.com을 외운다. 컴퓨터는 그 이름을 모른다.
컴퓨터끼리는 숫자 주소(IP)로만 찾아간다. 142.250.x.x 같은 형태다.
그래서 먼저 DNS에 “이 이름, 숫자로 뭐야?” 하고 물어본다. DNS는 인터넷 전화번호부다.
이름을 숫자로 바꿔야 어디로 갈지가 정해진다.
요청이 안쪽으로, 서버·백엔드·DB
IP를 알았으면 그 서버에 HTTP 요청을 보낸다.
서버는 그냥 파일만 던지지 않는다. 로그인, 권한, 계산이 필요하면 백엔드에 넘긴다.
백엔드는 화면에 쓸 데이터가 필요하다. 상품, 가격, 재고는 DB에 쌓여 있다.SQL로 “그 목록 줘” 하고 꺼낸다.
요청이 바깥에서 안쪽으로 한 칸씩 들어간다. 손님, 홀, 요리사, 냉장고 순서다.
코드 보기, 백엔드가 DB에서 꺼내 응답 만들기
// 백엔드: DB에서 꺼내 → 응답으로 만들기
const rows = await db.query(
"SELECT name, price FROM products"
)
const html = render(rows) // 데이터를 화면에 끼움
return new Response(html, { status: 200 })응답이 되돌아 나옴, 렌더
데이터를 꺼냈으면 이제 거꾸로 나온다.
백엔드가 데이터를 끼워 HTML(페이지)이나 JSON(API 응답)을 만든다.
서버가 상태코드 200과 함께 돌려보낸다. 못 찾으면 그 유명한 404가 온다.
브라우저가 HTML과 CSS로 모양을 잡고 자바스크립트로 움직이게 한다. 화면이 보인다. 이게 렌더다.
전 과정 한 번에, 직접 돌려보기
19강의 내용이 한 흐름 위에서 각자의 자리를 차지한다.
신호가 주소창에서 DNS, 서버, 백엔드, DB로 들어갔다가 다시 거꾸로 나와 화면에 그려진다. 각 단계마다 몇 강 내용인지 태그가 붙는다.
이 흐름 하나면 어떤 웹이나 앱도 같은 뼈대다.