Axios와 함께 사용하는 HTTP 통신 메서드: GET, PUT, DELETE, POST

by

웹 개발과 서버 개발에서 HTTP 통신은 필수적입니다. 데이터를 주고받기 위한 핵심 도구 중 하나로, 이를 효과적으로 다루기 위해 Axios라는 JavaScript 라이브러리가 있습니다. Axios는 HTTP 클라이언트 라이브러리로서 다양한 HTTP 메서드(GET, PUT, DELETE, POST)를 활용하여 클라이언트와 서버 간의 통신을 관리합니다. 이번 글에서는 Axios와 함께 사용하는 네 가지 주요 HTTP 메서드를 살펴보겠습니다.


Axios 라이브러리 설치

먼저 Axios를 사용하기 위해서는 프로젝트에 이 라이브러리를 설치해야 합니다. Node.js 프로젝트의 경우 npm 또는 yarn을 사용하여 설치할 수 있으며, 브라우저 환경에서는 <script> 태그로 직접 로드할 수 있습니다.

npm install axios
# 또는
yarn add axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


1. GET 메서드

GET 메서드는 서버로부터 데이터를 요청하기 위해 사용됩니다. Axios를 이용하여 GET 요청을 보내면, 서버는 해당 데이터를 응답합니다. GET 요청은 데이터를 요청하는 목적으로 주로 사용되며, URL을 통해 데이터를 전송합니다.

예를 들어, 다음은 Axios를 사용하여 GET 요청을 보내고 서버로부터 데이터를 받아오는 코드입니다:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('서버 응답 데이터:', response.data);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });


2. PUT 메서드

PUT 메서드는 서버의 리소스를 업데이트(수정)하기 위해 사용됩니다. 클라이언트가 PUT 메서드를 사용하여 서버에게 업데이트할 데이터를 제공하면, 서버는 해당 데이터로 리소스를 업데이트합니다. PUT은 데이터를 완전히 교체하는 것을 의미하므로, 요청한 데이터로 리소스를 대체합니다.

예를 들어, 블로그 글을 수정하는 작업에서 PUT 메서드를 사용할 수 있습니다:

axios.put('https://api.example.com/posts/1', {
    title: '새로운 제목',
    content: '새로운 내용'
  })
  .then(response => {
    console.log('PUT 성공:', response.data);
  })
  .catch(error => {
    console.error('PUT 에러:', error);
  });


3. DELETE 메서드

DELETE 메서드는 서버의 리소스를 삭제하기 위해 사용됩니다. 클라이언트가 DELETE 메서드를 사용하여 삭제하고자 하는 리소스를 지정하면, 서버는 해당 리소스를 삭제합니다. DELETE 메서드는 주로 리소스의 삭제나 제거 작업에 사용됩니다.

예를 들어, 온라인 파일 스토리지에서 파일을 삭제하는 작업에서 DELETE 메서드를 사용할 수 있습니다:

axios.delete('https://api.example.com/files/123')
  .then(response => {
    console.log('DELETE 성공:', response.data);
  })
  .catch(error => {
    console.error('DELETE 에러:', error);
  });


4. POST 메서드

POST 메서드는 서버로 데이터를 제출하고, 해당 데이터를 처리하기 위해 사용됩니다. 클라이언트가 POST 메서드를 사용하여 서버에게 데이터를 보내면, 서버는 해당 데이터를 처리하고 응답합니다. POST 요청은 주로 새로운 리소스를 생성하거나 업데이트하기 위해 사용됩니다.

예를 들어, 사용자가 새로운 댓글을 게시하는 작업에서 POST 메서드를 사용할 수 있습니다:

axios.post('https://api.example.com/comments', {
    username: '사용자1',
    content: '새로운 댓글 내용'
  })
  .then(response => {
    console.log('POST 성공:', response.data);
  })
  .catch(error => {
    console.error('POST 에러:', error);
  });

Axios는 이러한 HTTP 메서드들을 쉽게 활용할 수 있도록 도와주는 강력한 도구입니다. 프로젝트의 요구사항에 맞게 이 메서드들을 활용하여 클라이언트와 서버 간의 원활한 통신을 구현할 수 있습니다.



Leave a Comment