간단한 형태로라도 앱이 만들어졌으니 패키징하고 배포를 해보도록 한다. Electron을 패키지하는 방법은 소스코드를 asar로 압축해서 electron, node와 함께 실행파일로 묶으면 된다. 사실 개발하면서 electron .로 앱실행하는 거랑 별반 다를 것이 없다. 그럼 그냥 zip으로 압축해서 배포하면 되는거 아닌가 싶지만... 그렇게 하면 다운로드 받아서 실행하기 불편하기도 하고 모양새도 좋지 않다. 공식문서에 이에 대한 설명이 잘 나와있다. 이렇게 이걸 얼렁뚱땅 넘어가는 이유는 이 방법은 너무 복잡하고 어렵기 때문이다. 역시나 잘 만들어진 툴을 통해서 쉽게 해결하자. electron-builder 대표적인 패키지 라이브러리는 electron-packager와 electron-builder가 있..

Browser도 만들었고 OAuth 연결도 했으니 이제 UI를 만들어본다. UI는 당연하게도 html/css로 다 만들면된다. 물론 canvas로 그려도 되고 web-gl로도 그려도 된다. 중요한 것은 electron에서 사용하는 Chromium버전에만 동작하면 되니 다른 브라우저 신경쓰지 않고 맘껏 만들 수 있다는 점이다. 그동안 잉여력으로 테스트해온 Chromium의 극단을 끄집어낼 기회다. Electron으로 앱을 만들면서 가장 좋았던 점이 이 점이었다. polyfill도 필요없고 변환작업없이 ES6를 사용할 수도 있다. React 여러 UI 라이브러리 중에서 React를 선택했다. 이전에 사용해봐서 익숙하기도 하고 사용자가 많아서 귀찮은 작업을 대신해 줄 외부 라이브러리도 많다. 초반에 webpa..

Electron 시작하기 두번째에서 이야기할 것은 BrowserWindow를 사용한 OAuth 인증, main/renderer 프로세스 서로 간의 통신, 설정값 저장이다. 이 과정을 지나면 앱은 OAuth 인증이 된 상태로 유지될 것이다. OAuth 2.0 먼저 이 예제는 다음블로그의 API를 사용할 것이기 때문에 OAuth 2.0으로 인증을 해야한다. dna 사이트에서 잘 설명하고 있지만 다시 OAuth 2.0과정을 살펴보자면 다음과 같다. 사용자가 앱에서 인증을 시도한다. 앱은 발급받은 CLIENT ID를 비롯한 필요한 정보와 함께 사용자 인증 URL을 브라우저에서 연다. 사용자가 앱 사용 승인을 한다. 이때 authorization_code이 앱에 전달된다. 앱은 authorization_code로..

Electron 시작하기는 세미나에서 발표한 내용 중 다음블로그의 글관리툴 만드는 과정을 설명한다. Electron의 설명이나 특징 같은 것은 내가 만들지 않더라도 이미 많은 문서가 있으니 넘어간다. 물론 중간중간 간단한 설명은 할 것이다. 그 첫번째로 Hello, world!를 해본다. 일단 화면에 뭐라도 출력을 하고나면 그때부턴 쉬워지는 것 같다. Electron 두가지 프로세스 Electron은 간단히 이야기하자면 OS에서 제공하는 API를 사용하는 main process와 Chromium이 제공하는 API를 사용하는 renderer process로 구성되어 있다. main process는 nodejs로 동작하는데 브라우저를 생성하고 Tray, 메뉴 등의 앱 UI 관련된 API를 사용한다. 그리고 ..

재미로 시작한 Electron인데 어쩌다보니 세미나까지 하게 되었다. 파트 개발자 모임을 활성화하려고 하는데 시작할 계기를 만들어야 했고 때마침 내가 왜 그랬는지 모르겠지만 Electron으로 세미나를 하겠다고 했다. 다음블로그 api를 사용해서 지금 글을 쓰고 있는 티스토리 에디터 같은 것을 만드는 과정을 설명하면 되겠다고 이야기를 꺼냈다가 하는 것으로 결정되어 버렸다. 사실 나도 지금까지 알게된 것들을 정리해보고 싶었기도 했기에 이참에 정리를 해보는 것도 좋겠다고 생각했다. 앱 준비 먼저 앱을 만들었다. 말했던대로 다음블로그 API를 사용했고 티스토리 에디터와 비슷한 스타일로 만들었다. 완전히 처음부터 시작해야 설명이 쉬울 것 같아 Hello, world부터 시작해서 리스트, 에디터를 붙여나갔다. 그..