파일을 업로드하고 다운로드하는 웹 애플리케이션을 개발할 때 파일 버전 관리가 매우 중요합니다. 이 기능을 통해 사용자는 특정 파일의 여러 버전을 저장하고, 필요한 경우 이전 버전의 파일을 다운로드할 수 있습니다. 자바스크립트를 사용하여 파일 버전 관리를 구현하는 방법에 대해 알아보겠습니다.
파일 업로드
파일 업로드를 위해서는 <input type="file"> 요소를 사용하여 사용자로부터 파일을 선택받아야 합니다. 그리고 이 파일을 서버에 업로드하기 위해 AJAX나 fetch API를 사용할 수 있습니다. 업로드된 파일은 서버에서 고유한 식별자(예: UUID)를 부여하여 저장합니다.
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
const result = await response.json();
console.log('File uploaded. Version:', result.versionId);
});
파일 다운로드
파일 다운로드는 파일의 버전 ID를 기반으로 서버에서 해당 버전의 파일을 가져와 사용자에게 전달하는 방식으로 구현할 수 있습니다.
const downloadButton = document.getElementById('download-button');
downloadButton.addEventListener('click', async () => {
const versionId = 'abcd-1234'; // 다운로드하고자 하는 파일의 버전 ID
const response = await fetch(`/download/${versionId}`);
const fileBlob = await response.blob();
const downloadUrl = URL.createObjectURL(fileBlob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'file.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
});
파일 버전 관리
파일 버전 관리를 구현하는 방법은 서버 측에서 처리되어야 합니다. 파일이 업로드될 때마다 새로운 버전 ID를 생성하고, 해당 ID를 파일과 함께 저장합니다. 파일을 다운로드할 때는 해당 버전 ID를 이용하여 원하는 파일 버전을 가져옵니다.
이러한 파일 버전 관리 시스템은 파일이나 문서의 변경 이력을 추적하고, 필요한 경우 이전 버전의 파일을 복구하는 데 사용될 수 있습니다.
위의 예시는 간단한 파일 업로드 및 다운로드, 그리고 파일 버전 관리를 위한 자바스크립트 코드입니다. 실제 구현에는 서버 측 로직이 추가되어야 하며, 데이터베이스나 파일 시스템에 파일과 버전 정보를 저장하고 관리해야 합니다.
참고 자료
이번에는 자바스크립트로 파일 업로드 및 다운로드 중 파일 버전 관리에 대해 알아보았습니다. 파일 버전 관리 기능은 실제 웹 애플리케이션에서 매우 유용하며, 이를 통해 사용자는 파일의 이전 버전을 쉽게 복구하거나 관리할 수 있습니다.