HTTP 메소드

sangmin jeon·2024년 8월 1일

JavaScript

목록 보기
4/7
웹서버에 어떤 동작을 요청할때 자바스크립트로는 async/await 문법과 fetch API를 사용하여 HTTP 요청을 했고 HTTP 메소드를 지정하여 어떤 작업을 요청할지 정할 수 있다.
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'POST', // POST 메소드 사용
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name: '홍길동',
        age: 30
      })
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData();
위 코드는 POST 메소드를 사용한 예시이며 POST 이외에도 중요하고 다양한 메소드들이 있다

📌HTTP 메소드(Method)란?

HTTP 메소드는 클라이언트가 웹 서버에게 어떤 종류의 동작을 원하는지를 나타내는 방법이다.
각 메소드는 특정한 종류의 작업을 수행하도록 설계되었다.

📌주요 HTTP 메소드

📑GET

서버에게 정보를 요청
쿼리 파라미터를 통해 정보 필터링 가능
캐싱이 가능하며, 안전한 메소드
예시) 웹 페이지 조회, 이미지 다운로드

💡캐싱(Caching)
자주 사용되는 데이터를 미리 저장해두었다가, 다시 필요할 때 빠르게 가져다 쓰는 기술

📑POST

서버에 새로운 데이터를 제출
데이터는 요청 본문(request body)에 포함된다
캐싱이 불가능하며, 안전하지 않은 메소드(상태를 변경하기 때문)
예시) 회원 가입, 게시글 작성, 파일 업로드

📑PUT

특정 URL에 대응하는 리소스 전체 내용을 갱신(Update)하는데 사용
요청 본문에 새로운 데이터를 표함하여 기존 정보를 완전히 대체한다
캐싱이 불가능, 안전하지 않은 메소드
예시) 문서 수정

📑DELETE

특정 리소스를 삭제한다
캐싱이 불가능, 안전하지 않은 메소드
예시) 게시글 삭제

📑PATCH

특정 리소스의 일부를 수정
PUT메소드는 리소스 전체를, PATCH메소드는 리소스 부분적으로 수정
캐싱이 불가능, 안전하지 않은 메소드
예시) 프로필 사진 변경

📌추가적인 메소드

  • HEAD : GET 메소드와 비슷하지만, 응답 본문 대신 헤더만 반환.
  • OPTIONS : 서버가 지원하는 HTTP 메소드를 확인하는 메소드
  • CONNECT : HTTP 프로토콜을 통해 TCP 터널을 생성
  • TRACE : 요청 메세지를 그대로 서버로 보내고, 서버는 받은 메세지를 그대로 클라이언트로 반환

⚡결론

HTTP 메소드는 웹 개발에서 중요한 개념이다.
서버에게 원하는 리소스를 요청, 추가, 수정, 삭제 등을 할 수 있기에
메소드들의 특징과 용도를 이해하고 적절히 사용하도록 하자.

profile
sangmin's velog

0개의 댓글