웹 개발 기초집LESSON 26

HTTP 요청과 응답 읽기

난이도입문

예상 시간25분

선수지식이전 강의

26강. HTTP 요청과 응답 읽기

이번 강의의 결과물은 브라우저 개발자 도구에서 포트폴리오 파일의 요청, 상태 코드, 응답 헤더를 설명한 네트워크 관찰 기록입니다.

1. 이번 강의에서 해결할 문제

화면이 보이지 않을 때 HTML, CSS, JavaScript 중 무엇을 고쳐야 하는지 추측만 하면 오래 걸립니다. 브라우저와 서버가 주고받은 HTTP 요청과 응답을 읽으면 파일이 없었는지, 서버가 실패했는지, 잘못된 형식으로 받았는지부터 구분할 수 있습니다.

학습 목표

화면이 보이지 않을 때 HTML, CSS, JavaScript 중 무엇을 고쳐야 하는지 추측만 하면 오래 걸립니다. 브라우저와 서버가 주고받은 HTTP 요청과 응답을 읽으면 파일이 없었는지, 서버가 실패했는지, 잘못된 형식으로 받았는지부터 구분할 수 있습니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

클라이언트: 서버에 자원을 요청하는 프로그램. 여기서는 웹 브라우저
서버: 요청을 받고 응답을 반환하는 프로그램
자원: URL로 식별되는 HTML, CSS, JavaScript, 이미지, JSON 등의 대상
요청 메서드: 자원에 원하는 행동을 나타냄
상태 코드: 요청 처리 결과를 세 자리 숫자로 나타냄
헤더: 메시지의 부가 정보
본문: 실제로 전달하는 내용

웹 페이지를 열 때의 기본 흐름은 다음과 같습니다.

브라우저 -- GET /index.html --> 서버
브라우저 <-- 200 OK + HTML ---- 서버
브라우저 -- GET /css/style.css -> 서버
브라우저 <-- 200 OK + CSS ----- 서버

처음에는 다음 메서드와 상태 코드만 정확히 구분합니다.

항목	의미	예시
`GET`	자원의 현재 표현을 요청	HTML이나 JSON 조회
`POST`	요청 내용을 서버가 처리하도록 전달	회원가입 정보 전송
`200 OK`	요청이 성공함	HTML을 정상 수신
`201 Created`	새 자원이 만들어짐	게시글 생성 성공
`404 Not Found`	대상 자원을 찾지 못함	틀린 파일 경로
`500 Internal Server Error`	서버 처리 중 오류가 발생함	서버 코드 예외

HTTP는 요청 하나를 다른 요청과 독립적으로 해석할 수 있는 상태 비저장 요청·응답 프로토콜입니다. 메서드와 상태 코드의 정확한 의미는 IETF HTTP Semantics RFC 9110에 정의되어 있습니다.

3. 코드 예시

파일 위치:

web-basics/http-practice/
├─ index.html
└─ style.css

파일명: index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP 관찰 실습</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>HTTP 요청을 관찰합니다</h1>
  </body>
</html>

파일명: style.css

body {
  max-width: 40rem;
  margin: 4rem auto;
  font-family: sans-serif;
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\http-practice

python -m http.server 5500

브라우저에서 http://localhost:5500을 열고 개발자 도구의 Network 탭을 확인합니다. index.html과 style.css 요청을 선택해 Request Method, Status Code, Content-Type을 찾습니다.

4. 코드가 동작하는 이유

주소를 열면 브라우저가 서버에 index.html을 GET으로 요청합니다.
Python 정적 서버가 파일을 찾아 200 상태와 HTML 본문을 반환합니다.
브라우저는 HTML의 link 요소를 읽고 style.css를 추가로 요청합니다.
응답의 Content-Type은 받은 내용을 HTML 또는 CSS로 해석하는 데 도움을 줍니다.
서버에 없는 경로를 요청하면 정적 서버는 404로 실패 이유를 알립니다.

HTTP 상태 코드는 화면 디자인이 아니라 통신 결과입니다. 화면이 이상해도 요청이 모두 200이라면 다음에는 HTML 구조, CSS 규칙, JavaScript 오류를 살펴야 합니다.

5. 자주 하는 실수

404를 인터넷 연결 실패라고 생각함
상태 코드가 200이라는 이유만으로 화면도 올바르다고 판단함
GET과 POST를 각각 읽기와 쓰기의 절대 규칙으로 외움
file://로 문서를 열고 HTTP 요청을 관찰하려 함
Network 탭을 연 뒤 페이지를 새로 고치지 않음
브라우저 오류와 서버의 5xx 오류를 같은 문제로 취급함

6. 짧은 실습 과제

예시 파일을 만들고 로컬 서버를 실행합니다.
Network 탭에서 두 요청의 메서드, 상태 코드, Content-Type을 기록합니다.
HTML의 CSS 경로를 styles.css로 일부러 바꾸고 새로 고칩니다.
실패한 요청의 URL과 상태 코드를 기록합니다.
경로를 복구하고 다시 200이 되는지 확인합니다.
http://localhost:5500/missing.html을 열어 같은 404인지 비교합니다.

완료 기준은 성공 요청과 실패 요청을 Network 탭에서 구분하고, 상태 코드가 알려 주는 범위와 알려 주지 않는 범위를 설명할 수 있는 것입니다.

7. 이해 점검 질문 3개

HTTP 요청과 응답에는 각각 어떤 정보가 들어가나요?
404와 500은 문제의 위치를 어떻게 다르게 알려 주나요?
HTML 응답이 200인데 화면 스타일이 없다면 다음으로 어떤 요청을 확인해야 하나요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ