Electron이 Web Developer in 2019에서 노란색으로 변했습니다.

프런트 엔드 엔지니어가 데스크톱 앱 개발에 기여하기 쉬워졌습니다. 그건 그렇고, 노란색은 추천이라는 의미입니다.

Web Developer in 2019 (FrontEnd 부분 발췌)

Electron이란?

Build cross platform desktop apps with JavaScript, HTML, and CSS

그리고 공식적으로 쓰는대로,

Windows, Mac 또는 Linux에서 실행되는 응용 프로그램을 만들 수 있습니다.

언어는 JavaScript, HTML, 그리고 CSS를 사용하여 개발한다

프런트 엔드 엔지니어가 매우 쉽게 개발할 수 있는 프레임워크입니다.
평상시부터 개발자가 자주 사용하는 앱의 VS Code, Slack, 그리고 Discord도 Electron으로 만들어지고 있습니다.

Electron 사용하기

실제로 Electron을 사용하여 개발 ~ 실행을 해 봅시다.

개발 환경 구축

공식적으로 작성된 것처럼 가장 쉽고 최소한의 앱을 가져와 시작합니다.
주의점으로서 git 와 npm 가 단말에 들어가 있지 않으면 움직이지 않으므로, 사전에 인스톨하고 나서 실행해 주세요.

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

실행하면 이런 느낌의 앱이 일어납니다.

패키지, 실행

사용자가 실행할 수 있는 패키지를 만듭니다. 이번에는 설치 프로그램 등을 사용하지 않는 것(.exe/.app)을 만들어 갑니다.
먼저 Electron 패키지에 필요한 패키지를 설치합니다.

# For use from the CLI
npm install electron-packager -g

그런 다음 패키징 명령을 실행합니다. Windows 및 Mac 환경에서 각각 실행합니다.

# Basic form: electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

# Windows
electron-packager . electron-quick-start --platform=win32 --arch=all

# Mac
electron-packager . electron-quick-start --platform=darwin --arch=all

응용 프로그램은 이런 식으로 패키징됩니다.



응용 프로그램을 실행해 봅니다. 무사히 실행할 수 있었습니다. (왠지 메뉴가 사라졌지만)

보충

패키징 명령은 때때로 두드리는 것이 아니라 package.json에 넣어 저장하면 편리합니다.
자동 업데이트 기능과 설치 프로그램을 만드는 방법은 공식 문서에 기록되어 있습니다.
배포한 앱의 소스 코드를 보는 것은 매우 간단하기 때문에, 볼 수 있으면 곤란한 부분은 BackEnd 에 처리를 위양하거나, c++ 로 라이브러리를 만들어 Electron 로부터 호출할 필요가 있습니다.

Electron의 이점

자바 스크립트와 HTML이라는 익숙한 언어로 개발할 수 있으므로 핵심 부분을 개발하는 데 시간이 걸립니다.

데스크톱 앱의 장점을 그대로 활용

독자적인 메뉴나 단축키는 Electron API 로 간단하게 만들 수 있다

웹 앱에서 데스크톱 앱을 쉽게 만들 수 있습니다.

프런트에 JavaScript 이외의 언어의 프레임 워크를 사용하고있는 경우는 조금 어렵습니다.

예를 들어 C# (ASP.NET MVC) 또는 PHP (Laravel)는 전용 기법을 방해합니다.

JavaScript 프레임 워크를 사용할 수 있습니다.

React 라든지 Vue는 물론, Web Developer in 2019의 FrontEnd에 쓰여있는 것은 똑같이 사용할 수 있다고 생각합니다

참고문헌

Electron

Roadmap to becoming a web developer in 2019

Electron 의 일이 좀 더 자세하게 써 있으므로, 설명을 보고 싶은 사람은 아래와 같이 봐 주세요.

h tps:// 퀵했다. 작은 m/마도/있어 MS/6 키 4f46c1458 그림 89C4cfc