Axios는 자바스크립트를 사용하여 HTTP 요청을 보내는데 사용되는 라이브러리입니다. 클라이언트 측에서 데이터를 검색하는 경우에도 Axios를 사용할 수 있습니다. 이 글에서는 Axios를 사용하여 클라이언트 측에서 데이터를 검색하는 방법에 대해 알아보겠습니다.

설치

먼저, Axios를 설치해야 합니다. npm을 사용하는 경우, 다음 명령을 사용하여 Axios를 설치할 수 있습니다.

npm install axios

브라우저에서 직접 사용하는 경우, Axios는 axios 전역 객체로 사용할 수 있습니다. 스크립트 태그를 사용하여 Axios를 가져오세요.

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

사용법

Axios를 사용하여 데이터를 검색하기 위해 API 엔드포인트에 요청을 보내야 합니다. 일반적으로 GET 요청을 사용하여 데이터를 검색합니다. 다음은 Axios를 사용하여 GET 요청을 보내는 간단한 예제입니다.

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

위의 예제에서는 /api/data 엔드포인트에 GET 요청을 보내고, 데이터를 콘솔에 출력합니다. 요청이 성공하면 response.data에서 응답 데이터에 접근할 수 있습니다. 요청이 실패하면 error 객체가 catch 블록으로 전달됩니다.

매개변수 전달

GET 요청에서는 매개변수를 엔드포인트 뒤에 추가하여 전달할 수 있습니다. Axios는 params 속성을 사용하여 매개변수를 지정할 수 있습니다. 다음은 매개변수를 포함한 GET 요청의 예제입니다.

axios.get('/api/data', {
  params: {
    search: 'example',
    page: 1
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

위의 예제에서는 /api/data 엔드포인트로 search와 page 매개변수를 전달하여 데이터를 검색합니다.

요청 헤더 설정

Axios를 사용하여 요청을 보낼 때, 헤더를 설정하여 인증 토큰이나 추가 정보를 전달할 수 있습니다. headers 속성을 사용하여 요청 헤더를 설정할 수 있습니다. 다음은 요청 헤더를 설정하는 예제입니다.

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

위의 예제에서는 Authorization 헤더에 ‘Bearer MY_TOKEN’ 값을 설정하여 요청을 보냅니다. 필요에 따라 다른 헤더를 설정할 수도 있습니다.

Axios를 사용하여 클라이언트 측에서 데이터를 검색하는 방법에 대해 알아보았습니다. Axios는 간편하고 강력한 HTTP 클라이언트이므로, 데이터 검색이 필요한 경우 사용해 보세요.

#axios #javascript