HTTP 요청 메서드에 대해 알아보기

웹 개발에서 클라이언트와 서버 간의 데이터 통신을 위해 HTTP 요청 메서드를 사용한다. 대표적으로 GET, POST, PUT, PATCH, DELETE가 있으며, 각각의 목적과 차이점을 이해하는 것이 중요하다.

---

1. GET 방식

✅ 데이터를 요청하고 조회할 때 사용

✅ URL의 쿼리 스트링에 데이터를 포함하여 전송

✅ 캐싱 가능, 브라우저에서 뒤로 가기 및 북마크 가능

📌 GET 요청 예시

GET /api/posts?category=tech&page=2 HTTP/1.1
Host: example.com

fetch("https://example.com/api/posts?category=tech&page=2")
  .then((response) => response.json())
  .then((data) => console.log(data));

📌 GET 특징

• URL에 데이터가 노출됨 → 보안에 취약 (비밀번호, 개인 정보 포함 ❌)
• 데이터 크기 제한 존재 (일반적으로 2048자 이하)
• Idempotent (멱등성): 같은 요청을 여러 번 보내도 결과가 변하지 않음
  (즉, 동일한 데이터를 여러 번 조회해도 서버 상태는 변하지 않음)

💡 활용 예시

• 게시글 조회 (/api/posts)
• 사용자 정보 조회 (/api/user/123)
• 검색 기능 (/search?q=Next.js)

---

2. POST 방식

✅ 서버에 데이터를 생성할 때 사용

✅ 데이터를 요청의 body에 포함하여 전송 (URL에 노출되지 않음)

✅ 캐싱 불가능, 요청마다 새로운 데이터가 생성될 수 있음

📌 POST 요청 예시

POST /api/posts HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "title": "Next.js 13 Features",
  "content": "App Router, Server Actions..."
}

fetch("https://example.com/api/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Next.js 13 Features",
    content: "App Router, Server Actions...",
  }),
});

📌 POST 특징

• Body에 데이터 포함 → URL에 노출되지 않아 보안성이 높음
• 캐싱 불가능 (요청마다 새로운 데이터를 서버로 전송)
• 멱등성이 없음 (같은 요청을 여러 번 보내면 새로운 데이터가 생성될 수 있음)

💡 활용 예시

• 회원가입 (/api/register)
• 로그인 (/api/login)
• 댓글 작성 (/api/comments)

---

3. PUT 방식

✅ 리소스를 "전체 업데이트"할 때 사용

✅ ID를 명시하고 해당 리소스를 덮어씌움

✅ 요청할 때마다 동일한 데이터를 저장 (멱등성 보장)

📌 PUT 요청 예시

PUT /api/posts/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "title": "Updated Title",
  "content": "Updated Content"
}

fetch("https://example.com/api/posts/123", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Updated Title",
    content: "Updated Content",
  }),
});

📌 PUT 특징

• 리소스의 "전체 업데이트"가 이루어짐
  → 기존 데이터가 있으면 덮어쓰기, 없으면 새로 생성 가능
• 멱등성 보장 (같은 요청을 여러 번 보내도 결과가 동일함)
• 모든 필드를 보내야 함 (일부 필드만 변경하려면 PATCH 사용)

💡 활용 예시

• 프로필 정보 수정 (/api/users/123)
• 게시글 수정 (/api/posts/456)

---

4. PATCH 방식

✅ 리소스를 "부분 업데이트"할 때 사용

✅ ID를 명시하고 변경할 필드만 포함하여 전송

✅ PUT과 다르게 전체를 덮어씌우지 않고, 변경된 부분만 적용

📌 PATCH 요청 예시

PATCH /api/posts/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
  "title": "Updated Title"
}

fetch("https://example.com/api/posts/123", {
  method: "PATCH",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Updated Title",
  }),
});

📌 PATCH 특징

• 리소스의 일부만 업데이트 가능
  → 전체 데이터를 전송할 필요 없이, 변경할 필드만 전송
• 멱등성을 보장하지 않을 수도 있음 (일부 구현 방식에서는 다르게 동작할 수도 있음)

💡 활용 예시

• 사용자 이메일 변경 (/api/users/123/email)
• 게시글 제목 수정 (/api/posts/123)

---

5. DELETE 방식

✅ 리소스를 삭제할 때 사용

✅ 멱등성을 보장하지만, 한 번 삭제된 데이터는 되돌릴 수 없음

📌 DELETE 요청 예시

DELETE /api/posts/123 HTTP/1.1
Host: example.com

fetch("https://example.com/api/posts/123", {
  method: "DELETE",
});

📌 DELETE 특징

• 요청을 여러 번 보내도 결과는 동일 (이미 삭제된 데이터를 다시 삭제해도 동일한 결과)
• 일반적으로 응답 본문을 포함하지 않음 (204 No Content 반환)

💡 활용 예시

• 게시글 삭제 (/api/posts/123)
• 계정 삭제 (/api/users/456)

---

6. GET, POST, PUT, PATCH, DELETE 차이점 정리

메서드	목적	요청 데이터	응답 데이터	캐싱 가능 여부	멱등성
GET	데이터 조회	URL에 포함	JSON, HTML	✅ 가능	✅ 가능
POST	데이터 생성	요청 body	JSON, HTML	❌ 불가능	❌ 불가능
PUT	데이터 전체 수정	요청 body	JSON, HTML	❌ 불가능	✅ 가능
PATCH	데이터 부분 수정	요청 body	JSON, HTML	❌ 불가능	❌ (보장 X)
DELETE	데이터 삭제	URL에 포함	(보통 없음)	❌ 불가능	✅ 가능

---

7. 실무에서의 활용 가이드

🔹 GET: 데이터를 조회할 때 사용 (ex: 게시글 목록 불러오기)

🔹 POST: 새로운 데이터를 생성할 때 사용 (ex: 회원가입, 댓글 작성)

🔹 PUT: 기존 데이터를 전체 변경할 때 사용 (ex: 프로필 정보 변경)

🔹 PATCH: 기존 데이터를 일부 변경할 때 사용 (ex: 닉네임 변경)

🔹 DELETE: 데이터를 삭제할 때 사용 (ex: 회원 탈퇴)