Electron은 HTML, CSS, Javscript를 사용해 크로스 플랫폼 데스크탑 애플리케이션을 만들기 위해 Github에서 개발한 오픈 소스 라이브러리입니다. Electron은 크로스 플랫폼을 지원하기 위해 Chromium과 Node.js를 1개의 런타임으로 통합했고, Electron을 이용해 작성한 앱은 Mac, Windows, Linux 용으로 패키징할 수 있습니다.
앞서 설명하였듯이 웹 개발자라면 충분히 개발을 시작할 수 있기 때문에 개발에 들어가기 위한 진입장벽이 낮지만, 결과물은 플랫폼과 상관없이 사용이 가능하기 때문에 크로스 플랫폼을 지향하는 많은 데스크탑 어플리케이션이 Electron을 사용하여 앱을 개발하고 있습니다. 대표적인 Electron 앱으로는 Atom, Visual Studio Code, Slack 등이 있으며, 앱을 사용해보신 분이라면 느끼셨겠지만 다른 도구를 이용하여 개발된 여타 다른 앱과 비교하였을 때 어떠한 위화감이나 불편함이 없습니다.
Electron은 개발자를 위한 문서가 상당히 잘되어 있는 프로젝트입니다. Electron 공식 홈에 접속하면 한글화된 화면을 볼 수 있으며, 상단 문서 메뉴를 선택하였을 때에도 한글화된 가이드를 확인할 수 있습니다.
기본적인 Electron 앱을 만들어보기 위하여 개발 환경 설정하기를 확인해보면 Node.js와 텍스트 에디터가 개발 환경을 위한 세팅의 전부임을 알 수 있습니다. Node.js는 아래의 링크를 이용하여 현재 사용하고 있는 os에 맞게 설치하시면 됩니다.
Node.js Download
https://nodejs.org/ko/download/
설치가 완료된 후 커맨드 라인 혹은 터미널에 아래의 명령어를 입력하였을 때 각각 node.js와 npm의 버전이 출력되었다면 정상적으로 설치되었다는 것을 알 수 있습니다.
node -v
npm -v
Node.js가 정상적으로 설치되었다는 것을 확인한 후에는 폴더를 생성해줍니다. 생성 후에는 만들어진 폴더로 이동합니다. 그리고 npm init을 입력하여 package.json 파일을 생성해줍니다. npm init을 입력하게 되면 추가적인 정보를 입력할 수 있는데 이후에도 수정할 수 있기 때문에 우선은 입력하지 않은 상태로 넘어가도록 하겠습니다.
mkdir electron-react-app
cd electron-react-app
npm init
package.json이 생성된 이후에는 파일 내 "main": "index.js"를 "main": "main.js"로 변경해줍니다. 그다음 Electron을 설치해줍니다.
npm install --save-dev electron
Electron이 설치된 후에는 경로에 index.html, main.js 두 파일을 생성해주는데, 생성된 파일은 각각 아래와 같이 수정해줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
const { app, BrowserWindow } = require('electron');
let win;
function createWindow () {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
win.webContents.openDevTools();
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
마지막으로 package.json의 scripts를 아래와 같이 수정해줍니다.
"scripts": {
"start": "electron ."
}
이제 Electron 앱을 띄워볼 수 있는 기본적인 세팅이 완료되었습니다. 현재 상태에서 앱을 띄워보려면 아래의 명령어를 커맨드 라인이나 터미널에 입력합니다.
npm start
정상적으로 세팅되었다면 다음 화면의 앱이 실행됩니다.
다음 포스팅에서는 이어서 React.js를 Electron에 어떻게 적용할 것인지 알아보도록 하겠습니다.
'Javascript > Electron' 카테고리의 다른 글
| Electron + React 데스크탑 앱 개발 (2) (0) | 2020.07.02 |
|---|
