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

Tistory Editor를 만들면서 급격하게 글을 쓰는 빈도가 늘어났다. 그 중의 많은 양을 역시 Tistory Editor가 차지하고 있다. Electron이라는 것을 처음 사용하면서 만든 앱이라 시행착오를 겪으면서 많이 배웠다. 문서가 부족해서 부딛히면서 얻은 팁도 몇개 생겼다. 문서에 그런 것들이 다 녹아들어 있는 줄 알았는데 지금 보니 그렇지 않은 것 같다. 그래서 찬찬히 글을 읽어봤다. Tistory Editor with Electron material-ui 적용 electron-builder to-markdown에서 jsdom로드 제외 Tistory Editor 0.2.3 delta-to-html Clipboard 이미지의 업로드 빠진 부분이 뭔지 보니 별로 없다. 제목과 다른 내용이 몇몇 ..

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