[Web] HTTP Request Methods 란?

[Web] HTTP Request Methods 란?

🧶 HTTP Request Methods 란?

클라이언트가 웹 서버에게 요청하는 목적 및 그 종류를 알리는 명령어를 말한다. HTTP 요청 메서드는 서버에게 어떤 동작을 수행해야 하는지 알려준다.

가장 흔히 사용되는 HTTP 요청 메서드에는 GET, POST, PUT, DELETE, HEAD 가 있고, 이외에도 OPTIONS, TRACE, CONNECT 등의 다른 HTTP 요청 메서드가 있다.

 

javascript 에서는 이 HTTP Request Methods 를 사용하기 위해서 XMLHttpRequest 객체 또는 Fetch API를 사용할 수 있다.

XMLHttpRequest 보다는 간결하고 강력한 기능을 제공하는 Fetch API 를 더많이 사용한다. Fetch API 는 최신 브라우저에서 기본적으로 제공되는 API 이고, promise 기반의 비동기 처리를 편하게 다룰 수 있다는 장점이 있다. 하지만 레거시 환경에서는 여전히 XMLHttpRequest 이 사용되기도 한다.

 

✒️ GET

GET 메서드는 서버로부터 지정한 리소스를 가져온다. 이 리소스는 웹 페이지가 될 수도 있고, 이미지, 동영상 등이 될 수 있다.

이 메서드는 서버에서 데이터를 읽기만하고, 변경하지 않는다.

GET 요청은 쿼리 매개변수를 사용하여 추가적인 데이터를 전달할 수 있으며, 응답으로 받은 데이터는 URL에 노출될 수 있다.

 

javascript 예시

// XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 서버로부터 받은 데이터(response)를 처리
  }
};
xhr.send();

// Fetch API
fetch('https://api.example.com/data')
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(function(data) {
    // 서버로부터 받은 데이터(data)를 처리
  })
  .catch(function(error) {
    console.log(error);
  });

 

✒️ POST

POST 메서드는 서버로 데이터를 전송하여 서버의 리소스를 변경하거나 추가할 때 사용한다. 주로 HTML 폼 데이터를 서버로 전송하는 데 사용한다.

POST 요청은 HTTP 요청의 Body 에 데이터를 담아서 전송하며, 이러한 데이터는 URL에 노출되지 않는다.

 

javascript 예시

// XMLHttpRequest 
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // 서버로부터 받은 응답(response)을 처리
  }
};
var data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

• setRequestHeader 메서드 : 서버는 이 정보를 이용하여 요청을 적절히 처리하고 응답을 반환할 수 있다. 올바른 데이터 타입의 요청 본문을 보내거나, 인증 정보를 전달하거나, 사용자 정의 헤더를 추가하는 등의 작업을 수행 가능!
  setRequestHeader 를 사용하지 않더라도 기본적으로 XMLHttpRequest 객체는 일부 헤더를 본문의 데이터 유형에 따라 자동으로 설정한다. 하지만 헤더를 명확하게 설정하고 서버의 요구 사항에 맞춰 요청을 보내기 위해서는 setRequestHeader를 사용하는 것이 좋다.

setRequestHeader 메서드
setRequestHeader('Content-Type', 'application/json')	JSON 데이터를 전송하기 위해 설정
setRequestHeader('Authorization', 'Bearer <token>')	인증 정보를 전달 가능 일반적으로 토큰 기반의 인증 방식에서는 Authorization 헤더에 토큰을 포함시켜 서버에 전달한다.

// Fetch API
var data = { name: 'John', age: 30 };
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(function(data) {
    // 서버로부터 받은 응답(data)을 처리
  })
  .catch(function(error) {
    console.log(error);
  });

 

✒️ PUT

PUT 메서드는 클라이언트에서 서버로 데이터를 전송하여 리소스를 추가하거나 변경한다. 기존의 데이터를 갱신할 때 사용한다.

바로 위에서 POST 도 리소스를 추가하거나 변경한다고 했는데, POST와 달리 PUT은 리소스의 전체 표현을 요청 본문에 담아 전송한다. 따라서 PUT 요청은 같은 리소스에 대해 여러 번 호출해도 동일한 결과를 얻을 수 있어야 한다.

 

javascript 예시

// XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'https://api.example.com/data/123', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // PUT 요청에 대한 서버의 응답(response)를 처리
  }
};
var data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

// Fetch API
var data = { name: 'John', age: 30 };
fetch('https://api.example.com/data/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(function(data) {
    // PUT 요청에 대한 서버의 응답(data)를 처리
  })
  .catch(function(error) {
    console.log(error);
  });

 

✒️ DELETE

DELETE 메서드는 서버에서 지정한 리소스를 삭제한다. DELETE 요청을 수행하면 서버는 해당 리소스를 삭제하거나 더 이상 접근할 수 없게 만든다.

 

javascript 예시

// XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('DELETE', 'https://api.example.com/data/123', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;
    // DELETE 요청에 대한 서버의 응답(response)를 처리
  }
};
xhr.send();

// Fetch API
fetch('https://api.example.com/data/123', {
  method: 'DELETE'
})
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error: ' + response.status);
    }
  })
  .then(function(data) {
    // DELETE 요청에 대한 서버의 응답(data)를 처리
  })
  .catch(function(error) {
    console.log(error);
  });

 

✒️ PATCH

PATCH 메서드는 서버에서 지정한 리소스의 일부를 수정하기 위해 사용된다.

PUT과 달리 PATCH는 리소스의 일부를 변경하는 데 사용된다. PATCH 요청은 요청 본문에 변경 내용을 담아서 전송한다.

 

✒️ HEAD

HEAD 메서드는 GET과 유사하지만, 서버는 응답 본문 대신 헤더 정보만을 반환한다. 실제 문서 요청이 아닌 문서 정보에 대한 요청이기 때문에 Response 메세지를 받았을 때 Body 는 비어있고, Header 정보만 들어있다.

이를 통해 리소스의 메타데이터를 확인할 수 있다.

주로 리소스의 존재 여부나 변경 여부를 확인하기 위해 사용된다.

 

🧶 POST 와 PUT 의 차이점

	POST	PUT
정의	클라이언트에서 서버로 데이터를 전송하여 새로운 리소스를 생성하거나 기존 리소스를 수정하는 데 사용	클라이언트에서 서버로 데이터를 전송하여 지정된 URI에 해당하는 리소스를 수정하거나 추가
리소스	주로 HTML 폼 데이터를 서버로 전송하는 데 사용 데이터는 요청의 body 에 포함된다.	요청 본문에 전체 리소스 표현을 담아 서버로 전송
요청 후	POST 요청은 동작이 이루어진 후 새로운 리소스의 URI를 결정하고 응답으로 받게 된다.	PUT 요청은 서버에 지정한 URI에 해당하는 리소스를 요청 본문에 포함된 표현으로 교체한다.
동일 요청 시	요청을 여러 번 보내면 각각의 요청은 독립적으로 처리	여러 번 호출할 때 마다 동일한 변경이 반복

 

✏️ 요약

POST ➡️ 새로운 리소스를 생성하거나 기존 리소스를 수정하기 위해 사용

PUT ➡️ 특정 URI에 해당하는 리소스를 완전히 대체하기 위해 사용

PATCH ➡️ 전체 리소스를 대체하는 PUT과는 달리, 리소스의 일부를 수정하기 위해 사용

 

 

 

 

 

---

참고 : ChatGPT,

https://gyoogle.dev/blog/web-knowledge/HTTP%20Request%20Methods.html (https://gyoogle.dev/blog)

    등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.