[Electron] 도입 회고

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding 
Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.
[출처] https://www.electronjs.org/docs/latest

 

Electron은 내가 2020년 말, 2021년 1분기 부터 사용해온 데스크탑 앱 프레임워크로 나는 이 프레임워크를 윈도우 데스크톱 프로그램, 키오스크 등을 제작하기 위한 프로젝트의 프레임워크로서 도입했다. 당시에는 Node.js 버전만 봐도 Node.js 12가 LTS였고, 관련된 라이브러리들도 Node.js 버전에 종속된 상태로 도입되었다. 도입 당시의 Electron의 버전은 무려 8 버전으로, 지금은 https://www.electronjs.org/blog만 봐도 벌써 25 버전이 출시된 지금 다시 보면 버전 업그레이드가 많이 일어났다고 볼 수 있겠다.

 

처음에는 Electron에 대한 개념이 없는 상태로 시작하다 보니, 이미 개발에 필요한 구성요소를 갖춘 보일러플레이트(boilerplate)를 사용하여 도입해야 비용을 줄일 수 있었다. 대표적으로는 electron forge, electron-react-boilerplate 등이 있었는데, production으로 패키징하면 serialport 호환성 문제가 발생해서 electron-react-boilerplate를 선택했다.

 

나는 HTML 4.01로 Web 개발을 시작했기 때문에, 어떻게 데스크탑 앱을 만드는데 Javascript와 HTML, CSS를 사용하는지 굉장히 의문이 들었다. 학부때는 Java 프로젝트를 하면서 레이아웃 형태만 잡는 용도로 Web 기술을 쓴 적은 있었지만.

 

결과적으로 보일러플레이트를 fork한 뒤, 패키지를 설치하고 시작해보니 크로미움이 뜨고 개발에 필요한 devtools가 순차적으로 뜨는게 아닌가. 그 순간, 나는 새로운 세계를 본 한 사람이 됐다. 크로미움 창에 대한 설정은 javascript를 사용해서 main process에 기재하고, 이전부터 계속했던 react를 기반으로 작성된 html, css, javascript 코드 등은 renderer process에 기재했다.

 

당시에는 context를 격리하지도 않고, node.js 기반 코드들도 renderer에서 직접 call해서 사용하다보니 의존성 문제도 많았고, 심지어 webpack 설정에 이상이 있어서 CRA만 사용했던 신입 개발자는 webpack configuration을 뜯어서 하나씩 고치고 있었다.

 

렌더러에서 사용되는 코드는 디자이너가 없어서 Material-UI(지금은 MUI)와 styled-components를 섞어가며 스타일을 맞췄고, class component에 익숙해져 있었던 개발자는 functional component 기반으로 작업을 해나갔다. 폰트를 직접 import 하지 않고, Web font를 사용해서 패키징 용량도 낮추고 음성 파일도 넣어가면서 프로젝트를 계속 진행했다.

 

문제는 언제나 하드웨어에서 나온다. 나는 serialport를 처음 써봤고, STX, ETX, RS 등의 메시지와 baud rate, stop bit 등 configuration에 대해서도 아는 바가 없었다. 일단 제조사에서 준 스펙 문서 기반으로 맞춰놓고, 어떻게든 오픈소스의 바다를 헤엄치면서 구현했던 기억만 가득하다.

 

맨 바닥부터 하나씩 쌓아올리는 프로젝트, 지금 다시 만들라고 하면 더 잘 만들겠지만 당시 내가 받은 충격은 말도 안되게 컸고 지금 되돌아 봤을 땐 내가 하나씩 exception을 찾고 troubleshooting하면서 debugging하는 과정이 내공을 많이 쌓게 해줬다고 생각한다.