제이쿼리 zip 파일로 변경 시 동기 비동기 해결방법

Question

안녕하세요 아직도 초보개발자 입니다...ㅠ제가 이미지들을 한번에 다운받기 위하여 찾아온 방법이 이미지 파일들을 zip파일로 변환하여 다운받는 방법입니다. 핵심적인 참조는 https://jsfiddle.net/jaitsujin/zrdgsjht/ 를 통하여 참조하였습니다. 사용한 js는 jszip.min.js, jszip-utils.min.js를 사용하였구요 다운로드에 성공하였지만 each를 통한 반복안에서 JSZipUtils.getBinaryContent가 끝나지도 않았는데 반복문이 돌아가서 이미지 10개를 zip파일에 넣어야되는데 1개~2개만 들어가드라구요 이게 동기 비동기 문제인거같은데 어떻게 해결해야될까요??? //다운 $('.ad_download_pop .btn-submit').click(function () { var filePath &#61; $('.area_drawing .panel-title').text(); var fileName &#61; ''; var fileSrc &#61; ''; var fileValue &#61; ''; var fileValue2 &#61; ''; var fileCount &#61; $('.area_drawing img').length; var setName &#61; ''; var zip &#61; new JSZip(); var count &#61; 0; var zipFilename &#61; &#34;Pictures.zip&#34;; var WebHref &#61; $(location).attr('href').split(&#34;/&#34;); // 웹 싸이트 경로 var WebPath &#61; ''; // 웹 도메인 경로 for (var i &#61; 0; i < 3; i&#43;&#43;) { // 이미지 경로를 알아내기위해 딱 도메인 경로까지만 알아내기 if (i &#61;&#61; 2) { WebPath &#43;&#61; WebHref[i]; } else { WebPath &#43;&#61; WebHref[i] &#43; '/'; } } $('.area_drawing img').each(function (index, item) { //zip JSZipUtils.getBinaryContent 이친구가 비동기라서 시간을 못따라간다 그래서 방법을 찾을것 filePath &#61; WebPath &#43; $(this).attr(&#34;src&#34;); // 이미지파일 웹 경로 &#43; 이미지 파일 경로 fileValue &#61; $(this).attr(&#34;src&#34;).split(&#34;.&#34;); fileSrc &#61; fileValue[fileValue.length - 1];//이미지 확장자 fileValue2 &#61; $(this).attr(&#34;src&#34;).split(&#34;/&#34;); fileName &#61; fileValue2[fileValue2.length - 1];//실제 이미지 이름 &#43; 확장자 setName &#61; $(this).attr(&#34;data-filenm&#34;) &#43; '.' &#43; fileSrc; // 이미지 저장될 파일 이름 &#43; 확장자 //console.log('이미지 총 개수 : ' &#43; fileCount); //console.log('이미지파일 웹 경로 &#43; 이미지 파일 경로 : ' &#43; filePath); //console.log('이미지 확장자 : ' &#43; fileSrc); //console.log('실제 이미지 이름 &#43; 확장자 : ' &#43; fileName); //console.log('이미지 저장될 파일 이름 &#43; 확장자 : ' &#43; setName); //console.log('index : ' &#43; index); //console.log('item : ' &#43; item); //console.log('FileValue2 : ' &#43; FileValue2); //console.log('url : ' &#43; $(location).attr('href')); //console.log('url2 : ' &#43; $(this).attr('href')); //console.log('url3 : ' &#43; $(location).attr('href').split(&#34;/&#34;)); //이미지가 없어서 나오는 이미지 말고는 다 다운받을 수 있도록 설정 if (fileName &#61;&#61; 'x_img.png' || fileName &#61;&#61; 'x_medium.png') { console.log('없어 카운트업'); count&#43;&#43;; // 없어도 카운트는 진행해야 총 개수에 맞춘다. } else { console.log('도면 및 실사 있어서 다운 진행'); // loading a file and add it in a zip file JSZipUtils.getBinaryContent(filePath, function (err, data) { if (err) { throw err; // or handle the error } zip.file(setName, data, { binary: true }); console.log('있어 카운트업'); count&#43;&#43;; console.log('count1 : ' &#43; count); if (count &#61;&#61; fileCount) { zip.generateAsync({ type: 'blob' }).then(function (content) { saveAs(content, zipFilename); }); } }); } console.log('count2 : ' &#43; count); }); });

킁킁탐정 · Accepted Answer

충분하게 시간을 들여서 다양한곳에서 비동기 관련 정보를 참조하셔야합니다.단시간에 자신이 원하는 결과만큼 이해가 되지 않을수 있습니다.직접 작성한 예제를 하나 남겨드립니다. 이해에 도움이 되길 바랍니다. https://codesandbox.io/s/fervent-roentgen-3etum?file=/index.html

킁킁탐정 · Answer

비동기 제어 관련은 Javascript에서 필수 내용이라 제대로 사용법을 이번기회에 배우시는걸 추천드립니다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise다른 기타 자료도 많으니 이해하신후에 함수를 적절하게 분할하고 Promise.all() 또는 Promise.allSettled() 등을 통해 원하는 결과를 얻으 실수 있습니다.

한수 배우겠습니다 · Answer

#킁킁탐정님 감사합니다.하지만 위와같은 방법은 익스플로러에서는 전부 사용이 불가하다고 나오는데 다른 방법은 없나요?

킁킁탐정 · Answer

IE 버전 몇까지를 지원해야하는지 여부에 달렸습니다만 Promise로 IE를 지원해야한다면 구글 같은 검색 엔진에 &#34;promise polyfill ie11&#34; 입력하시면 다양한 정보를 얻으실 수 있습니다. 추가, IE8&#43;https://github.com/taylorhakes/promise-polyfill

한수 배우겠습니다 · Answer

#킁킁탐정님 감사합니다. 하지만 이해가 조금도 되지 않습니다. 반복문 중 비동기의 실행이 끝날 때까지 기다렸다가 다음을 진행하길 바라는데 '비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다.'위와같다면 아무 소용이 없는게 아닌가요??

제이쿼리 zip 파일로 변경 시 동기 비동기 해결방법

5개의 답변

Q&A 목록