Axios는 자바스크립트에서 널리 사용되는 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 이용하여 서버에서 데이터를 받아와서 파싱하는 과정에 대해 알아보겠습니다.

1. Axios 설치하기

먼저, Axios를 사용하기 위해 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다.

npm install axios

2. 데이터 요청하기

Axios를 사용하여 서버에서 데이터를 요청하는 방법은 매우 간단합니다. 다음 예제를 통해 알아보겠습니다.

const axios = require('axios');

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

위의 예제에서는 Axios의 get 메소드를 사용하여 https://api.example.com/data 주소로 GET 요청을 보내고 있습니다. 응답은 then 내부에서 처리되며, 데이터는 response.data로 확인할 수 있습니다. 에러 발생 시에는 catch 블록에서 처리합니다.

3. 데이터 파싱하기

응답으로 받은 데이터는 일반적으로 JSON 형식일 것입니다. 이를 파싱하여 원하는 형태로 사용할 수 있습니다. 다음은 응답 데이터를 파싱하는 예제입니다.

axios.get('https://api.example.com/data')
  .then(response => {
    const data = response.data;

    // 파싱된 데이터를 사용하는 로직 작성
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

파싱된 데이터는 data 변수에 저장되어 있으며, 이를 이용하여 원하는 로직을 작성할 수 있습니다.

4. 요청 옵션 설정하기

Axios를 사용하면 요청에 대한 다양한 옵션을 설정할 수 있습니다. 예를 들어, 요청에 헤더를 추가하거나 요청 시간 초과를 설정하는 등의 작업이 가능합니다. 다음은 옵션을 설정하는 예제입니다.

axios.get('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  timeout: 5000
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 headers 옵션을 통해 헤더를 설정하고, timeout 옵션을 통해 요청 시간 초과를 설정하였습니다.

결론

Axios를 사용하면 간편하게 서버에서 데이터를 받아와서 파싱할 수 있습니다. 이를 이용하여 다양한 웹 애플리케이션을 개발할 수 있으며, 외부 API와의 통신에 활용하기에도 적합합니다.

더 자세한 내용은 Axios 공식 문서를 참고하시기 바랍니다.