윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 3

2020/04/28 - [Development] - 윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 1

2020/04/29 - [Development] - 윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 2

2020/04/29 - [Development] - 윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 3

 

진행하고 있는 프로젝트에서 시리얼포트를 이용한 통신 기능도 집어넣어야 할 상황이 생겼다. 그래서 어찌어찌 구현을 하긴 했는데 이것도 꽤 삽질을 했던 터라 기록을 위해 삽질기를 남겨두려고 한다.

일단 기본 개발 환경은 이전에 포스팅 했던 글에서 다 잡아놨으니 그걸 베이스로 한다. 여기에 일렉트론에서 시리얼포트를 이용하려면 'serialport'모듈을 사용하면 되는데 이런 경우 실제 드라이버로 연결되는 부분들은 각 플랫폼(Windows, macOS, Linux 등) 별로 인터페이스나 사용방법이 다 다를 수 있다. 때문에 윈도우즈에서는 'serialport'모듈을 설치하고 바로 사용하면 에러가 나더라. 이를 해결한 방법을 기록해 본다.

 

먼저, 플랫폼 별로 다시 빌드를 해야 할 필요가 있기 때문에 'npm install -g node-gyp'를 해 준다.

https://github.com/nodejs/node-gyp

nodejs/node-gyp

 

그 다음 'serialport'모듈을 인스톨 해 주면 되는데, 그 전에 코드를 먼저 삽입하자. 코드는 시리얼포트 예제에서 가져왔다.

https://github.com/serialport/electron-serialport

serialport/electron-serialport

https://serialport.io/docs/guide-about

Node SerialPort · Node.js package to access serial ports for Linux, OSX and Windows.

 

코드는 별거 없다. 그냥 현재 장치관리자에서 'COMx'으로 등록되어 있는 장치가 있는지 검사하고 있으면 모든 포트들을 순서대로 화면에 출력하는 내용이다.

그러니까, 일단 'index.html'의 적당한 곳에 아래 코드를 넣어주고,

<div id="port-list"></div>

'preload.js'의 제일 윗 부분을 아래와 같이 수정한다.

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
  
  const Serialport = require('serialport')
  Serialport.list().then(ports => {
    document.getElementById("port-list").innerHTML = `
    <h1>Detected Serial Ports</h1>
    <ul>
      ${ports.map(port => `<li>${port.path}</li>`).join('')}
    </ul>
    `
  })
})

 

이제 실행하기 전에 'serialport'모듈을 설치해야 한다. 간단하게, 'npm install serialport'를 해 주면 되는데, 다른 플랫폼은 모르겠지만 윈도우즈(Windows)에서는 이 상태에서 실행하면 분명히 에러가 발생할 것이다.

이를 해결하기 위해서는 모듈을 새로 빌드를 해 줘야 하는데 이 때 필요한 것이 'electron-rebuild'모듈이다. 이건 그냥 설치하면 안되고 "devDependencies"에 포함되도록 설치해 줘야 한다. 즉, 'npm install --save-dev electron-rebuild'로 설치해야 한다는 뜻이다.

https://github.com/electron/electron-rebuild

electron/electron-rebuild

 

그러니까 결국 제대로 실행되도록 하려면 아래와 같은 순서로 설치하고 실행을 해 줘야 한다.

(윈도우즈에서는 3번과 같이 실행하면 되지만 다른 플랫폼에서는 다른 형식으로 실행을 해 줘야 하니까 주의하자. 위 링크에 다 있는 내용이다. ^^;)

1. >npm install --save-dev electron-rebuild 2. >npm install serialport 3. >.\node_modules\.bin\electron-rebuild.cmd

 

위 박스 안의 처리는 한 번만 해 주면 된다. 그 다음부터는 'npm start'로 실행만 해 주면 문제 없이 잘 동작한다.

 

끝.