코드 땜장이

  지난 시간에 깃헙을 통하여 내가 만든 어플리케이션을 업데이트 하는 방법을 보았습니다. 하지만 해당 레파지토리가 public이여야 한다는 한계가 있었습니다.  private 레파지토리인 경우에 사용 할 수 있는 함수가  setFeedURL  이 함수 입니다. 어떤 url에서 버전 확인및 업데이트용 파일을 가져 올 것인지에 대해 설정이 가능 합니다. GitHub 사용하기!  우리는 배포용 서버로 아직 gitHub을 사용 할 수 있습니다. 하지만 private 레파지토리를 그대로 이용 하기에는, github access token을 발급하여야 합니다. 하지만 특정 레파지토리를 제한 할 수 없으면 release만을 위한 옵션을 설정 하기가 애매합니다.  또한 해당 토큰을 유실 또는 노출에 대해서 대처하기에는 꽤나 리스크가 큽니다. 따라서 이 예제 에서는 배포 전용의 public 레파지토리를 만들것을 추천 드립니다.  위 처럼 release 전용이며 public에 전혀 의미없는 커밋을 만들어서 지난 시간에 하였듯이 release들을 만들어 주면 됩니다.  그리고 나면 일렉트론 프로젝트의 index.js를 수정해줍니다. 생략 .... const menu = Menu. buildFromTemplate (templates) Menu. setApplicationMenu (menu) autoUpdater . autoDownload = false autoUpdater .setFeedURL({ provider: 'github', repo: 'my-electron-app-release-only', owner: 'sejinjja' }) 생략 .... autoUpdater.setFeedURL({     provider: 'github',     repo: ${repository},     owner: ${owner}, })  위처럼 변경 해주면 업데이트가 해당 public 레파지토리를 참조 하게 할 수 있습니다. 일

 지난 시간까지 만든 프로그램을 업데이트를 하기 위하여 사용자가 매번 패치 파일을 다운로드 받게 할 수는 없습니다.  electron-updater를 사용하여 사용자가 딱히 신경 쓰지 않아도 업데이트가 되도록 해보겠습니다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 업데이트를 위한 모듈 추가 npm i electron-updater --save npm i electron-log --save electron-updater는 업데이트를 위하여 사용되는 모듈입니다. electron-log는 로그를 파일로 관리 하기 위함 입니다. 업데이트중에는 콘솔을 사용 할 수 없기에 파일에 남겨서 확인하는 것을 추천합니다. 빌드를 위한 일렉트론 설정! 일렉트론 프로젝트의 index.js를 수정하자 변경점의 색상을 변경 하였습니다. const {app , BrowserWindow , Menu } = require( 'electron' ) const path = require( 'path' ) const {autoUpdater} = require('electron-updater') const log = require('electron-log') const createWindow = ( devMode ) => { const win = new BrowserWindow({ width : 800 , height : 600 , webPreferences : { preload : path. join (__dirname , 'preload.js' ) } }) if ( devMode ) { win.loadURL( 'http://localhost:8080' ) } else { win.loadFile( 'dist_web/index.html' ) } win.webContents.openDev

 지난 시간까지 만든 프로그램을 매번 node를 통하여 실행하게 만들 수는 없다. 다른 유저들에게 배포용도라면 더욱더! 그래서 이번 시간에는 electron-builder를 사용하여 설치를 할 수 있는 파일을 만들 수 있게 할 것이다. 기본적으로 이 포스팅 시리즈는 맛보기 정도로 상세한 옵션은 다루지 않습니다. 빌드를 위한 일렉트론 설정! npm i electron-builder --save-dev npm i cross-env --save-dev 일단 위의 명령어를 사용하여 필요한 노드 패키지들을 설치하자! 위의 패키지들을 간단하게 설명하면 electron-builder는 말그대로 electron 프레임워크로 만들어진 프로그램을 빌드해주는 역할을 해주는 패키지이다. cross-env는 환경 변수를 수정해주는 역할을 해준다. 이게 왜 필요한 이유는 아래에 코드를 보면서 설명 하겠다. package.json을 아래와 같이 빨간색으로 표현 된 부분을 추가해주자. { "name" : "my-electron-app" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start" : " cross-env NODE_ENV=dev electron ." , "dist": "electron-builder" } , "keywords" : [] , "author" : "" , "license" : "ISC" , "devDependencies" : { "cross-env": &qu

Vue 개발환경 준비  일단 이 포스트에서는 2.6.14버전을 사용 할 것입니다. 아래를 그대로 진행 해보도록 하자 npm install -g vue-cli vue init webpack my-project 위의 옵션은 입맛대로 하면 되긴 하다. cd my-project npm i && npm run dev Electron 개발환경 준비 index.js const { app , BrowserWindow} = require( 'electron' ) const path = require( 'path' ) const createWindow = () => { const win = new BrowserWindow({ width : 800 , height : 600 }) win.loadURL('http://localhost:8080') } app . whenReady (). then (() => { createWindow () }) win.loadFile('index.html') => win.loadURL('http://localhost:8080') 위 처럼 코드를 바꾸고 npm run start를 해봅시다 자 위와 같이 나왔다면 성공 입니다. 개발환경은 이제 설정이 끝났습니다. Electron api 개발 자 이제 프런트엔드에서 사용 할 수 있는 api를 개발을 해봅시다. 간단하게 파일 읽고 쓰기 를 해보도록 합시다. index.js를 아래와 같이 셋팅 합니다. 해당 window가 로드 될 때 미리 로드될 스크립트를 지정 하는 것입니다. const { app , BrowserWindow} = require( 'electron' ) const path = require( 'path' ) const createWindow = () => { const win = new BrowserWindow({ wi

 Electron 이란?  html, css, javascript로 데스크톱 앱을 만드는 프레임워크이다.  즉 웹 개발자들이 응용플로그램도 개발 할 수 있게 해주는 프레임워크이며 출시된지는 꽤 오래 되었으나, 개발 공부를 시작한지 얼마 안되었거나, 관련 업무가 없었다면 아직 모를 수 있는 부분이다.  물론 예전에는 nwjs라는 툴을 사용 했었지만 업데이트나 인스톨쉴드를 따로 구비해서 배포 했어야 하는 불편함이 있기도 했다.  맥, 윈도우, 리눅스를 지원하는 서비스를 만들 예정이라면 고려해볼 대상이다. Electron으로 만들어진 어플리케이션 뭐 Electron으로 만들어진 어플리케이션이 위의 어플리케이션이 끝은 아니지만, Electron사이트 홈에 소개 되어질 정도로 유명한 서비스들이기에 소개 해보았다. 시작하기! 당연 노드는 설치 되어있다고 생각 하고 진행하겠다. cmd창이나 terminal에 아래의 명령어를 입력 합시다. mkdir my-electron-app && cd my-electron-app npm init -y npm install --save-dev electron  이제 저기에 있는 package.json을 수정해보자. { "name" : "my-electron-app" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start": "electron ." } , "keywords" : [] , "author" : "" , "license" : "ISC" , "devDependencies" :