Axios는 자바스크립트에서 HTTP 요청을 보내기 위한 인기있는 라이브러리입니다. 이 라이브러리를 사용하면 간편하고 효율적으로 JSON 데이터를 서버에 전송할 수 있습니다.

Axios 설치하기

Axios를 사용하기 위해 먼저 프로젝트에 Axios를 설치해야 합니다. 다음과 같이 npm을 사용하여 설치할 수 있습니다:

npm install axios

JSON 데이터 전송하기

Axios를 사용하여 JSON 데이터를 전송하려면 axios.post 메소드를 사용합니다. 이 메소드는 POST 요청을 보내며, 두 개의 파라미터를 받습니다: 요청을 보낼 URL과 전송할 JSON 데이터입니다.

const axios = require('axios');

const data = {
  name: 'John Doe',
  age: 25,
  email: 'johndoe@example.com'
};

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

위의 예제에서는 data 변수에 전송할 JSON 데이터를 정의한 후, axios.post를 호출하여 해당 데이터와 함께 POST 요청을 보냅니다. 요청이 성공하면 then 블록이 실행되고, 응답 데이터가 response.data에 담겨 콘솔에 출력됩니다. 만약 요청이 실패하면 catch 블록이 실행되어 에러를 콘솔에 출력합니다.

요청 헤더 설정하기

Axios를 사용하면 요청 헤더를 설정하여 데이터를 보낼 때 추가적인 정보를 전송할 수도 있습니다. 예를 들어, 인증 토큰을 헤더에 추가하는 경우 다음과 같이 headers 속성을 사용하여 헤더를 설정할 수 있습니다:

const axios = require('axios');

const data = {
  name: 'John Doe',
  age: 25,
  email: 'johndoe@example.com'
};

const headers = {
  Authorization: 'Bearer YOUR_AUTH_TOKEN'
};

axios.post('https://example.com/api/users', data, { headers })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 headers 객체를 만들어 Authorization 헤더에 인증 토큰 값을 설정한 후, axios.post 메소드의 세 번째 파라미터로 해당 헤더를 전달합니다. 이렇게 하면 요청을 보낼 때 추가적인 헤더 정보를 전송할 수 있습니다.

결론

Axios를 사용하면 자바스크립트에서 간편하게 JSON 데이터를 서버에 전송할 수 있습니다. axios.post 메소드를 사용하여 요청을 보내고, 필요한 경우에는 요청 헤더를 설정할 수 있습니다. Axios의 더 자세한 사용법은 Axios 공식 문서를 참조하세요.