정리와 실습
핵심 요약
- 웹은 끝없이 반복되는 하나의 단순한 춤입니다: 클라이언트(보통 브라우저)가 요청을 보내고, 서버가 응답을 돌려줍니다. 나머지는 전부 그 위에 얹힌 세부일 뿐입니다.
- 은 이어 붙인 이름표가 달린 부분들입니다 — scheme, host, path, query. 메서드는 동사입니다: GET은 읽고, POST는 만들고, PUT은 갱신하고, DELETE는 지웁니다.
- 상태 코드는 서버의 한눈 판정입니다. 4xx/5xx 구분이 어디를 봐야 할지 알려줍니다: 4xx는 요청이 잘못된 것(잘못된 URL), 5xx는 서버 자신의 코드가 깨진 것입니다.
- (자물쇠)는 대화를 봉인해 중간의 누구도 읽지 못하게 합니다 — 진짜 앱은 항상 씁니다. 쿠키는 여러 요청에 걸쳐 사이트가 로그인 상태를 기억하는 방법입니다.
- 프런트엔드는 클라이언트(브라우저에서 실행)이고, 백엔드는 서버(로직을 실행하고 데이터베이스와 대화)입니다. 여러분이 만드는 모든 기능은 이 춤의 한쪽 편에 있습니다.
직접 해보기
아무 웹사이트나 열고, 브라우저 개발자 도구를 여세요(우클릭 → "검사", 그다음 "Network" 탭). 페이지를 새로고침하세요. 요청 목록이 채워지는 걸 보세요 — 페이지 요청 하나에 이어 이미지, 폰트, 스타일을 위한 수십 개의 요청이 더 나오는 게, 설명한 그대로입니다. 하나를 클릭해 메서드(GET), 상태 코드(잘하면 200), 헤더를 보세요. 이제 요청/응답 춤이 실시간으로 일어나는 걸, 그것을 읽을 어휘와 함께 보고 있는 것입니다.
이 장의 프롬프트
I'm learning how the web works as a beginner. Using my own app as the example:
<describe your app, or paste a URL or an error you're seeing>
- Walk me through the request/response cycle for one specific action
(like loading a page or submitting a form), step by step.
- Tell me which part is the client (frontend) and which is the server (backend).
- If I'm seeing a status code or error, explain whether it's a 4xx (my
request was wrong) or a 5xx (the server broke), and where to look.
- Keep it concrete and beginner-friendly — no assumed knowledge.