HTTP 메소드 이해하기

초기 웹은 문서 전송과 같은 간단한 작업에 초점이 맞춰져 있었습니다. 이 때는 주로 메소드중 하나인 GET 요청만으로 충분했습니다.

하지만 웹이 발전하면서 사용자의 상호작용이 복잡해지고, 웹 애플리케이션은 다양한 형태의 데이터 처리가 필요해졌습니다. 이에 따라 데이터 생성, 수정, 삭제(CRUD)등 다양한 작업을 처리하기 위한 새로운 HTTP 메소드들이 도입되었습니다.

 

주요 HTTP 메소드

HTTP 요청을 보낼 때 Javascript의 fetch API를 사용합니다. fetch는 브라우저에서 가장 기본적으로 사용되는 방법으로 HTTP 요청을 쉽게 보낼 수 있게 해줍니다.

도구(JSONPlaceholder)를 사용하여 실제 예제를 테스트 할 수 있습니다.

GET

가장 흔히 사용되는 메소드로, 데이터 조회에 사용되며, 캐싱이 가능하고, 브라우저 히스토리에 남습니다.

GET 요청은 데이터를 URL에 포함시켜 서버에 보낼 수 있습니다. 따라서 중요한 정보를 전송할 때는 GET을 사용하지 않는 것이 좋습니다. 또한 GET 요청은 리퀘스트 바디를 포함하지 않습니다.

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

OUTPUT

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

 

POST

서버에 데이터를 생성하거나 제출할 때 사용됩니다. (예: 로그인, 회원가입 등)

데이터가 URL에 노출되지 않고 요청 본문(body)에 포함되어 전송됩니다. POST 요청은 GET과는 달리 브라우저 히스토리에 남지 않으며, 동일한 POST 요청을 반복할 경우 같은 결과가 여러 번 발생할 수 있습니다.

 

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

OUTPUT

{
  id: 101,
  title: 'foo',
  body: 'bar',
  userId: 1
}

예시를 보면 body에 title,body,userId를 담은 객체를 stringify로변환하여 전송하여 성공적으로 출력이 되었습니다.

 

PUT

지정된 URL에 리소스를 생성하거나 업데이트할 때 사용합니다. (예: 게시글 수정 등)

POST와 비슷하지만, 주로 기존 리소스의 업데이트에 사용됩니다.

PUT 요청은 대상 리소스가 존쟁하지 않는 경우 새로 생성할 수 있습니다. 이때문에 PUT은 idempotent하다고 할 수 있습니다. 즉 같은 PUT 요청을 여러 번 수행해도 동일한 효과가 발생합니다.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

{
  id: 1,
  title: 'foo',
  body: 'bar',
  userId: 1
}

DELETE

지정된 URL의 리소스를 삭제할 때 사용됩니다.(예: 게시글 삭제 등)

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
});

1번이 게시글이라면 /posts 의 1번 게시글이 삭제되는 것입니다.

PATCH

PATCH 요청은 리소스의 일부분만을 수정합니다. 

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'trophyjourney',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

{
  id: 1,
  title: 'trophyjourney',
  body: '...',
  userId: 1
}

기존 위의 title: foo 였다면 PATCH를 통해 1번 게시글의 타이틀은 trophyjourney로 수정됩니다.

 

마무리

각 메소드들은 웹에서 데이터를 조회,생성,수정,삭제(CRUD)하는 표준적인 방법을 제공합니다. 각각의 메소드가 가지는 고유한 특성과 사용상의 주의점을 이해하는 것은 웹 애플리케이션을 개발하는데 가장 중요하다고 생각합니다.

또한 이것이 후에 RESTful API 설계의 기본이 되기 때문에 각 메소드들의 적절한 사용은 명확성과 효율성을 높이게 됩니다.

 

HTTP 메소드는 단순한 통신 수단 이상의 역할을 합니다. 이들은 웹 개발에서 데이터의 흐름과 행동을 결정하는 핵심 요소이기 때문에 HTTP 메소드의 중요성을 이해하고, 이것을 자신의 프로젝트에 효과적으로 적용할 수 있어야 합니다.