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부터 시작해서 리스트, 에디터를 붙여나갔다. 그..

난 한번도 그런 생각을 해본 적이 없는데 클립보드의 이미지를 업로드할 수 있게 해달라는 요청을 여러번 받았다. 내 생각에는 이미지 파일로 만들어서 업로드하는 것이 관리도 편하고 더 좋을 것 같은데 클립보드에서 바로 업로드로 이어지는 것이 더 편한가보다. 내가 편히 쓰려고 만든 프로그램이라 내가 안쓰는 기능은 왠만하면 잘 넣지 않지만 이번엔 시간을 내서 해보기로 했다. Electron의 클립보드 Electron에서는 clipboard의 이미지를 반환해주는 api를 제공하는데 그 이미지라는 것은 nativeImage다. nativeImage를 png나 jpeg, bitmap으로 변환하면 드디어 업로드 가능한 데이터가 만들어진다. 이 데이터는 또 Buffer로 만들어지는데 업로드하기 위해선 stream으로 변..

TistoryEditor가 거의 끝나간다. 쓸만해지니 어서 패키징해서 배포를 해보고 싶어졌다. 예전에 electron-packager로 한번 해봤는데 여러가지 설정을 추가로 해줘야해서 electron-builder를 써보기로 했다. get started 설정을 하는거나 시작하는건 packager에 비해서 쉽다. 일단 여러가지 옵션을 쓰지 않고 build만 실행하면 OS에 맞는 버전으로 빌드를 해준다. 다른 OS용 빌드를 할때만 옵션을 준다. 그리고 가장 좋았던 것은 앱 아이콘을 /build에 넣어두기만 하면되고 asar도 기본 옵션으로 들어가 있다. 맥의 경우는 dmg파일도 만들어주고 리눅스의 경우는 deb, rpm도 만들어준다. packager보다 이런 부분에서는 정말 좋은 것 같다. 그 외에도 기본 ..