코드 땜장이

 업데이트 첫 포스팅에  보면 MAC의 경우 전자서명을 하지않으면 진행이 되지 않는다고 언급 한적 있다. 당연하게도 MAC이 필요하니 MAC이 없다면 진행 할 수 없다. Apple Developer Program 구독 하기 Apple Developer Program 구독  기본적인 인적사항 작성 및 개인사업자로 가입을 진행을 하면 된다.  => 기업으로 등록시 DUNS라는 번호를 입력해야 하는등 꽤나 까다롭다. 비용은 년간 계속 발생하며  2022년 4월 기준 129,000원이라는 꽤나 고액의 비용이였다. CSR 만들기 MAC에서 keychain Access.app ( 키체인 접근 ) 이라는 어플리케이션을 실행하자. ( 키체인 접근  => 인증서 지원 => 인증 기관에서 인증서 요청... ) 위처럼 적당히 자신의 정보를 입력 하고 디스크에 저장됨을 클릭하도록 하자. 그리고 계속을 누른다. 적당한 위치에 파일을 다운로드 해두자. 인증서 만들기 인증서 만들러 가기   Certificates "+" <- 파란 버튼을 눌러서 인증서 등록을 시작 할 수 있다. 위처럼  Developer ID Application 을 선택하고 continue로 계속 진행을 하도록 하자.   Previous Sub-CA 를 선택하고 진행을 하며 Choose File을 클릭하여 만들어 두었던 CSR파일을 업로드 하도록 하자. 등록이 완료 되면 다운로드만 진행후 해당 파일을 실행 해주면 된다.  => keychain Access.app ( 키체인 접근 ) 인증서 등록을 진행 할 것인가 라는 질의가 들어올 것이고 등록을 하면 된다. 아래처럼 "인증서가 유효함" 이라고 되어있으면 잘 진행 된 것이다. 이제 다시 MAC에서 우리의 어플리케이션이 빌드 하도록 하자.

  지난 시간에 깃헙을 통하여 내가 만든 어플리케이션을 업데이트 하는 방법을 보았습니다. 하지만 해당 레파지토리가 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}, })  위처럼 변경 해주...

 지난 시간까지 만든 프로그램을 업데이트를 하기 위하여 사용자가 매번 패치 파일을 다운로드 받게 할 수는 없습니다.  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": ...

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" : ...