개념
웹은 요청과 응답의 반복이다
브라우저에서 버튼을 클릭할 때마다, 브라우저는 서버에 **요청(Request)**을 보내고 서버는 **응답(Response)**을 돌려준다. 이 대화의 규칙이 HTTP(HyperText Transfer Protocol)다. 모듈 5(레슨 4)에서 배운 "콘솔· 네트워크 관찰 습관"이 실제로 보고 있던 것이 바로 이 요청·응답 쌍이다.
HTTP 메서드 — 무엇을 하려는 요청인가
| 메서드 | 의미 | 예시 |
|---|---|---|
| GET | 데이터를 조회한다 | 상품 목록 불러오기 |
| POST | 새 데이터를 만든다 | 회원가입, 주문 생성 |
| PUT / PATCH | 기존 데이터를 수정한다 | 프로필 수정 |
| DELETE | 데이터를 삭제한다 | 장바구니에서 상품 제거 |
버튼 하나를 눌렀을 때 이 중 어떤 메서드가 나가는지 알면, "이 버튼은 원래 서버에 뭔가를 저장해야 하는 동작인데, GET으로 나가고 있다"처럼 잘못 구현된 패턴을 눈으로 발견할 수 있다.
상태 코드 — 응답이 어떻게 됐는가
| 코드대 | 의미 |
|---|---|
| 2xx | 성공 (200 OK, 201 Created) |
| 3xx | 리다이렉트(다른 위치로 이동) |
| 4xx | 클라이언트 잘못 (400 잘못된 요청, 401 인증 안 됨, 403 권한 없음, 404 없음) |
| 5xx | 서버 잘못 (500 서버 내부 오류) |
화면에는 그냥 "오류가 발생했습니다"라고만 뜨는데, 개발자 도구 네트워크 탭을 열어 상태 코드를 확인하면 401(로그인 세션 만료)인지 500(서버가 실제로 터진 것)인지 즉시 구분된다. 이 구분만으로도 결함 리포트(모듈 6 레슨 2)의 정확도가 크게 올라간다.
헤더 — 요청·응답에 딸린 부가 정보
헤더는 본문 내용 외에 추가로 딸려가는 정보다. 예를 들어 Content-Type은
"이 데이터가 JSON인지 HTML인지"를, 레슨 3에서 다룰 Authorization
헤더는 "이 요청을 보낸 사람이 누구인지 증명하는 값"을 담는다.
요청·응답을 직접 관찰하기
브라우저 개발자 도구의 네트워크 탭을 열고, 실제 웹사이트에서 로그인 버튼을 눌러보면 다음을 확인할 수 있다.
- 어떤 URL로, 어떤 메서드로 요청이 나갔는가
- 요청에 어떤 데이터(아이디/비밀번호)가 담겼는가
- 응답 상태 코드는 무엇이었는가
- 응답 본문에 무엇이 담겨 돌아왔는가
이 네 가지를 읽어내는 습관이 이 레슨의 핵심 실습이다.
실무에서 왜 필요한가
"화면에 아무것도 안 뜬다"는 버그를 받았을 때, 네트워크 탭을 열어 상태 코드 하나만 확인해도 원인의 범위가 절반으로 줄어든다 — 4xx면 클라이언트(프론트엔드나 사용자 입력) 문제일 가능성이, 5xx면 서버 문제일 가능성이 높다. 이 판단력은 결함 리포트에 "환경" 정보(모듈 6 레슨 2)를 더 정확하게 채우는 데도 직결된다. API 테스트(스테이지 4 모듈 12)의 기초도 바로 이 HTTP 구조 이해다.
실습 과제
과제 1 — 상태 코드 추측 게임 (10분)
다음 상황에서 어떤 상태 코드대(2xx/3xx/4xx/5xx)가 나올 가능성이 가장 높을지 추측하고 이유를 적는다.
- 로그인하지 않은 사용자가 개인정보 페이지에 접근했다
- 존재하지 않는 상품 ID로 상세 페이지를 요청했다
- 서버의 데이터베이스 연결이 끊어진 상태에서 요청했다
과제 2 — 직접 관찰하기 (15분)
아무 웹사이트나 열고 개발자 도구 네트워크 탭을 켠 채로 로그인(또는 검색)을 시도해본다. 나간 요청의 메서드, 응답 상태 코드, 응답 본문 일부를 캡처해 기록한다.
자가 체크리스트
- HTTP 요청·응답의 기본 구조를 설명할 수 있다
- GET/POST/PUT/DELETE 메서드의 의미를 구분할 수 있다
- 2xx/3xx/4xx/5xx 상태 코드대의 의미를 구분할 수 있다
- 브라우저 개발자 도구로 실제 요청·응답을 관찰할 수 있다
흔한 실수
- 화면에 뜨는 오류 메시지만 보고 상태 코드를 확인하지 않는다. 상태 코드 하나가 원인 범위를 즉시 좁혀준다.
- 모든 오류를 "서버 문제"로 단정한다. 4xx는 클라이언트/사용자 입력 쪽 문제일 가능성이 높다 — 5xx와는 원인이 다르다.
- GET으로 데이터를 저장하거나 삭제하는 것을 이상하다고 못 느낀다. 메서드와 실제 동작이 어긋나면 설계상 문제의 신호일 수 있다.
참고 자료
- MDN Web Docs — HTTP 개요 — HTTP 요청·응답·상태 코드의 공식 레퍼런스
- MDN — HTTP 응답 상태 코드 — 전체 상태 코드 목록과 의미