파일 업로드와 다운로드는 웹 애플리케이션에서 흔히 사용되는 기능입니다. 사용자가 업로드한 파일을 서버에 전송하거나, 서버에서 파일을 다운로드하는 과정에서 예외가 발생할 수 있습니다. 이러한 예외들을 효과적으로 처리하여 사용자 경험을 향상시키고, 오류를 방지할 수 있습니다.
파일 업로드 시 예외 처리
사용자가 파일을 업로드할 때, 다양한 상황에서 예외가 발생할 수 있습니다. 예를 들어, 파일 크기 제한, 유효하지 않은 파일 형식, 혹은 네트워크 오류 등이 있을 수 있습니다. 이러한 상황에 대비하여 파일 업로드 시 다음과 같은 예외 처리를 수행할 수 있습니다.
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file.size > MAX_FILE_SIZE) {
alert('파일 크기가 너무 큽니다.');
return;
}
if (!VALID_FILE_TYPES.includes(file.type)) {
alert('유효하지 않은 파일 형식입니다.');
return;
}
// 파일을 서버로 업로드하는 로직 수행
});
위의 예제에서 MAX_FILE_SIZE와 VALID_FILE_TYPES는 사전에 설정된 파일 크기 제한과 유효한 파일 형식들을 나타내는 변수입니다. 파일 크기나 형식이 유효하지 않을 경우에는 각각의 오류 메시지를 표시하고, 업로드를 중단합니다.
파일 다운로드 시 예외 처리
파일 다운로드 과정에서도 다양한 예외가 발생할 수 있습니다. 서버로부터 파일을 가져오는 중에 네트워크 오류나 파일이 존재하지 않는 경우 등이 이에 해당합니다. 파일 다운로드 시 다음과 같은 예외 처리를 추가할 수 있습니다.
function downloadFile() {
fetch('http://example.com/file')
.then((response) => {
if (!response.ok) {
throw new Error('파일을 다운로드할 수 없습니다.');
}
return response.blob();
})
.then((blob) => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.zip';
a.click();
window.URL.revokeObjectURL(url);
})
.catch((error) => {
alert(error.message);
});
}
위의 코드에서 fetch를 사용하여 파일을 가져오고, 응답 상태코드를 확인하여 오류가 있을 경우에는 적절한 예외를 던지고, 오류 메시지를 표시합니다.
마치며
파일 업로드 및 다운로드 시 발생할 수 있는 다양한 예외들을 효과적으로 처리함으로써, 웹 애플리케이션의 안정성을 향상시키고, 사용자 경험을 개선할 수 있습니다.
이상으로 파일 업로드 및 다운로드 시의 자바스크립트 예외 처리에 대해 알아보았습니다.
참고 문헌: MDN web docs