요즘 엄청 뜨고 있는 Electron! Whatsapp, Slack, 옵시디언, 노션, Github Desktop등 다양하고 유명한 앱 개발에 사용되고 있다. 졸업 프로젝트를 통해 웹 앱 개발에 도전하게 되었는데, 현직자 멘토링을 통해 Electron이 우리의 니즈에 잘 맞아 Electron을 Framework로 사용하게 되었다. 이 포스트에서는 Electron이 무엇인지, 그리고 환경 세팅을 어떻게 하는 지 알아볼 것이다.
Electron 이란?
공식 홈페이지에 나와있는 설명은 다음과 같다.
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.
요약하자면 JavaScript, HTML, 그리고 CSS를 이용하여 데스크탑 앱을 개발할 수 있는 Node.js 기반 크로스 플랫폼 오픈소스 프레임 워크라는 것이다.
Electron 환경 설정하기
Electron 홈페이지에 나와있는 Turtorial을 따라하며 시작해보겠다.
Prerequisites
Electron은 Node.js 환경에서 실행되고 Web app을 다루기 때문에, 시작전에 node.js에 대한 지식과 웹 앱에 대한 기본적인 지식이 필요하다.
또한, node.js와 npm 패키지의 설치가 필요하다.
컴퓨터의 pre-built installer를 통해 설치하면 된다. Mac Os의 경우 Homebrew나 NVM을 서치하는 것을 권장한다.
npm project 시작하기
mkdir my-electron-app && cd my-electron-app
npm initmy-electron-app 이라는 이름의 디렉토리를 만들고 시작한다.
앱의 devDependencies에 Electron을 설치한다.
npm install electron --save-devElectron app 실행하기
간단한 코드로 앱을 실행해 보겠다.
먼저 main.js라는 이름의 파일을 root 폴더에 생성한다. 그 후 다음과 같은 한 줄의 코드를 작성한다.
console.log('Hello from Electron 👋')package.json에 다음과 같은 코드를 추가한다.
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
}주의할 점은 electron 폴더 안의 package.json이 아닌 바깥에 있는 코드에 추가해야 한다는 점이다. main은 이 프로젝트의 entry point가 된다.
그 후 터미널에 다음 커맨드를 입력한다.
npm run start정상적으로 실행된다면 터미널에 'Hello from Electron 👋'이 출력될 것이다. 그럼 가장 간단한 electron 실행이 완료된다.
BrowserWindow로 웹페이지 로드하기
루트 폴더에 index.html을 생성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>👋</p>
</body>
</html>
그리고 아까 만들어 놓았던 main.js의 내용을 다음 코드로 고쳐준다.
const { app, BrowserWindow } = require('electron')
//app은 어플리케이션의 lifecycle을 관리한다.
BrowserWindow는 app window를 생성하고 관리한다.
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
//app이 준비가 되었을 때 함수를 호출한다.
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})Windows와 Linux에서는 윈도우가 종료되면 앱도 종료된다. Electron 앱에서 이것을 구현하려면 다음과 같은 코드를 추가하면 된다.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})반면에 macOs에서는 윈도우가 열려있지 않을 때도 앱을 실행하므로 앱이 준비가 되었을 때 윈도우를 열어줘야 한다. 따라서 다음과 같은 코드를 추가한다.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})npm run start 커맨드를 실행하면 실행화면은 다음과 같다.
이제 JavaScript를 통해 개발한 코드를 바탕으로 손쉽게 데스크탑 앱을 만들 수 있다.
