SPA Single Page Application ๋ก ์์ฑ์ค์ธ ์น ์์ฉํ๋ก๊ทธ๋จ์์ ํ์ผ ๋ค์ด๋ก๋๋ฅผ ๊ตฌํํ ๋, ์ ์ฐฝ์ผ๋ก ๋ค์ด๋ก๋ํ ํ์ผ์ URI๋ฅผ ์ ๊ณตํด์ ์ฒ๋ฆฌํ๋ฉด ๋งค์ฐ ํธ๋ฆฌํ๊ฒ ํ์ผ์ ๋ค์ด๋ก๋ํ ์ ์์ต๋๋ค.
const fileDownloadUri = 'ํ์ผ ๋ค์ด๋ก๋ URI';
window.open(fileDownloadUri, '_blank');
ํ์ผ URI์ ํจ๊ป ์ธ์ฆ์ด ํ์ํ ๋, ์ฟ ํค๋ฅผ ์ฌ์ฉ์ค์ด๋ฉด ๋์ผํ๊ฒ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
๊ทธ๋ฐ๋ฐ, ์ฟ ํค๋ฅผ ์ฌ์ฉํ์ง ์๊ณ , JWT ๋ฑ์ ์ฌ์ฉํด์ ์์ฒญ ํค๋์ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ ํ์์ผ๋ก ์ธ์ฆ์ ์ฒ๋ฆฌ์ค์ด๋ฉด, ์์ฐฝ์ ์ด์ด์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ผ๋ก๋ ์ฒ๋ฆฌ๊ฐ ๋ถ๊ฐ๋ฅํฉ๋๋ค.
์ด ๋, ์ฌ์ฉํ ์ ์๋ ๊ฐ๋จํ ์ฝ๋์กฐ๊ฐ์ npm ํจํค์ง๋ก ๊ณต์ ํฉ๋๋ค.
๐ข @bbon/filedownload ํจํค์ง
npm: @bbon/filedownload ํจํค์ง ํ์ด์ง์์ ํจํค์ง๋ฅผ ํ์ธํ์ค ์ ์์ต๋๋ค.
๐ ์ค์น
$ npm install @bbon/filedownload
$ yarn add @bbon/filedownload
๐ฎ ์ฌ์ฉ
HTTP ์์ฒญ์ ์ฌ์ฉ์ค์ธ ํจํค์ง ๋๋ API๋ฅผ ์ฌ์ฉํ์๋ฉด ๋ฉ๋๋ค.
์๋ต ํ์์ BLOB
์ผ๋ก ์ง์ ๋์ด์ผ ํฉ๋๋ค.
AWS S3, Azure Storage, Google Cloud Storage ๋ฑ์ ํด๋ผ์ฐ๋ ๊ฐ์ฒด ์ ์ฅ์์ ์ฌ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. ๋ฌผ๋ก , ์ง์ ๊ตฌํํ ์น ์์ฉํ๋ก๊ทธ๋จ์ BLOB ์๋ต์๋ ์ฌ์ฉ๊ฐ๋ฅํฉ๋๋ค.
์์ ์ฝ๋์์ HTTP ์์ฒญ์ Axios ํจํค์ง๋ฅผ ์ฌ์ฉํฉ๋๋ค.
const requestConfig: AxiosRequestConfig = {
...Axios.defaults,
responseType: 'blob',
};
Axios.get(fileDownloadUrl, requestConfig)
.then((res) => {
if (res) {
const contentType =
res.headers['content-type'] || 'application/octet-stream';
const helper = new FileDownloadHelper();
helper.download({
data: res.data,
filename: fileName,
contentType,
});
}
})
.catch((err) => {
console.error(err);
})
.finally(() => {
setLoading(false);
});
์ ์ฒด์ฝ๋๋ GitHub: bbon-filedownload-sample ์ ์ฅ์์์ ํ์ธํ์ค ์ ์์ต๋๋ค.
๐ ์์ ํ์ด์ง์์ ๋์์ ํ์ธํ์ค ์ ์์ต๋๋ค. (๋ค์ด๋ก๋ ๋ฒํผ์ ํด๋ฆญํ๋ฉด, ๋นจ๊ฐ ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ํฉ๋๋ค. ํ์ธํ์ค ๋ ๋๐์ ์กฐ์ฌํ์ญ์์ค.)