ㄷㄷㄷㅈ 긴 스토리의 서막일지, 더 큰 건물을 위한 초석 일지 잘 모르겠다. DNC개발을 하기 위해서 SerialPort 개발과 raspberryPi4에 크로스 컴파일까지 생각하고 기초적인 부분을 준비하기 위해서 꽤나 긴 시간이 걸렸다. 기본적인 ipc통신과 화면 navigation, renderer에서 main.js와의 통신 방식까지 아주 기초적인 방식의 부분만 구현해보겠다. 라즈베리파이에서 돌릴 수 있게 만드는 게 최종 목표인 만큼 처음부터 크로스컴파일을 증명하면서 진행하겠다. 그럼, 누군가에겐 도움이 되는 길이길 바라며 시작!!! 파이팅!! ps. 필자는 윈도우 환경에서 라즈베리로 크로스 컴파일을 진행한다. 1. 기초 시리얼 2. 파일 열기 및 저장 3. navigation을 통한 화면 전환 순으로..

굉장히 중요한 부분이고 많은 분들이 어려움을 많이 겪었을 것이라 생각한다. 왜냐면 많은 한, 영문의 문서들이 컴팩트한 정보를 담고 있지도 않고 생각보다 복잡하게 설명하고 있다고 생각했다. 그래서 나는 최대한 컴팩트하고 빠르게 크로스 컴파일을 진행해보겠다. 우선 앞에서 사용하던 serialport exam을 이용해서 해당 내용들을 조금 수정하고 install이 필요한 것은 인스톨해 주겠다. ps. electron-forge는 크로스 컴파일에 관해 정보가 없어서 electron-builder로 진행한다. package.json의 devDependencies 부분에 electron-builder를 추가시키기 위해 아래 코드를 터미널에서 실행해준다. npm install --save-dev electron-bu..

Flutter, vscode, Android Studio 같은 개발 툴을 보면 Hot-reload가 있다. 전에 본 양남 형님의 코딩에서 이 방법을 봐서 공유하려고 한다. https://www.npmjs.com/package/electron-reload electron-reload Simplest way to reload an electron app on file changes! www.npmjs.com npm install electron-reload npm install 설치하고 main.js의 상단에 이걸 추가만 해주면 Hot-reload가 된다. const path = require('path'); require('electron-reload')(__dirname); 이제 css나 html 파일을..

거의 하루 종일 이것만 붙잡고 늘어졌다. 나의 고생이 누군가에게 해결책이 되길 바라며 포스팅을 남긴다. 뭔가 종말의 멘트 같잖아..? Electron 공식 문서에서는 Web API를 이용해서 SerialPort 모듈에 접근한다고 했는데, 따라 해 보니 너무 복잡하고 아두이노 한정 예제라 그런지 되지도 않았다. 그래서 Node.js의 SerialPort 라이브러리로 진행했다. https://serialport.io/docs/ About SerialPort | Node SerialPort Quick Answers to Important Questions serialport.io (참고로 윈도우 버전이다) 아~~~주 친절하게 install 할 수 있는 방법이 설명되어 있지만 절대 사용하지 않겠다...... 왜..

생각보다 복잡하고 힘들었다... 본 예제는 (라즈베리파이) 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, 프로그램의 전체..