Electron(일렉트론) React(리액트) ERB로 데스크톱 앱 만들기

https://www.electronjs.org/

Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.

 

웹 프로그래밍 기술을 사용하여 앱을 개발하기 좋은 시대가 되었습니다.

 

글쓴이는 C++ 프로그래머이지만, 웹 개발 환경이 너무 편리해서 전문 분야 외에서는 웹 기반 기술을 주로 사용하는 것 같습니다.

 

소개하려는 Electron도 Node.js, Javascript, HTML, CSS/SCSS, ... 등 대부분 웹에서 널리 쓰이는 기술들을 기반으로 멀티플랫폼(윈도우,리눅스,맥) Desktop Application을 개발할 수 있습니다.

 

Electron은 Chromium을 베이스로, 뷰 렌더링 부분을 쌩 HTML,CSS으로 구현할 수도 있고, 또는 React, Vue.js 등의 라이브러리를 사용할 수도 있습니다.

 

프로그래밍 언어는 Javascript, Typescript 등을 사용할 수 있습니다.

 

즉, 웹을 개발하듯이 프론트엔드의 요소를 그대로 사용하면서 데스크톱 앱을 개발할 수 있습니다.

 

다만 장점이자 단점인 Node.js package 추가 등 필요한 환경을 세팅하는 것이 골치가 아픈데요, 다행이도 Boilerplate(보일러플레이트)라는 개발 환경을 미리 구축해둔 프로젝트가 Github에 공유되고 있습니다.

(Boilerplate는 빠른 개발을 위해 환경을 미리 세팅해둔 것으로, 다른 곳에서도 이 용어로 많이 쓰이고 있습니다.)

 

https://github.com/electron-react-boilerplate/electron-react-boilerplate

GitHub - electron-react-boilerplate/electron-react-boilerplate: A Foundation for Scalable Cross-Platform Apps

 

이 프로젝트는 Electron과 React를 Boilerplate로 구성했다고 해서 ERB라고 불리우기도 합니다.

 

프로젝트를 시작하기 전에, 다음 사항들이 설치되어 있어야 합니다.

• Node.js
• Git

 

프로젝트를 다운받아서 시작해봅니다.

$ git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git <your-project-name>

git clone으로 프로젝트를 pull합니다. <your-project-name>은 적절히 변경합니다.

 

$ cd <your-project-name>
$ npm install

다운로드가 끝나면 해당 디렉토리로 이동하고 npm install로 package들을 설치합니다.

 

$ npm start

npm start로 실행합니다.

 

끝났습니다.

 

 

현재 플랫폼 운영체제에서 빌드는 아래와 같이 실행합니다.

$ npm run package

실행 후 빌드 파일을 release/build/ 디렉토리에서 확인할 수 있습니다.