Framework/Electron

간단히 Electron 시작하기

Logger.one 2021. 6. 18. 17:15
반응형

이전에 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를 이용한 데이터 저장 방법을 진행해 보도록 하겠습니다.

 

즐거운 개발되시기 바랍니다.

반응형

'Framework > Electron' 카테고리의 다른 글

간단히 Electron 시작하기  (0) 2021.06.18
1