본문으로 건너뛰기

HTTP 요청/응답 이해하기 📡

웹사이트를 방문하거나 앱을 사용할 때, 컴퓨터와 서버가 어떻게 대화할까요? 바로 HTTP라는 규칙을 사용해요! 초보자도 쉽게 이해할 수 있도록 설명해드릴게요.

HTTP를 일상생활로 비유하면?​

HTTP를 레스토랑 주문으로 비유해볼까요?

레스토랑 이야기 🍽️​

1. 손님: "파스타 주세요!" (요청)
2. 웨이터: 주방에 전달
3. 주방: 파스타 요리
4. 웨이터: "파스타 나왔습니다!" (응답)
5. 손님: 파스타를 받음

HTTP도 똑같아요:

1. 브라우저: "index.html 주세요!" (HTTP 요청)
2. 서버: 파일을 찾음
3. 서버: "여기 있어요!" (HTTP 응답)
4. 브라우저: 페이지를 보여줌

HTTP의 정의​

HTTP (HyperText Transfer Protocol)

  • 웹 브라우저와 서버가 데이터를 주고받는 규칙
  • 프로토콜 = 약속된 규칙
  • 웹의 기초가 되는 통신 방법

HTTP 요청/응답 흐름​

┌─────────┐                              ┌─────────┐
│         │   ── HTTP 요청 (Request) →   │         │
│ 브라우저 │                              │  서버   │
│         │   ← HTTP 응답 (Response) ──  │         │
└─────────┘                              └─────────┘

전체 과정​

  1. 요청 (Request): 브라우저가 서버에게 뭔가를 달라고 부탁
  2. 처리 (Processing): 서버가 요청을 처리
  3. 응답 (Response): 서버가 결과를 브라우저에게 보냄
  4. 렌더링 (Rendering): 브라우저가 화면에 표시

HTTP 메소드 (요청 방법)​

서버에게 "어떻게" 할지 알려주는 동사예요.

1. GET 📖​

"가져오기" - 데이터를 달라고 요청

GET /products/123

예시:

  • 웹페이지 보기
  • 검색 결과 가져오기
  • 상품 목록 보기

특징:

  • 데이터를 가져오기만 함
  • 서버의 데이터를 변경하지 않음
  • URL에 데이터가 보임
  • 북마크 가능

실제 사용:

https://google.com/search?q=javascript
                         └───────┬──────┘
                         GET 파라미터

2. POST 📝​

"만들기" - 새 데이터를 서버에 보냄

POST /users
{
  "name": "홍길동",
  "email": "hong@example.com"
}

예시:

  • 회원가입
  • 게시글 작성
  • 주문하기

특징:

  • 서버에 데이터 생성
  • 본문(Body)에 데이터 포함
  • URL에 데이터가 보이지 않음
  • 북마크 불가

3. PUT ✏️​

"수정하기" - 기존 데이터를 통째로 바꿈

PUT /users/123
{
  "name": "김철수",
  "email": "kim@example.com"
}

예시:

  • 프로필 전체 수정
  • 게시글 전체 수정

4. PATCH 🔧​

"일부 수정하기" - 기존 데이터의 일부만 바꿈

PATCH /users/123
{
  "email": "newemail@example.com"
}

예시:

  • 이메일만 변경
  • 비밀번호만 변경

5. DELETE 🗑️​

"삭제하기" - 데이터를 삭제

DELETE /users/123

예시:

  • 계정 삭제
  • 게시글 삭제
  • 상품 삭제

HTTP 메소드 비교표​

메소드용도데이터 변경데이터 위치
GET조회❌URL
POST생성✅Body
PUT전체 수정✅Body
PATCH일부 수정✅Body
DELETE삭제✅URL

HTTP 요청 구조​

GET /api/users?page=1 HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer token123

{본문 데이터 (POST, PUT, PATCH일 때)}

구성 요소​

  1. 요청 라인: GET /api/users HTTP/1.1

    • 메소드: GET
    • 경로: /api/users
    • HTTP 버전: 1.1

  2. 헤더 (Headers): 추가 정보

    Host: 어느 서버?
    User-Agent: 어떤 브라우저?
    Accept: 어떤 형식을 받을까?
    Authorization: 인증 정보

  3. 본문 (Body): 실제 데이터 (POST, PUT, PATCH)

HTTP 응답 구조​

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 1234

{
  "id": 1,
  "name": "홍길동"
}

구성 요소​

  1. 상태 라인: HTTP/1.1 200 OK

    • HTTP 버전: 1.1
    • 상태 코드: 200
    • 상태 메시지: OK

  2. 헤더 (Headers): 응답 정보

    Content-Type: 어떤 형식?
    Content-Length: 데이터 크기

  3. 본문 (Body): 실제 데이터

HTTP 상태 코드 🚦​

서버가 **"어떻게 됐어"**를 알려주는 숫자예요.

2xx - 성공 ✅​

코드의미설명
200OK성공!
201Created새로 만들어졌어요
204No Content성공했지만 보낼 내용이 없어요

3xx - 리다이렉션 🔄​

코드의미설명
301Moved Permanently영구적으로 이동했어요
302Found임시로 다른 곳에 있어요
304Not Modified변경 안 됐으니 캐시 사용하세요

4xx - 클라이언트 오류 ❌​

코드의미설명
400Bad Request요청이 잘못됐어요
401Unauthorized로그인이 필요해요
403Forbidden권한이 없어요
404Not Found찾을 수 없어요
429Too Many Requests요청을 너무 많이 했어요

5xx - 서버 오류 🔥​

코드의미설명
500Internal Server Error서버에 문제가 생겼어요
502Bad Gateway게이트웨이 오류
503Service Unavailable서비스를 사용할 수 없어요
팁

HTTP Status Guide에서 모든 상태 코드를 확인할 수 있어요!

실전 예시​

예시 1: 검색하기 🔍​

요청:

GET https://google.com/search?q=javascript

응답:

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>검색 결과...</body>
</html>

예시 2: 로그인하기 🔐​

요청:

POST https://api.example.com/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "password123"
}

응답 (성공):

HTTP/1.1 200 OK
Content-Type: application/json

{
  "token": "eyJhbGciOiJIUzI1NiIs...",
  "user": {
    "id": 1,
    "name": "홍길동"
  }
}

응답 (실패):

HTTP/1.1 401 Unauthorized
Content-Type: application/json

{
  "error": "Invalid email or password"
}

예시 3: 게시글 작성 ✍️​

요청:

POST https://api.example.com/posts
Content-Type: application/json
Authorization: Bearer token123

{
  "title": "첫 게시글",
  "content": "안녕하세요!"
}

응답:

HTTP/1.1 201 Created
Content-Type: application/json

{
  "id": 42,
  "title": "첫 게시글",
  "content": "안녕하세요!",
  "createdAt": "2025-01-23T10:30:00Z"
}

예시 4: 프로필 수정 ✏️​

요청:

PATCH https://api.example.com/users/me
Content-Type: application/json
Authorization: Bearer token123

{
  "email": "newemail@example.com"
}

응답:

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "홍길동",
  "email": "newemail@example.com"
}

예시 5: 게시글 삭제 🗑️​

요청:

DELETE https://api.example.com/posts/42
Authorization: Bearer token123

응답:

HTTP/1.1 204 No Content

HTTP 헤더 이해하기​

자주 사용하는 요청 헤더​

Content-Type: application/json    # 보내는 데이터 형식
Accept: application/json           # 받고 싶은 데이터 형식
Authorization: Bearer token123     # 인증 토큰
User-Agent: Mozilla/5.0...         # 브라우저 정보
Cookie: session=abc123             # 쿠키

자주 사용하는 응답 헤더​

Content-Type: application/json    # 응답 데이터 형식
Content-Length: 1234               # 데이터 크기
Set-Cookie: session=abc123         # 쿠키 설정
Cache-Control: no-cache            # 캐시 설정
Access-Control-Allow-Origin: *     # CORS 설정

HTTP 도구 사용하기​

API Tester로 실습하기​

API Tester에서:

  1. URL 입력
  2. 메소드 선택 (GET, POST, PUT, DELETE)
  3. 헤더 추가
  4. 본문 작성 (POST, PUT, PATCH)
  5. Send 버튼 클릭!

예제 실습​

GET 요청 테스트:

URL: https://api.github.com/users/github
Method: GET

결과:

{
  "login": "github",
  "id": 1,
  "name": "GitHub",
  ...
}

자주 묻는 질문 (FAQ)​

Q1: GET과 POST는 언제 사용하나요?​

A:

  • GET: 데이터 조회 (읽기만)
  • POST: 데이터 생성 (쓰기)

Q2: PUT과 PATCH의 차이는?​

A:

  • PUT: 전체를 바꿈 
    PUT /users/1
    {"name": "김철수", "email": "kim@example.com", "age": 25}
  • PATCH: 일부만 바꿈 
    PATCH /users/1
    {"email": "newemail@example.com"}

Q3: 404 에러는 왜 발생하나요?​

A: 요청한 페이지나 데이터를 찾을 수 없을 때!

  • URL 철자 오류
  • 삭제된 페이지
  • 잘못된 경로

Q4: 500 에러는 뭔가요?​

A: 서버에 문제가 생겼어요!

  • 서버 코드 오류
  • 데이터베이스 연결 실패
  • 서버 과부하

Q5: HTTPS는 HTTP와 뭐가 다른가요?​

A: 보안이 추가됐어요!

  • HTTP: 평문 전송 (누구나 볼 수 있음)
  • HTTPS: 암호화 전송 (안전함) 🔒

CRUD와 HTTP 메소드​

CRUD = 데이터의 기본 작업

CRUD의미HTTP 메소드
Create생성POST
Read읽기GET
Update수정PUT / PATCH
Delete삭제DELETE

예시: 블로그 게시글​

게시글 목록 보기:  GET /posts
게시글 읽기:      GET /posts/123
게시글 작성:      POST /posts
게시글 수정:      PUT /posts/123
게시글 삭제:      DELETE /posts/123

RESTful API​

REST = HTTP를 잘 활용하는 설계 방식

좋은 API 디자인 ✅​

GET    /users          # 사용자 목록
GET    /users/123      # 특정 사용자
POST   /users          # 사용자 생성
PUT    /users/123      # 사용자 수정
DELETE /users/123      # 사용자 삭제

나쁜 API 디자인 ❌​

GET  /getUsers
POST /createUser
POST /updateUser
POST /deleteUser

다음 단계 🚀​

HTTP를 이해했다면:

  1. ✅ API Tester - 직접 HTTP 요청 보내보기
  2. ✅ HTTP Status Guide - 모든 상태 코드 배우기
  3. ✅ cURL Converter - cURL 명령어 변환
  4. ✅ API가 뭔가요? - API 개념 다시 보기
  5. ✅ JSON 데이터 형식 이해하기 - HTTP로 주고받는 데이터

마무리​

HTTP는 웹의 기초예요! 🌐

기억할 포인트:

  • GET: 조회 (읽기)
  • POST: 생성 (쓰기)
  • PUT/PATCH: 수정
  • DELETE: 삭제
  • 상태 코드: 2xx(성공), 4xx(클라이언트 오류), 5xx(서버 오류)

API Tester로 직접 실험하다 보면 금방 익숙해질 거예요! 🎉

이제 웹사이트와 서버가 어떻게 대화하는지 이해되셨나요?