생각보다 복잡하고 힘들었다... 본 예제는 (라즈베리파이) Linux에서 진행하므로 버전, 기기 별로 차이가 있을 수 있다. 그러므로 내 라즈베리파이의 기기 버전을 알려주겠다. Raspberry Pi 4 Model B Rev 1.4 Distributor ID: Debian Description: Debian GNU/Linux 10 (buster) 64bit Electron 공식문서를 보고 진행하기에 Electron-forge를 이용하겠다. https://www.electronjs.org/docs/latest/tutorial/quick-start Quick Start | Electron This guide will step you through the process of creating a barebone..

출처. https://www.electronjs.org/docs/latest/tutorial/keyboard-shortcuts Keyboard Shortcuts | Electron This feature allows you to configure local and global keyboard shortcuts for your Electron application. www.electronjs.org 프로그램을 사용할 때 단축키를 지정해서 사용할 때가 있다. (Ctrl + S = 저장) 같이! QT5 하면서 keyPressEvent였나 키가 눌렸을 때 입력을 인지하는 API가 있었는데 Electron에서도 있다니 연습해봐야겠다. Local Short Cut 등록 후 Console창에서 출력하기! (Local..

출처. https://www.electronjs.org/docs/latest/tutorial/dark-mode Dark Mode | Electron "Native interfaces" include the file picker, window border, dialogs, context menus, and more - anything where the UI comes from your operating system and not from your app. The default behavior is to opt into this automatic theming from the OS. www.electronjs.org 앞서 공부했던 mainProcess, rendererProcess와 ipc, 프로그램의 전체..

저번 시간에는 Main Process를 공부했다면, 이번 시간에는 Renderer Process에 관해서 공부해보겠다. Electron앱은 열려있는 윈도우에서 각각의 분리된 Renderer Process를 만들어낸다. 간단하게 설명하자면 HTML: Renderer Process의 진입 포인트, CSS: UI의 스타일링을 더해주는 것, : 실행가능한 자바스크립트 코드를 더해주는 것. 이 말의 뜻은 Renderer는 require라는 API 또는 Node.js의 API로의 직접적인 접근을 하지 않는다는 것이다. 렌더러에 NPM모듈을 직접 포함시키기 위해서는, 웹에서 사용하는 동일한 번들러 툴체인(webpack, parcel)을 사용해야만 한다. 웹은 무지성이기에 무슨 말인지 모르겠다. Renderer Pro..

electron을 라즈베리파이에서 구동하려면 node.js가 설치되어야 하는데, 기본 레퍼지토리에 있는 버전이 낮다. 버전 업도 시키고 설치까지 한 번 해보자. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 여기서 버전을 확인한다. 오늘자 기준, LTS는 16.13.1v 이다. 그럼 라즈베리파이의 터미널에서 sudo curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - 그럼 레퍼지토리를 업데이팅한 것이다. 아래에 잡다구리 하게 나오는 설치 패키지는 기본적으로 ..

출처. https://www.electronjs.org/docs/latest/tutorial/process-model Process Model | Electron Electron inherits its multi-process architecture from Chromium, which makes the framework architecturally very similar to a modern web browser. In this guide, we'll expound on the conceptual knowledge of Electron that we applied in the minimal quick start www.electronjs.org 강의도 없고 혼자 하려니 완전 기초부터 천천히 공식문서 보..

나도 프로그래밍 초보고, electron이라는 황무지에 뛰어들었기 때문에 너무 많은 기대를 하지 않고 보는 걸 추천한다.... 기본적으로 node.js를 깔고 node -v npm -v 음 잘 깔렸군 확인을 했다. 출처. https://www.electronjs.org/docs/latest/tutorial/quick-start Quick Start | Electron This guide will step you through the process of creating a barebones Hello World app in Electron, similar to electron/electron-quick-start. www.electronjs.org 언제나 공식 홈페이지의 Quick Start를 참고하는 게..