[Axios] HTTP 메서드

HTTP 메서드

들어가며

• Axios와 함께 HTTP 메서드에 대해 정리해본다.

 

HTTP 메서드

개념

• HTTP(Hypertext Transfer Protocol) 메서드는 웹 서버에서 데이터를 가져오거나 수정하거나 삭제하는 등의 작업을 수행할 때 사용하는 메서드이다.
• 자주 사용되는 메서드로는 GET, POST, PATCH, DELETE가 있으며, @fetch()@ 또는 Axios 등을 이용하여 이러한 요청을 보낼 수 있다.

 

종류

① GET

• 서버에서 데이터를 가져오는 데 사용된다.
• 주로 데이터베이스에서 정보를 조회하거나, 웹 페이지를 읽거나, 파일을 다운로드할 때 사용된다.

try {
  const response = await axios.get('/api/data');
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

• 또는 다음과 같이 메서드 체이닝(Method Chaining)을 이용하여 처리할 수 있다.

axios
  .get('/api/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

 

② POST

• 서버에 데이터를 보내서 새로운 리소스를 생성하거나 기존 리소스를 업데이트할 때 사용된다.
• 주로 웹 폼에서 입력한 데이터를 서버로 전송할 때 많이 쓰인다.

try {
  const response = await axios.post('/api/data', { name: 'Park', age: 30 });
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

③ PATCH

• 리소스의 일부를 업데이트할 때 사용된다.
• 기존 데이터를 부분적으로 수정할 때 주로 REST API에서 사용된다.

try {
  const response = await axios.patch('/api/data/1', { age: 31 });
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

④ DELETE

• 서버에서 리소스를 삭제할 때 사용된다.
• 더 이상 필요하지 않은 데이터를 제거하거나 이전 작업을 취소할 때 주로 사용된다.

try {
  const response = await axios.delete('/api/data/1');
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

CRUD는 Create(생성), Read(읽기), Update(업데이트), Delete(삭제)의 약자로, 데이터베이스나 웹 애플리케이션에서 수행할 수 있는 기본 작업을 의미한다.
이 작업을 통해 사용자는 새로운 데이터를 생성하고, 기존 데이터를 읽고, 수정하고, 삭제할 수 있다.

 

⑤ PUT

• 서버에 리소스를 생성하거나 기존 리소스를 완전히 덮어쓸 때 사용된다.
• 기존 리소스를 완전히 교체하는 방식으로, 데이터를 부분적으로 수정하는 PATCH와는 차이가 있다.

try {
  const response = await axios.put('/api/data/1', { name: 'Park', age: 32 });
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

PATCH는 데이터를 부분적으로 수정하고, PUT은 데이터를 완전히 교체한다.

 

⑥ HEAD

• GET과 유사하지만, 서버로부터 응답(Response)의 헤더(Header)만 가져오고, 본문(Body)은 포함하지 않는다.
• 주로 리소스가 존재하는지 확인하거나 응답의 메타데이터를 얻기 위해 사용된다.

try {
  const response = await axios.head('/api/data');
  console.log(response.headers);
} catch (error) {
  console.error(error);
}

 

⑦ OPTIONS

• 특정 리소스에 대해 서버에서 허용하는 HTTP 메서드를 확인할 때 사용된다.
• 주로 CORS(교차 출처 리소스 공유) 요청 시, 서버가 어떤 메서드를 지원하는지 확인하는 데 사용된다.

try {
  const response = await axios.options('/api/data');
  console.log(response.headers['allow']);
} catch (error) {
  console.error(error);
}

 

⑧ TRACE

• 요청(Request)이 서버로 어떻게 도달하는지 경로를 추적하는 데 사용된다.
• 보안상의 이유로 일반적으로 사용되지 않으며, 서버에서 비활성화된 경우가 많다.

try {
  const response = await axios.request({
    method: 'TRACE',
    url: '/api/data',
  });
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

⑨ CONNECT

• 클라이언트와 서버 사이에 네트워크 연결을 설정하는 데 사용되며, 주로 프록시 서버(Proxy Server)를 설정하는 데 쓰인다.
• 일반적인 애플리케이션 개발에서는 잘 사용되지 않는다.

try {
  const response = await axios.request({
    method: 'CONNECT',
    url: '/api/data',
  });
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

(기타) 커스텀 메서드 사용하기

• @axios.request()@ 메서드를 사용하면 HTTP 메서드 외에도 추가로 커스텀 메서드를 설정할 수 있다.

try {
  const response = await axios.request({
    method: 'customMethod',
    url: '/api/data',
    data: { customData: 'value' },
  });
  console.log(response.data);
} catch (error) {
  console.error(error);
}

 

 

정리

• GET: 서버로부터 데이터를 조회하기
• POST: 서버에 데이터를 전송하여 새로운 리소스를 생성하거나 처리하기
• PUT: 서버에 데이터를 보내 기존 리소스를 완전히 덮어쓰기
• PATCH: 서버에 데이터를 보내 기존 리소스의 일부만 업데이트하기
• DELETE: 서버에 존재하는 리소스를 삭제하기
• HEAD: GET과 유사하지만, 응답의 헤더 정보만 가져오기 (리소스가 존재하는지 확인할 때 사용)
• OPTIONS: 서버가 특정 리소스에 대해 지원하는 HTTP 메서드를 확인하기 (주로 CORS 요청 시 사용)
• TRACE: 요청이 서버까지 도달하는 경로를 추적하기 (보안 문제로 거의 사용되지 않음.)
• CONNECT: 서버와 클라이언트 간의 네트워크 연결을 설정하기 (주로 프록시 서버 설정에 사용) 
• @axios.request()@: 직접 HTTP 메서드를 지정해서 사용할 수 있는 커스텀 요청 메서드

 

참고 사이트

https://axios-http.com/docs/api_intro

Axios API | Axios Docs