웹은 인류가 만든 최고의 문화 또는 기술 중 하나입니다. 웹을 통해 이룰 수 있는 그 가능성은 무한하며 그 가능성을 현실로 이루기 위해서는 기술이 필요한데, 이러한 기술에 대해 설명합니다.
위의 영상에 더해 더 많은 영상을 제공하고 지속적으로 내용이 추가되므로 해당 채널에 방문하여 참고하시기 바랍니다.
공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
웹은 인류가 만든 최고의 문화 또는 기술 중 하나입니다. 웹을 통해 이룰 수 있는 그 가능성은 무한하며 그 가능성을 현실로 이루기 위해서는 기술이 필요한데, 이러한 기술에 대해 설명합니다.
위의 영상에 더해 더 많은 영상을 제공하고 지속적으로 내용이 추가되므로 해당 채널에 방문하여 참고하시기 바랍니다.
웹 API가 계속 발전하고 그에 맞춰 Javascript도 개선되는 과정에서 괴리가 발생하는데요. 그중 한가지 사례로 다중 파일에 대한 드랍처리입니다.
아래의 드랍 처리는 2개 이상의 파일을 드랍했을때 처리되어야할 파일이 누락됩니다.
dropArea.addEventListener('drop', async (e) => { e.preventDefault(); dropArea.classList.remove('highlight'); fileListElement.innerHTML = ''; const items = e.dataTransfer.items; if (items) { for (let i = 0; i < items.length; i++) { try { const handle = await items[i].getAsFileSystemHandle(); if (handle.kind === 'file') { const file = await handle.getFile(); displayFile(file); } else if (handle.kind === 'directory') { await traverseFileSystemHandle(handle); } } catch (error) { console.error(error); } } } });
위 코드의 문제점에 대한 원인은 비동기 처리를 위해 js에서는 for await .. of 문이 도입되었으나 아직 drop 이벤트 객체의 dataTransfer.items 컬렉션은 이를 지원하지 않기 때문입니다. 차선책으로 이를 개선한 코드가 다음과 같습니다.
dropArea.addEventListener('drop', async (e) => { e.preventDefault(); dropArea.classList.remove('highlight'); fileListElement.innerHTML = ''; const items = e.dataTransfer.items; if (items) { const processingPromises = []; for (let i = 0; i < items.length; i++) { processingPromises.push((async () => { if (items[i].getAsFileSystemHandle) { try { const handle = await items[i].getAsFileSystemHandle(); if (handle.kind === 'file') { const file = await handle.getFile(); displayFile(file); } else if (handle.kind === 'directory') { await traverseFileSystemHandle(handle); } } catch (error) { console.warn(error); } } })()); // 즉시 실행 } await Promise.allSettled(processingPromises); } });