0. 들어가며
Javascript라는 하나의 언어로 front end뿐만 아니라 back end에서도 비교적 쉽게 프로그래밍이 가능하다. 뿐만 아니라 Electron을 이용하면 데스크톱 앱도 만들 수 있다. 실제로, Slack desktop app, Visual Studio Code, Discord 등이 Electron을 이용해 만들어 졌다고한다. 이처럼, Javascript는 다방면에서 활용될 수 있기 때문에 최근 인기를 많이 얻고 있는 언어라고 생각한다. 앞으로 수준이 낮고 짧은 프로젝트가 될 것 이지만, Electron이 어떤 녀석인지 학습해 보고자 여기에 Electron과 관련된 글을 당분간 포스팅 할 예정이다.
오늘은 Electron을 설치해보고, 간단히 'Hello, World'를 출력해본다.
1. 설치하기
우선 NodeJS와 npm이 설치돼있어야 한다. 이 둘이 정상적으로 설치됐다면 커맨드 창에 다음 명령어를 입력하면, 다음과 같이 버전이 확인된다.
$ node -v
v8.9.3
$ npm -v
5.5.1그러면 Electron을 설치할 준비가 된 것이다. 다음 명령어를 입력해 Electron을 설치하자. 이때, -g 옵션을 줘 전역 설치를 해주자.
$ npm install -g electron-prebuilt
설치 후, 설치확인을 다음 명령어를 입력해 확인한다.
$ electron --version
v1.4.13
이처럼 Electron을 설치하는 것은 매우 쉽다. 'Hello, World'를 출력하는 것도 매우 쉬울 것이다.
2. Hello, World
우선 project 디렉토리를 하나 생성하자. 개인적으로 '../path/to/electron/hello_world' 와 같이 project 디렉토리를 생성했다. 항상 npm을 통해 project를 진행한다면 package.json이 반드시 필요하다. package.json에는 프로젝트 버전, 의존성, 실행 파일 등등... 저장된다. 따라서 npm을 통해 project를 한다면 습관적으로 npm init을 해주는 것이 좋다.
$ npm init
$ cat package.json
{
"name": "helloWorld",
"version": "0.0.1",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
Electron은 electron을 구동시킬 때 실행되는 main process와 각각의 BrowserWindow 모듈에 의해 생성되는 renderer process 를 갖는다. 여기에 대한한 개념은 후에 다시 포스팅 하겠다. 여튼 main process, renderer process 두 가지가 있음을 알고 넘어가자.
프로젝트 디렉토리에서 main.js를 생성하고 아래와 같이 코드를 입력한다. main.js는 electron에 의해 실행될 파일이다. 아래 소스를 보면 알겠지만 BrowserWindow 모듈(클래스)은 창을 생성할 때 디자인 리소스를 어디서 가져오는지, 창을 얼마나 크게 만들 것인지 등 창에 대한 역할을 할 것으로 예상된다.
/* main.js */
const {app, BrowserWindow} = require('electron');
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600});
/* load local .html file*/
win.loadURL(`file://${__dirname}/index.html`);
}
app.on('ready', createWindow);
또한, index.html을 생성하고 아래와 같이 코드를 입력한다. 위 소스코드를 보면 알겠지만 index.html은 app이 실행될 때, BrowserWindow 모듈에 의해 제공되는 리소스로 창의 디자인이라고 볼 수 있다.
<!-- index.html-->
<html>
<body>
<h1>Hello, World</h1>
</body>
</html>
프로젝트 디렉토리에서 다음 명령어를 커맨드 창에 입력하면, 'Hello, World'라는 글자가 있는 창이 뜬다.
$ electron ./main.js
3. 결론
이처럼 Electron을 통해 쉽고 간단히 데스크톱 앱에 'Hello, World'를 출력해봤다. 개인적으로 웹에 익숙하고, 창을 디자인 하는 부분을 HTML로 꾸밀 수 있기 때문에 데스트톱 앱을 디자인하는 것이 안드로이드, C++ GUI 등에 비해 수월하다고 느껴진다. 다음 포스팅에서는 Node modules을 win object에서 사용해보도록 하자.
4. 소스코드
이번 포스팅에 대한 프로젝트 소스코드를 첨부.
https://github.com/hgs0426/electron/tree/master/hello_world
5. 참고
[1] https://www.tutorialspoint.com/electron/
'Electron' 카테고리의 다른 글
| Electron, 간단한 메모장(simple notepad) 만들기 (0) | 2019.01.06 |
|---|---|
| Electron, 시스템 다이얼로그(System Dialog) (0) | 2018.12.23 |
| Electron, 애플리케이션 메뉴(Application Menu) (0) | 2018.10.28 |
| Electron, Main과 Renderer 프로세스 그리고 IPC (0) | 2018.10.21 |
| Electron, NodeJS Module 과 NPM Libraries 사용해보기 (0) | 2018.10.15 |