오늘 끝나면
주소창에 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로 들어감.다시 거꾸로 나와 화면에 그려짐.
각 단계마다 몇 강 내용인지 태그가 붙음. 끊겨 보이던 강의들이 한 줄로 이어짐.
이 흐름 하나면 어떤 웹·앱도 같은 뼈대임. 여기까지가 넓고 얕게 — 완주임.