Colin's Blog
자바스크립트 Polyfills을 사용하여 웹 애플리케이션의 파일 업로드 및 다운로드를 개선하는 방법은 무엇인가요?

파일 업로드 및 다운로드는 웹 애플리케이션에서 매우 일반적인 기능입니다. 그러나 모든 브라우저가 모든 파일 관련 API를 지원하지는 않습니다. 이런 경우에 자바스크립트 Polyfills을 사용하면, 브라우저 간의 일관된 파일 업로드 및 다운로드 기능을 제공할 수 있습니다.

Polyfill 이란?

Polyfill은 웹 브라우저가 기본적으로 지원하지 않는 기능이나 API를 구현하기 위해 사용되는 코드 조각입니다. Polyfill을 사용하면 최신 기능을 사용하지 않는 이전 브라우저에서도 일관된 사용자 경험을 제공할 수 있습니다.

파일 업로드 Polyfill 사용하기

XMLHttpRequest

이전 버전의 브라우저에서 파일 업로드를 지원하기 위해 XMLHttpRequest 객체를 사용할 수 있습니다. XMLHttpRequest를 사용하는 Polyfill을 추가하면 폼 데이터를 서버로 전송할 수 있습니다.

if (!XMLHttpRequest.prototype.sendAsBinary) {
    XMLHttpRequest.prototype.sendAsBinary = function (sData) {
        var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
        for (var nIdx = 0; nIdx < nBytes; nIdx++) {
            ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
        }
        this.send(ui8Data);
    };
}

이 Polyfill을 사용하여 파일을 업로드하려면 다음과 같이 코드를 작성할 수 있습니다.

var xhr = new XMLHttpRequest();
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', file.type);
xhr.sendAsBinary(file);

Fetch API

XMLHttpRequest 대신 Fetch API를 사용하여 파일 업로드를 지원하려면, 다음과 같은 Polyfill을 추가할 수 있습니다.

if (!('FormData' in window)) {
    window.FormData = function () {
        this.fake = true;
    };
}

이제 Fetch API를 사용하여 파일을 업로드할 수 있습니다.

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

var formData = new FormData();
formData.append('file', file);

fetch('/upload', {
    method: 'POST',
    body: formData
});

파일 다운로드 Polyfill 사용하기

Blob

Blob 객체는 큰 데이터의 조각을 나타내며, 파일 다운로드에 사용될 수 있습니다. 그러나 이 객체가 브라우저에서 지원되지 않는 경우, 다음과 같은 Blob Polyfill을 추가하여 사용할 수 있습니다.

if (!window.Blob) {
    (function () {
        var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
        window.Blob = function (b, t) {
            var bb = new BlobBuilder();
            bb.append(b);
            return bb.getBlob(t);
        };
    }());
}

Polyfill을 추가한 후에는 Blob 객체를 사용하여 파일을 다운로드할 수 있습니다.

var fileData = 'This is the file content';
var blob = new Blob([fileData], {type: 'text/plain;charset=utf-8'});
var url = URL.createObjectURL(blob);

// 파일 다운로드 링크 생성
var downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'file.txt';

// 링크를 클릭하여 파일 다운로드
document.body.appendChild(downloadLink);
downloadLink.click();

결론

파일 업로드 및 다운로드 기능을 자바스크립트 Polyfills를 사용하여 모든 브라우저에서 일관된 사용자 경험을 제공할 수 있습니다. XMLHttpRequest와 Fetch API를 사용하여 파일 업로드를 지원하고, Blob 객체를 사용하여 파일 다운로드를 지원하는 Polyfills를 추가하는 것으로 개선할 수 있습니다.

© 2018 Colin. All rights reserved.