웹 기술을 이용하여 데스크탑 어플리케이션을 제작할 수 있는 크로스 플랫폼 프레임워크로 GitHub가 관리하고 있다.
웹 기술로 데스크탑 어플리케이션을 제작할 수 있는 이유는 electron으로 빌드된 프로그램은 Chromium 웹팩 기반의 앱, 즉 하나의 새로운 브라우저가 만들어지고 그 위에 웹으로 작성된 페이지가 출력된다.
그래서 크롬 브라우저가 실행되는 환경이라면 electron으로 빌드된 앱도 실행이 가능하다.
electronjs.org에서 제공되는 Demo 앱을 실행하면 아래와 같이 실행이 된다.
Chromium기반의 웹팩을 사용있다는 것을 방증하듯이 electron으로 제작된 앱은 Ctrl + Shift + I 조합키를 누르면 개발자 도구 창이 나타난다.
electron을 사용하기 위한 환경 설정과 프로젝트 생성 방법은 아래와 같다.
(IDE는 Visual Studio Code를 사용한다. 이하 vscode)
Node.js를 설치하여 Windows에서 NPM이 실행가능한 환경을 구성해준다. 버전은 Nodejs.org에 접속하면 나오는 LTS버전을 따른다.
Node.js설치가 끝나면 프로젝트로 사용할 폴더를 생성한다.
명령 프롬프트를 관리자 권한으로 열고 cd명령어를 사용해 프로젝트가 생성된 폴더 경로로 이동해준다.
만약 프로젝트로 사용할 폴더의 위치가 C:\User\Administrator\Desktop 경로 안에 있는 electron 폴더라면
명령 프롬프트 창을 열고 cd C:\User\Administrator\Desktop\electron 를 입력한다.
이후 npm install electron --save-dev 입력하여 electron을 설치한다.
index.html은 Electron 앱을 실행했을 때 맨 처음 나타나는 웹페이지를 출력하는 역할을 한다.