electron 개발을 하면서 기본적으로 html과 JS 간의 상호작용이 필요할 때가 있다. 바로 이럴때 빈번하게 쓰이는 document.getElementById 와 addEventListener에 대해서 알아보자. html의 요소를 가져와서 사용하고 싶을 때 해당 요소를 가지고 오려면 document.getElementById를 사용하면 된다. 상황을 설정해서 만약 html에서 result라는 버튼이 있고, 그 버튼을 눌렀을때 "결과"이라는 글씨가 바뀌어야 한다고 하자. 결과 정답? // document.getElementById('id')를 이용해서 해당 html을 정의해주고 const result = document.getElementById('result'); const set = documen..

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

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

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

출처. https://www.youtube.com/watch?v=PuG2VW18O1E&t=5s 어떤 함수를 어려워하는 구독자 때문에 만드셨다고 한다. 마음씨가 정말 따뜻하시다. 나도 배워야겠다. // Don't give up // 함수 선언 function doSomething(add) { console.log(add); //함수를 이용해서 안에서 사용 가능 const result = add(2, 3); console.log(result); } function add(a, b) { const sum = a + b; return sum; } // 함수 호출 doSomething(add); //함수를 전달함. 함수 자체를 전달해버림 function add() {} // const result = add(1,..

출처. 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.youtube.com/watch?v=aoQSOZfz3vQ 드디어 입문의 마지막이다. 동기와 비동기. 멀티스레딩이 아닌 곳에서 유용하게 쓰이는 만큼 어렵다. callback -> promise -> async, await으로 이어지는 전개가 좋았다. 'use strict'; const { reject } = require("async"); // async & await // clear style of using promise :) // 1. async // function fetchUser에 들어와서 10초 동안 처리를 기다리고 그 다음 일을 수행하게 된다. function fetchUser() { // do network request in 10 secs... return '..