Electron은 Chromium과 Node.js를 기반으로 html, css, javascript를 이용하여 Windows, Mac, Linux 등 데스크탑 어플리케이션을 만들 수 있게 해주는 크로스 플랫폼 입니다. node.js를 이용해 브라우저라는 틀 밖으로 나온 javascript를 이용하여, 편리하게 데스크탑 어플리케이션을 만들 수 있습니다.
우리가 많이 알고있는 Slack과 Atom, 그리고 VS code 또한 바로 이 Electron을 이용해서 개발되었습니다! 정말 javascript의 활용성을 갈수록 증가하는 것 같습니다.
Electron은 어플리케이션의 윈도우와 기능적인 부분을 담당하는 Main process와 윈도우에 정보를 표시하는 Renderer process로 이루어져 있습니다. back-end와 front-end 정도로 생각하면 편할것 같습니다.
자 그러면 모든 첫걸음의 시작인 'Hello World'를 Electron을 이용해서 화면에 띄워봅시다.
본 글에서는 리액트 설치와 관련된 부분은 다루지 않습니다. 리액트 설치와 기초적인 내용은 미리 알고있다는 가정하에 진행하겠습니다.
우선 일렉트론을 설치해봅시다.
npm을 이용해서 간단하게 설치해봅니다.
$ npm install electronElectron 설치가 완료되었다면, 이제 Main.js파일을 하나 생성해줍니다. 저는 임시로 프로젝트의 /src라는 경로 밑에 만들어 두겠습니다.
Main.js
이제 main.js의 코드를 작성해 보겠습니다.
main.js의 코드를 다음과 같이 작성해 줍니다.
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800
});
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/../src/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);
}
app.on('ready', createWindow)자 그럼 하나씩 무엇을 의미하는지 뜯어볼까요?
const { app, BrowserWindow } = require('electron'); // 1
const path = require('path'); // 2
const url = require('url'); // 31을 보면 app과 BrowserWindow라는 객체를 electron으로 부터 받아옵니다.
app은 현재 작동하는 어플리케이션의 이벤트 라이프 사이클을 담당합니다.
Control your application's event lifecycle.
공식 사이트에도 위와 같이 명시가 되어있습니다.
BrowserWidnow를 어플리케이션의 윈도우(창)을 담당하는 객체입니다. 어플리케이션을 작동시킨다고 화면에 뚝딱 표시되는게 아니라, 이 BrowserWindow 객체를 이용해 화면에 윈도우(창)을 표시해줍니다.
자 2,3은 대부분 아시겠지만, 파일의 경로를 관리하게 도와주는 path 모듈과 url 정보를 관리하게 도와주는 url 모듈을 가져왔습니다.
나머지 부분을 한번에 살펴보겠습니다.
let mainWindow; // 1
function createWindow() {
mainWindow = new BrowserWindow({ // 2
width: 1200,
height: 800
});
const startUrl = process.env.ELECTRON_START_URL || url.format({ //3
pathname: path.join(__dirname, '/../src/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl); //4
}
app.on('ready', createWindow) //5자 진도를 조금 빨리 나가보겠습니다. 위의 코드를 보시면 대충 어떤 작업을 하는지 감이 오시나요?
1의 코드는 hello world를 띄울 윈도우(창)을 담기위해 변수를 선언해주었습니다.
2의 코드를 살펴보시면 어떤 동작을 하는지 바로 감이 오실거라고 생각합니다. 1에서 만든 변수에 BrowserWindow를 이용해 1200*800크기의 화면을 할당해주었습니다.
3의 코드를 살펴보겠습니다. 3의 코드를 살펴보면 startUrl이라는 변수에 무언가 url을 담고 있는것 같습니다. startUrl은 mainWindow에 실제 표시할 화면이 무엇인지 알려주기 위해 url을 할당했습니다. 우리는 리액트를 이용해 화면을 표시할 것이기 때문에 리액트의 화면이 표시될 url을 할당하였고, 만약 등록된 url 환경변수가 없다면, src라는 폴더에 index.html이 표시되게 했습니다.
4는 3에서 선언한 startUrl을 실제로 불러오는 작업을 합니다.
5번에서는 1~4를 통해 만든 어플리케이션을 실행시키는 코드입니다.
app은 어플리케이션의 이벤트 라이프사이클을 관리한다고 했습니다. 'ready'이벤트는 어플리케이션을 실행할 준비가 다 되었을때 발생하는 이벤드 입니다. 5번의 코드를 해석해보면, 현재 어플리케이션이 무엇인가를 실행할 준비가 되면 1~4의 코드를 실행해 화면에 무엇인가를 표시하는 동작을 하게됩니다.
React - app.js
자! main.js에서 어플리케이션의 기능적인 부분을 작성했으니 이제 화면에 hello world를 표시해볼까요?
리액트 코드와 함께 서로가 잘 인식하도록 package.json에서 약간의 셋팅까지 해보도록 하겠습니다.
바로 리액트 코드를 보시죠!
import React from 'react';
import './App.css';
const App = () => {
return (
<div className="App">
Hello World!
</div>
);
}
export default App;예제 코드를 작성해 보았는데요. 사실 너무나도 간단해서 설명드릴 내용이 없는것 같습니다...하하
리액트에 관해 알아볼수도 있지만 Electron을 알아보는것이 본 주제이니 리액트에 관련된 설명은 생략하도록 하겠습니다! (너무 불친절한가요...? 원래 강하게 크는겁니다!! 죄송합니다.. 리액트에 관해서는 저보다 훨씬 자세하고 친절하게 설명해주는 글들이 많으니 리액트와 관련된 부분은 참고 바랍니다..ㅎ)
그럼 이제 Electron을 실행시키기 전에 Electron이 리액트를 잘 인식하기 위해 package.json에서 약간의 설정을 해볼까요?
"main": "src/Main.js",
"scripts": {
"react-start": "BROWSER=none npm start",
"electron-start": "ELECTRON_START_URL=http://localhost:3000 electron .",
},리액트는 html과 달리 명령어를 통해 실행을 시켜줘야 합니다. 리액트를 실행시키면 기본적으로 브라우저에 표시가 되는데 우리는 electron 윈도우에 표시할 것이기 때문에 BROWSER=none 이라는 속성값을 부여해 브라우저에 표시되지 않게 실행을 시켰습니다.
리액트를 실행했다면, 이제 일렉트론도 실행을 해주면 되는데요. 아까 리액트의 경로를 통해 mainWindow에 화면을 표시하도록 코드를 작성했기 때문에 리액트 실행 경로와 함께 electron . 명령어를 이용해서 electron을 실행시키겠습니다. 여러분 저기 . 빼먹지 마세요!!
이렇게 일렉트론을 실행시키면 main을 찾아 실행하게되고, src/Main.js를 찾아 코드를 실행하게 됩니다.
짜잔! 뭔가 여백의 미를 한껏 뽐내는 Hello world 어플리케이션이 잘 표시되는것을 볼 수 있습니다!
Electron도 Hello World 부터! 이제 조금씩 살을 붙여 자신의 어플리케이션을 만들면 좋을것 같습니다!!
잘못된 정보가 있다면 태클 환영합니다!
이미지 출처
