HTTP101

그림과 연습 문제로 이해하는 HTTP

「개발자 도구의 Network 탭을 열었지만, 어디를 봐야 할지 모르겠다」「404 와 403 의 차이를 물으면 말문이 막힌다」— Web 을 만들기 시작하면 매일 HTTP 를 만지는데도, 그 내용물은 의외로 읽기 어렵습니다. 이 강좌에서는 HTTP 를 통째로 암기하는 것이 아니라, HTTP 는 「텍스트로 쓰인 왕복 서신」이며, 무엇을 부탁했는가(메서드와 경로)·결과는 어땠는가(상태 코드)·조건과 보충(헤더)의 3 점 세트를 매번 읽는다는 틀을 몸에 익힙니다. 그림으로 구조를 잡고, 각 장 중간의 연습 문제와 시뮬레이터로 확인하면서 나아가는 구성입니다.

그림 → 생 텍스트 → 손 계산 → curl 전 43 문제 브라우저 내 채점 localStorage 저장

소요 시간

3〜4 시간

문제 수

전 43 문제

형식

7 장 + 연습 문제 + 시뮬레이터

비용

무료

브라우저에서 서버로 가는 리퀘스트(리퀘스트 행·헤더·빈 줄·바디)와 서버가 돌려주는 리스폰스(상태 행·헤더·빈 줄·바디)의 왕복을 나타낸 HTTP 구조도

HTTP 의 정체는 이 1 왕복의 텍스트입니다. 리퀘스트와 리스폰스는 모두 「1 행째 + 헤더 + 빈 줄 + 바디」라는 같은 뼈대를 가집니다. 이 뼈대를 머리에 두면, 이후의 모든 장이 읽기 쉬워집니다.

이 강좌의 특징

본문 바로 아래에 연습 문제

읽은 직후에 2〜3 문제씩 푸는 구성이라, 「이해한 것 같은 기분」인 채로 앞으로 나아가기 어렵게 되어 있습니다.

생 텍스트를 읽는다

리퀘스트 행·상태 행·헤더를, 그림으로 정리한 다음 실제 텍스트 그대로 읽습니다. curl 과 개발자 도구의 출력이 그대로 교재가 됩니다.

캐시 판정 시뮬레이터

제 5 장의 시뮬레이터에서 max-age 와 경과 시간, ETag 의 유무를 움직이면 「리퀘스트가 나가는가·리스폰스는 200 인가 304 인가·전송량은 얼마인가」가 어떻게 바뀌는지를 눈으로 확인할 수 있습니다.

브라우저 내 채점·등록 불필요

전 43 문제는 브라우저 안에서 채점되며, 결과는 사용 중인 브라우저의 localStorage 에만 저장됩니다. 서버에는 아무것도 전송하지 않습니다.

이 강좌를 관통하는 시각 — 왕복 서신을 3 점 세트로 읽는다

HTTP 는 브라우저와 서버 사이에서 오가는 텍스트로 쓰인 왕복 서신입니다. 어려워 보이는 출력도, 매번 같은 3 가지를 확인하면 반드시 읽을 수 있습니다. 장이 진행될수록 각 점을 읽는 해상도가 올라가는 이미지입니다.

1. 무엇을 부탁했는가

메서드와 경로 — GET 인가 POST 인가, 어느 URL 에 대해서인가. 읽는 곳은 리퀘스트 행입니다. (제 1〜2 장)

2. 결과는 어땠는가

상태 코드 — 성공인가, 이동인가, 이쪽의 잘못인가, 저쪽의 장애인가. 3 자리 숫자가 답합니다. (제 3 장)

3. 조건과 보충은 무엇인가

헤더 — 어떤 형식으로, 어느 정도의 양을, 어떤 조건으로 날랐는가. 왕복 서신에 곁들이는 메모입니다. (제 4〜5 장)

이 강좌의 구호: 개발자 도구나 curl 의 출력에 압도될 것 같으면, 거기서 생각을 멈추지 말고 읽어 주세요 — 무엇을 부탁했는가? 결과는 어땠는가? 조건과 보충은 무엇인가?

장 구성

1 도입 — 브라우저와 서버의 HTTP 대화를 읽는다 5 문제. URL 을 입력한 뒤 일어나는 일(DNS → TCP → TLS → HTTP)을 정리하고, 리퀘스트와 리스폰스의 생 텍스트 뼈대와 스테이트리스의 의미를 파악합니다. 2 HTTP 메서드 — 안전·멱등이라는 약속 6 문제. GET·POST·PUT·DELETE·HEAD 의 구분과, 안전·멱등이라는 2 가지 약속의 경계를 그어 「재시도해도 되는 갱신인가」를 판단할 수 있게 합니다. 3 HTTP 상태 코드 — 3 자리 숫자로 결과를 읽는다 6 문제. 백의 자리로 5 가지로 분류하고, 301 과 302 와 308, 401 과 403 과 404, 500 과 502 와 503 을 근거를 가지고 구분합니다. 4 HTTP 헤더와 콘텐츠 — 무엇을·어떤 형식으로 6 문제. Host·Content-Type·Content-Length·Accept·Cookie 를 「왕복 서신의 곁들임 메모」로 읽고, 글자 깨짐과 세션의 구조까지 따라갑니다. 5 HTTP 캐시 — 같은 것을 두 번 나르지 않는다 6 문제. max-age 를 손으로 계산하여 fresh 와 stale 을 판정하고, ETag 와 조건부 GET, 304 의 의미를 시뮬레이터로 확인합니다. 6 관찰 — curl 과 개발자 도구로 HTTP 의 실물을 읽는다 6 문제. curl -v 의 > 와 <, -I 와 -L, 개발자 도구 Network 탭을 읽는 법을 전형적인 관찰 절차로 몸에 익힙니다. 7 종합 연습 — HTTP 대화를 케이스로 읽어낸다 8 문제. 리다이렉트 루프·폼 재전송·캐시·글자 깨짐 등, 실무풍의 케이스로 전 장의 지식을 가로질러 사용합니다.

수강 요령

본문 → 바로 아래의 연습 문제 순서로 진행해 주세요. 모아서 나중에 푸는 것보다, 읽은 직후에 푸는 편이 정착됩니다.
제 5 장의 계산 문제는 암산으로 끝내지 말고, 수신 시각·경과 초 수·max-age 를 종이에 적어 주세요. 「fresh 의 남은 시간이 몇 초인가」가 손의 감각으로 잡힙니다.
제 5 장의 시뮬레이터는 연습 문제를 풀기 전과 후에 모두 만져 주세요. 304 와 전송량의 관계가 체감으로 바뀝니다.
수강 후에는 실제 브라우저에서 개발자 도구의 Network 탭을 열고, 평소에 보는 사이트에서 3 점 세트 읽기를 시도해 주세요. 교재와 같은 뼈대가 나타납니다.
제 7 장의 케이스 문제에서 막히면, 대응하는 장으로 돌아가 1〜2 바퀴만 복습해 주세요. 전부 다시 할 필요는 없습니다.

시작 전 전제

Web 사이트나 앱을 만들기 시작했거나, 앞으로 만들 예정인 단계면 충분합니다. 서버 운용 경험은 필요 없습니다.
URL(https://example.com/path 같은 형태)을 본 적이 있다면, 제 1 장부터 읽기 시작할 수 있습니다.
제 6 장의 명령어 예시는 복사해서 시험해 볼 수 있는 형태로 제시하지만, 직접 실행하지 않아도 지면만으로 끝까지 읽을 수 있는 구성입니다.