이전에 Windows에서 Electron 설치하기를 진행한데 이어 간단히 Electron을 통해 창을 만들고 index.html을 띄워 보도록 하겠습니다.
이전 포스트
2021.06.16 - [Programming/NodeJS] - Windows 에서 NodeJS + Electron 시작하기
1. 환경 점검
위의 이전 포스트 과정을 모두 거치셔야 합니다.
NodeJS / NPM 그리고 Electron 설치 확인하기
$ node -v
$ npm -v
$ electron -v
2. 기초 파일 구성
프로젝트를 만들 폴더를 하나 만드시고 아래와 같이 main.js / index.html 을 만들도록 합니다.
여기서 main.js 에는 Electron 그러니까 Back End 코드가 그리고 index.html 에는 Electron 이 불러오는 html 코드가 들어가게 됩니다.
3. 간단한 코드 작성
우선 main.js 에는 아래와 같이 코드를 작성합니다.
const { app, BrowserWindow } = require('electron') // Load Electron
function createWindow () { // 창 만들기
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html') // index.html 불러오기
}
app.whenReady().then(() => { // 앱 준비 완료
createWindow() // 창 만들기
})
app.on('window-all-closed', function () { // 모든 창이 닫힐경우
if (process.platform !== 'darwin') app.quit() // 앱 종료
})간단히 주석을 달아 뒀지만 간단한 800 * 600 의 창을 만드는 코드입니다.
그리고 index.html 에는 원하는 코드를 작성해주도록 합니다. 제 경우 아래와 같이 하겠습니다.
<html>
<head>
<style>
.box-main{
font-size:32px;
text-align: center;
font-weight:bold;
margin-top:15%;
}
</style>
</head>
<body>
<div class='box-main'>
Hello! Electron!
</div>
</body>
</html>
4. Electron 실행하기
실행은 간단히 해당 폴더로 이동하여 electron main.js를 실행하시면 됩니다. (* 만약 main.js 가 아닌 index.js로 파일을 만드셨다면 electron . 으로 실행이 가능합니다. )
$ electron . // 혹은 - backend 파일을 index.js 로 만들었을 경우
$ electron main.js
아래는 정상적으로 Electron 파일이 실행된 모습니다.
다음 포스트부터는 본적 격으로 ReactJS 연동 및 LevelDB를 이용한 데이터 저장 방법을 진행해 보도록 하겠습니다.
즐거운 개발되시기 바랍니다.