Electron 이란?
html, css, javascript로 데스크톱 앱을 만드는 프레임워크이다.
즉 웹 개발자들이 응용플로그램도 개발 할 수 있게 해주는 프레임워크이며 출시된지는 꽤 오래 되었으나, 개발 공부를 시작한지 얼마 안되었거나, 관련 업무가 없었다면 아직 모를 수 있는 부분이다.
물론 예전에는 nwjs라는 툴을 사용 했었지만 업데이트나 인스톨쉴드를 따로 구비해서 배포 했어야 하는 불편함이 있기도 했다.
맥, 윈도우, 리눅스를 지원하는 서비스를 만들 예정이라면 고려해볼 대상이다.
Electron으로 만들어진 어플리케이션
뭐 Electron으로 만들어진 어플리케이션이 위의 어플리케이션이 끝은 아니지만, Electron사이트 홈에 소개 되어질 정도로 유명한 서비스들이기에 소개 해보았다.
시작하기!
당연 노드는 설치 되어있다고 생각 하고 진행하겠다. cmd창이나 terminal에 아래의 명령어를 입력 합시다.
mkdir my-electron-app && cd my-electron-app
npm init -y
npm install --save-dev electron
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^18.0.1"
}
}
scripts만 수정 하면 되지 확인 하도록 하자.
index.js, index.html 파일을 추가 하도록 하자.
이렇게 간단하게 웹기술로 데스크톱 응용프로그램을 만들 수 있습니다.
참고록 위의 파일에 main속성을 index.js로 하여서 index.js일뿐 main속성을 수정 하면 해당 파일 명칭으로 맞추어주면 된다.
이번 포스트에서는 그저 응용프로그램을 켜보는 것 만을 목표로 하고 있기에 아래의 코드로 붙어 넣어보자.
index.js
const {app, BrowserWindow} = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
app 객체로 응용프로그램의 라이프사이클을 제어 할 수 있습니다.
whenReady 함수는 promise를 리턴하며, 일렉트론이 초기화가 끝나면 resolve를 시켜줍니다.
BrowserWindos 객체는 browser window를 생성하거나 제어가 가능 합니다. browser window라는 말이 생소 하시다면 처음에는 window.open 혹은 iframe태그로 생각 하셔도 사용하는데에는 무리가 없습니다.
index.html
<html>
<head></head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
자 이제 실행 시켜봅시다!
cmd창이나 terminal에 아래의 명령어를 입력 합시다.
npm run start
댓글
댓글 쓰기