일렉트론(electron)을 시작하자

세상 참 좋아졌다.

맥, 윈도우 등의 크로스플랫폼 데스크탑 어플리케이션을 HTML, CSS, JS를 통해 만들 수 있다니...

일렉트론(electron) 넌 도대체 뭐니?

∴ 웹개발에서 사용하는 언어(HTML5, CSS, Javascript, node.js)를 사용하여 데스크톱 앱을 제작할 수 있는 프레임 워크 이다.

∴ 화면단UI는 웹개발처럼 HTML5, CSS, Javascript로 구성하며, 코어는 Javascript를 통하여 네이티브 API를 요청할 수 있다.

∴ 단 하나의 개발로 윈도우 위에서도 구동할 수 있고, 맥에서도 구동할 수 있으며, 리눅스에서도 구동할 수 있다.

놀랍다.

설치 방법

npm install -g electron

설치 완료

아래와 같이 결과가 출력된다면 설치가 완료된 것이다.

설치하는데 29초 정도 소요되었다.

우리의 첫 프로젝트, Hello World 출력

특정 폴더를 만들고 그 폴더 안에 package.json이라는 파일을 만들자.

그리고 package.json 파일안에 아래와 같이 코드를 작성하여 저장하자.

{
	"name" : "hello-world",
	"version" : "1.0.0.",
	"main" : "main.js"
}

main.js

'use strict';

const electron = require('electron');           // 일렉트론 모듈 읽음
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;   //BrowserWindow 클래스의 참조

let mainWindow = null;

// 화면이 모두 종료되면 애플리케이션을 곧바로 종료
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

// app이 준비가 되면 이벤트를 실행
app.on('ready', () => {
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(`file://${__dirname}/main.html`);    // main.html을 읽어들임
  mainWindow.on('closed', () => { mainWindow = null; });  // application화면이 종료되면 mainWindow를 null로 교체
});

현재 폴더 상태

main.html

아래와 같이 코드를 삽입하고 저장한다.

<!doctype>
<html>
  <head>
    <title>Hello World</title>
   
    <script>
      function helloWord() {
        alert('Hello World');
      }
    </script>
  </head>
  <body>
    <button onclick="helloWord()">hello word</button>
  </body>
</html>