Electron 시작하기

Electron은 JavaScript, HTML, CSS를 사용하여 데스크톱 애플리케이션을 빌드하기 위한 프레임워크이다.

※ Windows WSL 사용에 주의하자. 애플리케이션을 실행할 때 문제가 발생할 수 있다.

https://www.electronjs.org/docs/latest

Introduction | Electron

 

설치

Electron 앱은 npm을 사용하고 package.json 파일을 진입점으로 사용한다.

mkdir my-electron-app && cd my-electron-app
npm init

my-electron-app 폴더를 만들고 그 안에 npm 패키지를 초기화하는 것으로 시작한다.

 

프로덕션에 필요하지 않은 Electron 외부 개발 전용 패키지를 앱은 devDependencies에 설치한다.

npm install electron --save-dev

 

실행

package.json에서 정의한 main 스크립트는 모든 Electron 애플리케이션의 진입점이다.

main.js 프로젝트의 루트 폴더에 한 줄의 코드로 파일을 만들고 프로세스 진입점이 올바르게 구성되었는지 확인한다.

// main.js
console.log('Hello from Electron!')

Electron의 메인 프로세스는 Node.js 런타임이기 때문에 임의의 Node.js 코드를 명령어로 실행할 수 있다.

이 스크립트를 실행하려면 package.json 필드에 "start": "electron ." 명령어를 추가 한다 .

start 명령어는 Electron 실행 파일에 현재 디렉터리에서 main 스크립트를 찾아서 개발 모드로 실행하라고 지시한다.

npm run start