electron 21

[라즈베리파이 크로스컴파일] electron 앱 개발 중 textarea에서 serial data read 문제 발견! 그리고 해결

지금 제작 중인 DNC에서 serila data를 받고 textarea에 표시해주는 프로그램을 만들었다. 그런데 이 textarea가 무슨 문제인지, 한 번 데이터를 받고 다른 작업을 한 다음에 다시 데이터를 받게 되면 textarea에 표시가 되지 않았다. 그래서 data를 받을 때, 콘솔에 찍어봤더니 콘솔에서는 데이터가 정상적으로 표시되고 있었다. 이리저리 찾아보던 중 text.append()를 쓰는 게 문제였단 걸 알게 됐다. 왜 문제였을까??? 공식문서를 봐도 잘 이해가 되지 않지만, 얼핏 이해하기로는 .append() 메소드는 선택된 요소의 마지막에 새로운 HTML요소나 콘텐츠를 추가하기 때문인 것 같다. textarea는 안에 string요소들을 가지고 있는데 HTML요소를 주기 때문에 어떤 ..

[라즈베리파이 크로스컴파일] electron Node.js serialport 첫 번째 시련 해결!

https://it-jm.tistory.com/32 electron 앱 개발중 Node.js serialport에서 첫 번째 시련 앞서 개발했던 DNC에서 첫 번째 시련에 봉착했다. 이 화면에서 serialport의 세팅 값을 설정한 걸 로컬 스토리지에 저장하고, 이 화면의 우측 2번째 버튼인 포트버튼을 누르면 바뀐 세팅 값으로 적용 it-jm.tistory.com 앞전 포스팅에서 봉착했던 첫 번째 시련이 있다. 바로 시리얼 세팅값을 동적으로 적용시켜서 포트를 Open/Close 하고 싶었는데, 그게 잘 되지 않았다. 어마 무시한 능력자들이 있는 Stackoverflow나, Node.js의 깃헙에도 올려봤지만 답변이 하나도 안달렸다 ㅠㅠ 혼자서 고민하고 여러가지를 시도해본 결과 답이 나와서 함께 공유하려..

[라즈베리파이 크로스컴파일] electron 앱 개발중 Node.js serialport에서 첫 번째 시련

앞서 개발했던 DNC에서 첫 번째 시련에 봉착했다. 이 화면에서 serialport의 세팅 값을 설정한 걸 로컬 스토리지에 저장하고, 이 화면의 우측 2번째 버튼인 포트버튼을 누르면 바뀐 세팅 값으로 적용하려고 한다. // renderer.js let portname, baudrate, databits, stopbits, Parity, RTSCTS; let portOpen = false; const port = new serialport('COM4', { baudRate: baudrate, dataBits: databits, stopBits: stopbits, parity: Parity, rtscts: RTSCTS, autoOpen: false, }) portBtn.addEventListener('cli..

[라즈베리파이 크로스컴파일] electron을 이용한 앱 개발일지

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

[라즈베리파이 크로스컴파일] 6. electron-builder를 통한 윈도우 -> 라즈베리파이 크로스컴파일 하기

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

electron 개발 꿀팁 reload!

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 파일을..

[라즈베리파이 크로스컴파일] 5. electron serialport 예제

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