Tempo Di Valse

내가 진행하고 있는 프로젝트의 경우에는 일반적인 프로젝트의 구성과는 약간 다르게 되어있다. Electron 과 Vue 를 조합했지만 Electron 이 권하고 있는 main - renderer 프로세스는 아니며, 폴더의 구조도 Electron > Vue 가 아니라 Vue > Electron 이 되어있다. "왜 그랬을까?" 하면 추가 확장성을 위해서 Vue 를 메인으로 생각했기 때문이라고 하고 싶은데..(어차피 Electron 은 껍데기니까.) Electron-vue 라는 Boilerplate 를 사용하지 않고 처음부터 만들어 보느라 갖가지 내 로직 상으로는 이해 안되는 일이 발생하곤 했다. 그 중 대표적인 하나가 Webpack 을 통해서 Code Splitting 을 한 Chunk 애들이 파일은 있는데 ..

Electron 을 이용하여 프로그램을 만들기 위해서는 electron-builder 라는 것을 통해서 배포하고자 하는 플랫폼으로 포팅을 시킨다. (단, 맥 환경에서 Windows 로 포팅해주지는 못하는 것 같다 [되는 방법이 있으면 알려주세요 ㅠㅜ]) 포팅을 하는 정보는 package.json 에 프로그램의 기본적인 정보들과 script, dependency 정보들과 함께 작성을 한다. electron-builder 의 공식 사이트를 참조해 본다면, electron-builder electron-builder A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux w..

Renderer 프로세스 였다면 DOM Element 를 이용하여 쉽게 Video 를 가져올 수 있겠지만, Main 프로세스 에서는 Node.js 에서 돌아가는 환경이기 때문에 DOM 에 대한 모듈이 있지 않기 때문에 이를 활용하기 위해서 사이즈를 알기위한 또 다른 모듈을 찾아 설치해야 한다. 이미지의 경우에는 npm 에서 여러 모듈들을 찾을 수 있었다. 그러나 비디오의 경우에는 사이즈 정보만 가져오는데에도 너무나 불필요하고 많은 모듈들을 설치해야 한다는 것에, "굳이 왜 쓰지도 않는 걸 다 깔아야 하지?" 라는 생각이 있어서 어떻게 할까 하다가 결국 알아낸 방법이다. 지금까지 일반적인 스크립트로 비디오의 사이즈를 구하는 방법을 다음 처럼 알아내곤 했었다. function getVideoSize(){ c..

웹 페이지에서 이미지를 보여주는 것을 만든다고 하면 를 통하여 이미지를 보여준다. 그래서, 형식처럼 URL 을 넘겨주면 알아서 URL 의 이미지를 불러오곤 한다. 여기서 URL 은 일반 웹상에서 돌아댕기는 http 나 https Scheme 이 붙은 URL 일 수도 있고, data URI 값일 수도 있고 다양한 값으로 가져올 수 있다. 이 방식으로 Electron 환경에서 로컬에 있는 이미지를 부른다면, 로컬 이미지의 경로를 가지고 있기 때문에 URL 넣는 것 처럼 넣어주면 된다고 생각했을 것이다. 그러나 작동하지 않는다. Electron 은 보안상의 이유인 지는 몰라도 Electron 환경에 올라가진 웹 페이지 상에서는 로컬에 있는 데이터를 접근하는 것을 방지하고 있는 것 같았다. 웹 페이지에서 로컬 ..

원래는 Window 프로그램을 만들어보려 Flutter 에 대해 공부하던 중에 Slack 이 Electron 으로 만들어진 프로그램이라는 이야기를 듣고 급선회하여 Electron 을 알아가는 시간을 가져보았다. Electron 에 서버에 있는 홈페이지를 띄우는 것 만으로도 엄청난 반응을 보여주었고 Web 에서 시스템 UI 로 사용하던 alert(), confirm() 함수라던가 파일 다운로드라던가 하는 기능들을 Window 에 맞게 재구성하여 만들어주기도 해서 이 정도면 원하는 프로그램을 만들 수 있다는 충분한 가능성을 확인하여 작업을 착수했고, 기존에 사용하던 Vue 를 Electron 위에 얹어 개발 환경을 꾸리려고 한다. 해당 환경은 'Electron-Vue' 를 사용하지 않은 방식이기 때문에 쉬운..