윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 1

2020/04/16 - [Development] - 윈도우즈에서 일렉트론-뷰 데스크탑 어플리케이션 개발하기 1

2020/04/20 - [Development] - 윈도우즈에서 일렉트론-뷰 데스크탑 어플리케이션 개발하기 2

 

2020/04/28 - [Development] - 윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 1

2020/04/29 - [Development] - 윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 2

2020/04/29 - [Development] - 윈도우즈에서 일렉트론 데스크탑 어플리케이션 개발하기 3

 

 얼마전에 정말 아무런 백그라운드도 없이 당차게 일렉트론-뷰(electron-vue)에 도전했다가 진짜 몰라도 너무 모르고 있다는 사실을 깨닫고 다시 처음부터 순수 일렉트론 앱부터 차근차근(하지만 빠르게...ㅠㅠ) 익혀야 할 필요성을 느껴서 개발 과정을 정리해 보고자 한다.

 

1. Node.js 설치

기본적으로 Node.js는 설치되어 있어야 한다. 때문에 아래 사이트에서 사용하고 있는 OS에 맞는 설치파일을 받아 인스톨하면 끝. (설치과정은 어려울 것 없으니 생략~)

https://nodejs.org/ko/

Node.js

 

2. 예제 다운로드

https://github.com/electron/electron-quick-start

electron/electron-quick-start

'git clone'으로 다운로드하면 된다.

일단 코드를 받았으니 여기서부터는 '비주얼 스튜디오 코드(Visual Studio Code)'를 사용하도록 하자.

Terminal > New Terminal에서 새로운 터미널을 열고, 'npm install'로 필요한 모듈들을 설치해 주고 난 다음 'npm start'로 실행해 보면,

바로 윈도우가 하나 생기면서 앱이 실행되는 모습을 볼 수 있다!!

 

개발을 하는 동안에는 로그메시지나 각 종 에러들도 확인을 해야 하니까 '개발자 도구(DevTools)'를 활성화 시켜준다.

main.js에서 'mainWindow.webContents.openDevTools()'를 주석해제 하고, 저장한 다음 열렸던 앱을 닫고 다시 'npm start' 하면,

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()    // 이 부분 주석 해제
}

개발자 도구(DevTools) 확인.

 

3. 공식 참조 문서

https://www.electronjs.org/docs/tutorial/first-app#%EC%98%88%EC%A0%9C

첫 번째 Electron 앱 만들기 | Electron

허투루 넘길 내용이 아니라는 것은 분명하다. 가장 기본이 되는 내용들이라 결국은 여러 차례 다시 찾게 되니 최소 한 번 쯤은 정독을 하는 것이 좋겠다.