0. 들어가며
Electron은 HTML, CSS 그리고 JavaScript를 이용해 크로스 플랫폼(Windows, Ubuntu, Mac 등) 데스크톱 앱을 만들게 해준다. HTML, CSS 그리고 JavaScript는 웹개발, 프론트엔트 단에 흔히 사용되는 언어이다. 그런데 Electron의 프론트엔드 단(Electron에서는 renderer라 불리는 것 같다.)에서는 웹과 달리 JavaScript 사용시 NodeJS 모듈을 그대로 사용할 수 있다. 가령, 'fs' 모듈을 통해 파일을 읽고 쓰거나, 'net' 모듈을 통해 tcp 통신을 할 수 있다. 오늘은 renderer에서 NodeJS 모듈 중 'os' 모듈을 사용해 봄으로서 모듈 사용 법을 살펴본다.
1. Render에서 OS module
우선 프로젝트 디렉토리를 생성한다. 나는 os_module이라고 만들었다. 그 후 작업 디렉토리를 os_module로 옮긴다.
C:\work\electron (develop)
$ rm os_module -r
C:\work\electron (develop)
$ ls
LICENSE README.md hello_world os_module
C:\work\electron (develop)
$ cd os_module
C:\work\electron\os_module (develop)
$
npm init을 해 package.json을 생성한다.
C:\work\electron\os_module (develop)
$ npm init
{
"name": "os_module",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
main.js를 생성 후 아래와 같이 소스코드를 작성한다. 참고로 Hello, World에 보였던 main.js 내용이 같다.
/* 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을 생성 후 아래와 같이 소스코드를 작성한다. os 모듈을 <script> 태그 안에서 사용하고 있다. 참고로, os.arch()는 CPU 아키텍쳐, os.platform()은 OS의 플랫폼 그리고 os.totalmem은 시스템의 총 메모리를 byte 단위로 보여준다. NodeJS의 OS 모듈을 더 자세히 보고 싶다면, NodeJS Document를 참고하자.
<!-- index.html-->
<html>
<body>
<h1>OS module</h1>
<script>
const os = require('os');
document.write(
`
os.arch(): ${os.arch()}
<br/>
os.platform(): ${os.platform()}
<br/>
os.totalmem(): ${os.totalmem()}
`
);
</script>
</body>
</html>
이렇게 코드를 작성하고 Electron을 실행시키자. 아래와 같이 Renderer에서(웹으로 치면 프론트엔드 단에서) NodeJS의 OS 모듈을 사용해 CPU 아키텍쳐, 플랫폼, 그리고 총 메모리를 출력할 수 있다.
C:\work\electron\os_module (develop) (os_module@0.0.1)
$ electron main.js
2. Renderer에서 npm 라이브러리 사용해 보기
NodeJS에서 제공하는 라이브러리가 아닌 npm 다운받을 수 있는 모듈을 사용해보자. 개인적으로 시간과 관련된 작업을 할 때 npm에서 moment 라이브러리를 즐겨 사용하는데, 이 momoment를 이용해 현재 날짜, 시간을 화면에 출력해보자.
우선, moment 라이브러리를 설치한다.
C:\work\electron\os_module (develop) (os_module@0.0.1)
λ npm install --save moment
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN os_module@0.0.1 No description
npm WARN os_module@0.0.1 No repository field.
+ moment@2.22.2
added 1 package in 1.759s
아까 작성했던 index.html을 아래와 같이 고친다. 위의 소스코드와 차이점은 moment 모듈을 사용해 현재 날짜, 시간을 출력하는 부분을 추가한 것이다.
<!-- index.html-->
<html>
<body>
<h1>OS module</h1>
<script>
const os = require('os');
const moment = require('moment');
document.write(
`
moment().format(): ${moment().format()};
<br/>
os.arch(): ${os.arch()}
<br/>
os.platform(): ${os.platform()}
<br/>
os.totalmem(): ${os.totalmem()}
`
);
</script>
</body>
</html>
elecetron을 실행시키면, 아래 그림과 같이 현재 시간, 날짜가 moment 라이브러리에 의해 출력되는 것을 볼 수 있다.
C:\work\electron\os_module (develop) (os_module@0.0.1)
$ electron main.js
3. 결론
이번 포스팅에서 중요한 점은 단순히 OS, momment 모듈을 사용했다는 것이 아니다. NodeJS의 장점 중 하나인 풍부한 라이브러리 덕분에, Electron으로 데스크 톱 앱을 만들 때 다른 언어, 프레임워크 보다 쉽게 만들 수 있다는 점을 강조하고 싶었다. 다음 번에는 Electron이 어떻게 동작하는지 포스팅 할 예정이다.
4. 소스코드
https://github.com/hgs0426/electron/tree/master/os_module
5. 참고
[1] https://nodejs.org/dist/latest-v8.x/docs/api/os.html
'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, 5 분 만에 'Hello, World' (0) | 2018.10.10 |