[5주차 위클리페이퍼] HTTP 메서드

 

REST API에서 사용하는 HTTP 메서드 

 

REST API는 웹 애플리케이션의 데이터를 교환하기 위해 사용되는 아키텍쳐 스타일이다. 이 REST API는 다양한 HTTP 메서드를 사용해서 자바스크립트의 fetch 함수나 axios 라이브러리 등을 이용하여 비동기 작업을 진행할 때 서버로부터 데이터를 주고받는다.

 

HTTP 메서드에는 POST, GET, PATCH, DELETE, PUT, OPTIONS가 있다.

 

💡 POST 메서드

POST 메서드는 서버로 사용자가 입력한 새 데이터를 제출하여 서버에 생성할 때 사용하는 메서드이다.

 

fetch 함수를 사용할 때는 method: "POST"를 입력하고, JSON 형식의 데이터로 받아오기 위해 JSON 메서드를 호출하여 JSON.stringify(데이터명) 코드를 입력하여 데이터를 읽을 수 있다.

 

POST 요청은 요청시마다 데이터를 생성하기 때문에 멱등성이 없다는 특징이 있다.

⭐ 멱등성: 동일한 요청을 한 번 보내는 것과 여러 번 연속으로 보내는 것이 같은 효과를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 멱등성을 가졌다고 표현한다.

자세한 내용은 아래 MDN 링크를 통해 확인할 수 있다.
(출처: https://developer.mozilla.org/ko/docs/Glossary/Idempotent)

 

위 내용을 포함하여 에러처리까지 포함한 예시 코드는 다음과 같다.

const onSubmit = async () => {
  const userName = "dominic";

  try {
    const response = await fetch("https://www.example.com/api/user", {
      method: "POST",
      body: JSON.stringify({ name: userName }),
      headers: {
        "Content-Type" : "application/json"
      }
    });

    if (!response.ok) {
      throw new Error("네트워크 에러 발생");
    }

    const data = await response.json();
    console.log("응답", data);
    
    window.location.href = "/login.html";
  } catch (error) {
    console.error("회원가입 POST에서 에러 발생", error);
  }
}

💡 GET 메서드

GET 메서드는 서버로부터 데이터를 받아올 때 사용하는 메서드이다. api 주소를 거쳐 데이터만 받아오기도 하지만, 때로는 쿼리스트링으로 특정 데이터를 주고 해당되는 데이터를 받아올 때도 있다.

 

또, GET 메서드는 같은 요청을 보내도 동일한 결과를 가져오기 때문에 멱등성이 있다는 특징이 있다.

 

이를 예시 코드로 보면 다음과 같다.

const getData = async () => {
  const postId = 11;

  try {
    const response = await fetch(`https://www.example.com/api/post/?id=${postId}`, {
      method: "GET"
    });

    if (!response.ok) {
      throw new Error("네트워크 에러")
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("getData GET 요청에서 에러 발생", error);
  }
}

 

💡 PATCH 메서드

PATCH 메서드는 서버에 저장되어 있는 데이터의 일부를 수정할 때 사용하는 메서드이다. 

 

PATCH 메서드는 데이터의 일부를 수정한 후 같은 요청을 보내면 동일한 결과를 가져온다는 점에서 멱등성이 있다고도 보지만, 경우에 따라 데이터가 누적 합계를 구하는 데이터인 경우 매 요청시마다 결과가 달라지기 때문에 멱등성이 없다고도 볼 수 있다.

 

위의 예시에서 userName 값을 바꿔서 수정하는 예시 코드는 다음과 같다. 

const dataPatch = async () => {
  const userName = "dom";

  try {
    const response = await fetch("https://www.example.com/api/user", {
      method: "PATCH",
      body: JSON.stringify({ name: userName }),
      headers: {
        "Content-Type" : "application/json"
      }
    });

    if (!response.ok) {
      throw new Error("네트워크 에러 발생");
    }

    const data = await response.json();
    console.log("수정 결과", data);
  } catch (error) {
    console.error("dataPatch PATCH 요청에서 에러 발생", error);
  }
}

 

💡 DELETE 메서드

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

 

DELETE 메서드는 동일한 요청을 해도 같은 결과를 가져오기 때문에 멱등성이 있다는 특징이 있다.

 

특정 게시물을 삭제하는 예시 코드는 다음과 같다.

const deleteData = async () => {
  const postId = 11;

  try {
    const response = await fetch(`https://www.example.com/api/post/?id=${postId}`, {
      method: "DELETE"
    });

    console.log("게시글이 삭제되었습니다.");
  } catch (error) {
    console.error("deleteData DELETE 요청에서 에러 발생", error);
  }
}

 

DELETE 메서드는 요청의 응답 본문이 없는 경우가 많아서 일반적으로 response.json() 코드를 위처럼 생략할 수 있다. 만약 본문이 있다면 받아서 처리하는 코드를 추가하면 된다.

 

💡 PUT 메서드

PUT 메서드는 서버에 저장된 데이터 전체를 수정할 때 사용하는 메서드이다. 수정이라고 표현했지만 기존 데이터의 업데이트, 새 데이터의 생성을 하는 데 사용한다고 볼 수 있다.

 

왜냐면, 기존 데이터가 존재하면 업데이트가 진행되고, 없으면 새로 생성하는 식으로 동작하기 때문이다.

 

또, PUT 메서드는 다음과 같은 특징이 있다.

• 멱등성(Idempotency) : 동일한 요청을 여러 번 보내도 결과가 동일하다. 즉, 여러 번 수행해도 동일한 결과를 보장하는 것이다.
• 전체 업데이트: PUT 요청은 데이터 전체를 업데이트한다. 부분 업데이트가 필요하다면 PATCH 메서드를 사용하면 된다.

PUT 메서드의 예시 코드는 다음과 같다.

const putData = async () => {
  const userName = "Hong";
  const userAge = 30;

  try {
    const response = await fetch("https://www.example.com/api/user", {
      method: "PUT",
      body: JSON.stringify({
        name: userName,
        age: userAge
      }),
      headers: {
        "Content-Type" : "application/json"
      }
    });

    if (!response.ok) {
      throw new Error("네트워크 에러 발생");
    }

    const data = await response.json();
    console.log("수정 결과", data);
  } catch (error) {
    console.error("putData PUT 요청에서 에러 발생", error);
  }
}

 

위 예시가 동작하면 기존 user에 이름을 업데이트하고 없던 나이를 추가하게 된다.

 

💡 OPTIONS 메서드

OPTIONS 메서드는 특정 리소스에 대해 서버가 지원하는 통신 옵션을 설명하는 데 사용되는 메서드이다.

 

클라이언트는 OPTIONS 요청을 통해 서버가 어떤 HTTP 메서드를 지원하는지, 어떤 CORS(Cross-Origin Resource Sharing) 정책이 적용되는지를 확인할 수 있다.

 

이 OPTIONS 메서드의 특징을 정리하면 다음과 같다.

• 지원 메서드 확인: 클라이언트는 OPTIONS 요청을 통해 특정 리소스에 대해 서버가 지원하는 HTTP 메서드를 확인할 수 있다.
• CORS 정책 확인: 다른 출처에서 자원을 요청할 때, 브라우저는 사전 요청(preflight request)으로 OPTIONS 메서드를 사용하여 서버가 해당 출처에서의 요청을 허용하는지 확인할 수 있다.
• 안전성, 멱등성: OPTIONS 메서드는 서버의 리소스 상태를 변경하지 않으며, 여러 번 수행해도 동일한 결과를 반환한다.

지원 메서드를 확인하는 예시 코드는 다음과 같다.

const checkOptions = async () => {
  try {
    const response = await fetch(`https://www.example.com/resource`, {
      method: "OPTIONS"
    });

    if (!response.ok) {
      throw new Error("네트워크 에러 발생");
    }

    const allowMethods = response.headers.get("Allow");
    console.log("서버가 지원하는 메서드:", allowMethods);
  } catch (error) {
    console.error("checkOptions OPTIONS 요청에서 에러 발생", error);
  }
}

 

위 예시처럼 서버는 OPTIONS 요청에 대해 아래와 같은 헤더를 포함하여 응답할 수 있다.

• Allow: 서버가 지원하는 HTTP 메서드 목록을 포함한다.
• Access-Control-Allow-Origin: 서버가 허용하는 출처(origin)를 명시한다.
• Access-Control-Allow-Methods: 허용되는 HTTP 메서드 목록을 포함한다.
• Access-Control-Allow-Headers: 클라이언트가 사용할 수 있는 HTTP 헤더 목록을 포함한다.

응답은 아래 예시처럼 나올 수 있다.

HTTP/1.1 204 No Content
Allow: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

 

위 예시를 해석하면 아래와 같다.

• HTTP/1.1 204 No Content ➡ 요청이 성공적이나 응답 본문이 없음을 뜻한다.
• Allow: GET, POST, PUT, DELETE, OPTIONS ➡ 서버가 GET, POST, PUT, DELETE, OPTIONS 메서드를 지원함을 뜻한다.
• Access-Control-Allow-Origin: * ➡ CORS 정책에 따라, 모든 도메인에서 해당 서버에 접근할 수 있도록 허용함을 뜻한다. *이 모든 도메인을 뜻한다.
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS ➡ CORS 정책에 따라, 서버에 사용할 수 있는 메서드로 GET, POST, PUT, DELETE, OPTIONS 메서드가 있음을 뜻한다.
• Access-Control-Allow-Headers: Content-Type, Authorization ➡ CORS 정책에 따라, 클라이언트가 요청 시 Content-Type과 Authorization 헤더를 사용할 수 있음을 뜻한다.