클라이언트-서버 통신은 웹 개발에서 매우 중요한 부분입니다. Axios는 JavaScript에서 가장 일반적으로 사용되는 HTTP 클라이언트 라이브러리 중 하나입니다. 이번 블로그 포스트에서는 Axios를 사용하여 클라이언트-서버 간의 통신을 어떻게 처리하는지 알아보겠습니다.

1. Axios 설치

Axios를 사용하기 위해서는 먼저 npm (Node Package Manager)을 통해 설치해야 합니다. 아래의 명령을 사용하여 Axios를 프로젝트에 추가할 수 있습니다.

npm install axios

2. Axios 요청 보내기

Axios를 이용하여 서버에 GET, POST, PUT, DELETE 등을 포함한 다양한 종류의 요청을 보낼 수 있습니다. 아래는 서버로 GET 요청을 보내는 예제입니다.

const axios = require('axios');

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

서버로 요청을 보내면, .get() 메서드의 체인에 이어 .then()과 .catch()를 통해 성공과 실패에 대한 콜백을 처리할 수 있습니다. 서버의 응답은 response 객체에 저장되며, 응답 데이터는 response.data 속성을 통해 접근할 수 있습니다.

3. Axios 요청에 데이터 전달

다른 HTTP 메서드를 사용하여 서버에 요청을 보낼 때, 데이터를 함께 전달해야 할 때가 있습니다. 아래는 POST 요청을 보내는 예제입니다.

const axios = require('axios');

axios.post('https://api.example.com/posts', {
    title: 'New Post',
    content: 'Lorem ipsum dolor sit amet'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

POST 요청 시 axios.post() 메서드의 두 번째 매개변수로 데이터를 전달합니다. 위 예제에서는 title과 content라는 키를 갖는 객체를 전달하고 있습니다.

4. Axios 요청에 헤더 추가

Axios를 사용하여 요청을 보낼 때, 헤더에 추가 정보를 포함할 수 있습니다. 아래는 헤더를 추가하는 예제입니다.

const axios = require('axios');

axios.get('https://api.example.com/posts', {
    headers: {
      Authorization: 'Bearer token123'
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위 예제에서는 Authorization이라는 헤더에 ‘Bearer token123’를 전달하고 있습니다. 필요에 따라 다른 헤더도 추가할 수 있습니다.

Axios를 사용하여 클라이언트-서버 통신을 처리하는 방법을 알아보았습니다. 자세한 내용은 Axios 공식 문서를 참고해 주세요.