파일 다운로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 이번에는 JavaScript의 Promise를 활용하여 파일을 다운로드하는 기능을 구현해 보겠습니다.
HTML 구조
먼저, HTML 파일에 다운로드 버튼을 추가해야 합니다. 다음과 같이 HTML 구조를 작성해 봅시다.
<button id="downloadBtn">파일 다운로드</button>
JavaScript 코드
이제 JavaScript를 사용하여 다운로드 기능을 구현해 보겠습니다. 먼저, getFile 함수를 정의하여 서버에서 파일을 가져오는 로직을 작성합니다.
function getFile(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob'; // 파일 다운로드를 위해 blob 형식으로 응답 받기
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error(`파일 다운로드 중 오류가 발생했습니다. (Status Code: ${xhr.status})`));
}
};
xhr.onerror = () => {
reject(new Error('파일 다운로드 중 오류가 발생했습니다. 네트워크 연결을 확인해 주세요.'));
};
xhr.send();
});
}
getFile 함수는 XMLHttpRequest를 사용하여 서버에서 파일을 가져오는 비동기 작업을 처리합니다. 이 함수는 Promise를 반환하므로, 파일을 정상적으로 가져오면 resolve 콜백을 호출하고, 오류가 발생하면 reject 콜백을 호출합니다.
이제, 다운로드 버튼을 클릭했을 때 파일을 다운로드하는 이벤트 핸들러를 작성해 보겠습니다.
const downloadBtn = document.getElementById('downloadBtn');
downloadBtn.addEventListener('click', () => {
const fileUrl = '/path/to/file'; // 다운로드할 파일의 URL
getFile(fileUrl)
.then((fileBlob) => {
const downloadUrl = URL.createObjectURL(fileBlob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = '파일명.jpg'; // 다운로드될 파일의 이름
a.click();
URL.revokeObjectURL(downloadUrl);
})
.catch((error) => {
console.error(error);
alert('파일 다운로드 중 오류가 발생했습니다. 다시 시도해 주세요.');
});
});
다운로드 버튼 클릭 시, 위의 코드에서는 getFile 함수를 호출하여 파일을 가져옵니다. getFile 함수는 Promise를 반환하며, 파일을 성공적으로 가져오면 응답으로 받은 blob 객체를 가지고 파일 URL을 생성하여 a 태그를 생성합니다. 이후 a 태그의 click 이벤트를 호출하여 파일을 다운로드하고, URL 객체를 해제합니다.
마무리
이렇게 Promise를 이용하여 파일 다운로드 기능을 구현해 보았습니다. Promise는 비동기 작업을 처리하고, 성공 또는 실패에 대한 처리를 간편하게 할 수 있는 강력한 기능입니다. 파일 다운로드 외에도 서버에서 데이터를 가져오는 작업 등 다양한 상황에서 Promise를 활용할 수 있습니다.
#CodingTips #JavaScript