Suwoni블로그

Electron Windows Installer 실행 레지스트리 추가 하는 방법Windows Installer로 설치를 실행할 때 레지스트리를 추가해야하는 경우가 있습니다. 저의 경우는 Electron으로 채팅앱을 만들면서, 웹소스들을 그대로 Android와 IOS로 들고와 앱으로 감싸는 시도를 하였습니다. Android와 IOS의 공통적인 앱과 통신 하는 방법으로 아래와 같은 코드로 커스텀 스킴을 사용하는 방법을 적용하게 되었습니다.location.href='togethersTalk://setAlarm'; 위와 같이 커스텀 스킴을 사용하여 코드를 작성하고 빌드를 하게되면 Mac에서는 문제가 발생하지 않는데.. Windows에서 프로그램을 설치하고 나면 아래와 같은 팝업이 똬 하고 떠버립니다... 이러한..

Electron에서 자바스크립트 라이브러리 로딩시 유의 점관련 글https://blog.outsider.ne.kr/1170http://stackoverflow.com/questions/32621988/electron-jquery-is-not-definedElectron 관련 유용한 링크Electron 공식 홈페이지 : https://electron.atom.io/Awesome Electron : https://github.com/sindresorhus/awesome-electronElectron Doc 한국어 번역 : https://www.gitbook.com/book/imfly/electron-docs-gitbook/details/ko-KRElectron Korea 페이스북 그룹 : https://ww..

Electron Debugging.Electron 공식 홈페이지에서는 Debugging과 관련하여 3가지 문서를 제공합니다.Debugging the Main ProcessDebugging the Main Process in node-inspectorDebugging the Main Process in VSCodenode-inspector의 설정을 잘못한 탓인지는 몰라도..node-inspector의 디버깅은 원할할게 디버깅이 되지 않았습니다. 그에 반해 Visual Studio Code 에서는 깔끔하게 Main Process와 Renderer Process의 코드를 모두 디버깅할수 있었습니다. 그래서 Visual Studio Code의 디버깅 방법을 소개 합니다.Main Process Debugging ..

Electron API Demo.Electron API 를 사용해보는 간단한 예제 입니다.Menu(Main), shell(Both), dialog(Main) 활용 예제메뉴를 생성하고 해당 메뉴에서 몇가지 기능을 실행해 봅니다.Menu - 어플리케이션의 메뉴를 생성하는 API shell - file과 url을 사용자의 기본 어플리케이션으로 실행 및 관리해주는 API dialog - alert 및 file dialog창 생성아래와 같이 menu.js파일을 생성합니다. 변수 arrMenu에 해당하는 하나의 객체는 MenuItem 객체입니다.MenuItem 객체 상세옵션 menu.jsconst {app, shell, dialog, Menu, BrowserWindow} = require('electron'); c..

Electron 배포를 위한 Installer 만들기.1. electron-builder 설치installer파일을 만들기 위해서 npm으로 electron-builder을 설치해야 합니다. 커맨드 창에서 아래의 명령어를 실행합니다. electron-builder설치 npm install --save-dev electron-builder 2. npm script 작성package.json scripts의 하위 항목에 아래 내용을 추가합니다. 아래의 내용은 커맨드 창에서 입력할수 있는 명령어를 scripts 하위항목에 추가하는 내용입니다. 옵션에대한 좀더 자세한 내용은 아래 링크를 참조 바랍니다. CLI 상세 옵션 package.json "build:osx": "build --mac", "build:lin..

Electron 첫번째 어플리케이션 만들기.1. Project폴더 생성 후 package.json 작성하기앞서 Node.js를 설치 하였기 때문에 npm init 명령어가 가능합니다. 커맨드 창에서 프로젝트 경로로 진입 한 후 npm init -y 명령어로 기본 package.json 파일을 생성합니다. -y 옵션은 기본값으로 package.json을 생성하는 옵션입니다. package.json을 생성한 후 아래와 같이 수정합니다(주석 제외, 주석 포함시 에러발생). package.json { "name": "Electron-HelloWorld", "version": "1.0.0", "description": "", "main": "index.js", //엔트리 포인트 "scripts": { "start..

Electron 소개Electron은 무엇인가?Electron은 HTML, css, javascript을 사용하여 크로스 플랫폼을 지원하는 데스크탑 어플리케이션을 제작할 수 있는 프레임워크입니다. Electron은 Chromium과 Node.js를 하나의 런타임으로 결합하여 실행되며, Mac, Windows 및 Linux 용으로 패키지화 할 수 있습니다. Electron으로 만들어진 프로그램Atom - https://atom.io/Visual Studio Code - https://code.visualstudio.com/ Kaku Music player - http://kaku.rocks/WebTorrent - https://webtorrent.io/ Electron 설치Node 설치 - https://..

목차1. Electron 소개2. Electron Hello World3. Electron 인스톨러 만들기4. Electron API Demo5. Electron Debugging6. Electron 기타 등등7. Electron Windows Install시 커스텀 스킴 레지스트리에 추가하는 방법 자료들은 Github에 올려져 있고 pull 받으실수 있으며, npm install 명령어를 통해 패키지를 install한 후 실행해볼 수 있습니다. http://github.com/cionman