Axios를 사용하여 서버로부터 파일 다운로드 받기

10 Nov 2023

axios

웹 개발에서 클라이언트는 종종 서버로부터 파일을 다운로드 받아야 하는 상황에 직면합니다. 이때 JavaScript 라이브러리인 Axios를 사용하면 간편하게 파일 다운로드 기능을 구현할 수 있습니다. Axios는 브라우저와 Node.js에서 모두 동작하며, 직관적인 API를 제공하여 HTTP 요청을 손쉽게 처리할 수 있습니다.

Axios 설치하기

먼저 Axios를 설치해야 합니다. Node.js 프로젝트의 경우 npm을 사용하여 Axios를 설치할 수 있습니다. 다음 명령을 실행하여 Axios를 설치합니다.

npm install axios

또는, 브라우저에서 사용하는 프로젝트의 경우 Axios를 CDN을 통해 가져와서 사용할 수도 있습니다. 다음과 같이 HTML 파일의 <head> 태그 안에 Axios CDN을 추가합니다.

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

파일 다운로드 기능 구현하기

Axios를 사용하여 서버로부터 파일을 다운로드하는 기능을 구현해보겠습니다. 다음은 파일 다운로드를 위한 예제입니다.

const axios = require('axios');
const fs = require('fs');

async function downloadFile() {
  const url = 'http://example.com/sample.pdf';
  const savePath = 'downloaded/sample.pdf';

  const response = await axios({
    url,
    method: 'GET',
    responseType: 'stream'
  });

  const writer = fs.createWriteStream(savePath);
  response.data.pipe(writer);

  return new Promise((resolve, reject) => {
    writer.on('finish', resolve);
    writer.on('error', reject);
  });
}

downloadFile()
  .then(() => {
    console.log('File downloaded successfully!');
  })
  .catch((error) => {
    console.error('Failed to download file:', error);
  });

이 예제에서는 Axios를 사용하여 http://example.com/sample.pdf URL에서 파일을 다운로드합니다. 다운로드한 파일은 downloaded/sample.pdf 경로에 저장됩니다. responseType을 stream으로 설정해야 파일을 스트림 형태로 받을 수 있습니다. 이후 파일을 작성하는 스트림을 생성하고, response.data 스트림을 파일 스트림에 파이핑하여 파일을 저장합니다.

결론

Axios를 사용하여 서버로부터 파일을 다운로드하는 기능을 구현하는 방법을 알아보았습니다. Axios는 간편한 API를 제공하여 HTTP 요청을 처리하는 데에 유용합니다. 파일 다운로드 외에도 Axios를 사용하여 다양한 HTTP 요청을 처리할 수 있으니, 프로젝트에서 필요한 기능에 맞게 활용해보시기 바랍니다.

#axios #파일다운로드