electron으로 작업하던 중 서버에 s3로 저장된 파일을 다운로드 기능을 구현하기 위해 <a> tag를 사용했다. 브라우저에서는 <a href="s3 address" download> 기능을 사용해도 문제 없었으나 electron에서는 저장하는 창은 뜨지만 파일이 다운로드 되지 않았다. 에러 로그도 없고 이유를 알 수 없어서 삽질을 시작하게 되었다...

첫번째 삽질

a tag 로 다운로드가 안되는 것인가 생각하고

https://chiragagrawal65.medium.com/how-to-download-any-file-from-your-electron-app-to-a-custom-location-in-5-steps-c8d37cc3a774

위의 링크를 참고하여 ipcMain과 ipcRenderer 를 이용한 후 webContents.downloadURL() 메서드를 사용했으나 동일한 현상이 발생했다.

내부 파일을 다운로드 받는 프로세스는 아니라서 dialog API는 사용하는 게 아니라고 생각이 들어서 패스하게 되었다.

두번째 삽질

GPT에게 물어보니 fetch와 blob API를 사용하여 진행하라는 답변이 있었다.

S3에 업로드 된 파일이 fetch로는 받을 수 없다는 결론이 나와 이 답변은 패스하게 되었다.

마지막 삽질

팀장님께서는 download 속성을 보신적이 없다고 하여 없애보라고 하니 다운로드가 되었다... "왜지?" 라는 생각이 너무 많았지만 나 같이 고민했던 사람들이 있었다는 것을 알게 되었다.

https://github.com/electron/electron/issues/32166

그래서 a tag 의 download 속성에 대해 알아봐야겠다는 생각을 했다.

<a> tag download attribute

download

링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.

• 값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다.
  • Content-Disposition HTTP 헤더
  • URL 경로의 마지막 조각
  • 미디어 유형 (Content-Type 헤더, data: URL의 시작 부분, blob: URL의 Blob.type에서 알아냄)
• 값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. /와 \ 문자는_로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.

※ 참고:- download는 동일 출처 URL과 blob:, data: 스킴에서만 작동합니다.

- Content-Disposition의 filename이 download와 다를 땐 헤더가 우선권을 가집니다. 
(Content-Disposition: inline일 때, Firefox는 헤더를 우선하고 Chrome은 download를 우선합니다.)

위의 https://github.com/electron/electron/issues/32166 링크에서 답변을 보니 Chromium은 교차 사이트 출처의 보안상의 이유로 다운로드 속성 값을 무시하도록 특별히 선택했습니다. 라고 나와있었다.
일렉트론은 Chromium 을 기반으로 작동을 하니 동일 출처가 아니라 electron에서는 작동하지 않는구나 라고 생각이 들었다.

electron은 하면 할 수록 어렵다...

reference
https://developer.mozilla.org/ko/docs/Web/HTML/Element/a
https://www.w3schools.com/tags/att_a_download.asp