HTTP method : CRUD가 이거였어?

HTTP는 클라이언트와 서버간의 통신 규약이라고 했다.

사람이 대화 할 때도 다양한 규칙이 있는 것 처럼 HTTP에도 여러 규칙들이 있는데

그 중에서 HTTP method라는 규칙을 활용해 클라이언트와 서버가 어떻게 데이터를 주고 받는지 알아보자.

 

---

 

HTTP method

위의 사진은 HTTP에서 클라이언트가 서버에 데이터를 요청할 때 보내는 메시지 구조다.

각 부분에 대해서 더 자세한 내용이 궁금 하다면 맨 아래 링크를 통해 참고해보자.

 

이번에는 메시지 중 Start Line에 있는 HTTP method에 대해서 알아보고자 한다.

 

여기 적혀있는 바로는 요청이 의도한 액션을 정의 한다고 적혀있는데,

좀 더 쉽게 풀어보자면 통신에서 CRUD라는 말을 들어봤을 것이다.

CRUD는 Create, Read, Update, Delete의 첫 글자를 따서 만든 약자인데,

통신에서 데이터를 만들거나, 읽거나, 변경하거나, 지우는 과정을 뜻한다.

 

HTTP method에 따라서 CRUD가 이루어지는데,

결국 클라이언트가 서버에 통신 요청을 할 때, 데이터를 만들 것인지, 읽을 것인지,

변경할 것인지, 지울것인지를 method를 통해 정하는 것이다.

 

대표적인 HTTP의 method로는 GET, POST, PUT, DELETE가 있는데,

각 method별로 CRUD와 어떤 연관이 있는지 알아보자.

 

GET

GET은 단어 그대로 서버로부터 데이터를 가져오기 위해 사용되는 메서드다.

CRUD 중에서는 Read를 할 때 사용하는 메서드다.

 

GET 요청은 서버의 데이터나 상태를 변경하지 않고 데이터 요청만 하고,

여러번 호출하더라도 동일한 결과가 반환되는 멱등성을 가지고 있다.

 

fetch('API 주소', {
  method: 'GET',
})
  .then(response => response.json())
  .then(data => {
    // 서버로부터 받은 데이터를 처리합니다.
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

예시코드로 fetch 함수를 이용해서 통신하는 방법을 가져왔다.

일반적으로 GET요청은 Body를 필요로 하지 않고, 요청한 API에서 전달하는 데이터를 받아온다.

 

여기서 method에 GET을 넣지 않고 생략해도 통신이 이뤄지는데,

HTTP method의 default 값이 GET이기 때문에 생략해도 통신이 가능하다.

물론 header에 다른 옵션이 필요하다면 (예를들어 Authorization에 토큰) GET요청도 함께 작성하는 것이 좋다.

 

POST

POST는 서버에 데이터가 없는 상황에 새로운 데이터를 전달하기 위해 사용하는 메서드다.

CRUD 중에서는 Create를 할 때 사용하는 메서드다.

 

fetch('API 주소', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    price: '10000',
    count: 3,
  }),
})
  .then(response => response.json())
  .then(data => {
    // 생성된 리소스에 대한 응답 데이터를 처리합니다.
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

 

GET 요청과 비교를 해보면 headers와 body가 추가된 것을 볼 수 있다.

POST는 서버에 없는 데이터를 추가하는 요청이기 때문에 body에는 어떠한 데이터가 들어가는지를 작성해야 하고

headers에 있는 내용은 body에 있는 데이터가 어떠한 데이터 타입인지를 나타내는 Content-Type을 넣어줘야 한다.

 

그리고 위의 예시 코드에서는 응답에 따라 data를 처리하고 있는데,

서버 상황에 따라 data를 전달하지 않는 경우도 있으니 응답에 따라 유연하게 처리하면 되겠다.

 

 

PUT & PATCH

HTTP method 중 대표적인 4가지로 GET, POST, PUT, DELETE를 언급했었는데

갑자기 이번 챕터에서 PATCH 라는 메서드가 튀어나왔다.

사실 이 부분은 개발자 면접에서 자주 등장하는 내용이기 때문에 알아두는 것이 좋을 것 같아 정리해 본다.

 

PUT 과 PATCH은 둘다 서버에 있는 데이터를 업데이트 하기 위해 사용하는 메서드다.

하지만 이렇게 두 개를 가져왔다는 것은 둘의 차이가 있다는 것을 의미하겠다.

 

우선 예시코드를 먼저 살펴보면

 

fetch('API 주소', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    price: '10000',
    count: 3,
  }),
})
  .then(response => response.json())
  .then(data => {
    // 업데이트된 리소스에 대한 응답 데이터를 처리합니다.
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

앞서 알아본 POST 예시코드와 크게 다르지 않다.

위에서는 PUT을 예시코드로 사용했는데 PATCH도 method 부분에 PATCH 만 있으면 동일하다고 할 수 있겠다.

그렇다면 PUT과 PATCH의 차이는 뭐가 있을까?

 

// default user data

{
  id:1,
  name:"sstaar_mx",
  age:3,
  location:"seoul"
}

어떤 유저의 데이터가 위와 같다고 가정해 보자.

이 데이터에서 PUT을 이용해 나이를 20으로 변경하게 되면 어떻게 될까?

 

PUT 메서드는 전체 데이터를 교체한다는 특징이 있다.

요청을 할 때 body에 전체 데이터 값을 입력하지 않으면

이전에 서버에 저장되어 있는 데이터가 삭제되고, 전달한 데이터만 남게 된다는 말이다.

그래서 해당 데이터에 PUT 메서드를 사용해 통신을 하게 되면 { age : 20 }으로 전체가 교체된다.

 

반면 같은 요청을 PATCH 메서드를 이용해서 요청했다고 가정하자.

PATCH 메서드는 데이터를 부분적으로 수정한다는 특징이 있다.

요청을 할 때 body에 특정 값만 변경해도 이전에 서버에 저장되어 있는 데이터는 그대로 있고,

변경을 요청한 데이터만 변경이 된다.

그래서 위와 같은 상황에 서버에 저장되는 데이터는 아래와 같아진다.

// PATCH method

{
  id:1,
  name:"sstaar_mx",
  age:20,
  location:"seoul"
}

 

물론 PUT 메서드도 일부분의 데이터를 담아서 요청하면 해당 데이터만 변경이 되고,

나머지 데이터는 그대로 살아있는 경우도 있다.

이 경우는 서버의 구현에 따라 달라질수 있지만, 기본적인 차이는 이렇다고 알아두면 될 것 같다.

 

DELETE

DELETE는 서버에 있는 데이터를 삭제할 때 사용하는 메서드다.

 

fetch('API 주소', {
  method: 'DELETE',
})
  .then(response => {
    if (response.ok) {
      // 리소스 삭제 성공
      console.log('Resource deleted successfully.');
    } else {
      // 삭제 실패
      console.error('Failed to delete resource.');
    }
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

 

DELETE 요청에는 상황에 따라 body가 들어가기도 하고, 들어가지 않기도 한다.

해당 부분은 서버 상황에 맞춰서 기입하면 될 것 같다.

 

Summary

메서드	설명
GET	데이터 요청시 사용
POST	데이터 생성시 사용
PUT	데이터 변경시 사용 (전체)
PATCH	데이터 변경시 사용 (일부)
DELETE	데이터 삭제시 사용

 

---

 

 

이 밖에도 HEAD, OPTION 등 다양한 method가 있지만,

가장 자주 사용하는 5가지를 알아봤다.