[electron 02] electron 개발 문서 무조건 따라해 봅시다.

프로그램 개발에 하는 데 있어서 아무리 간단한 문서라도 개발업체에서 제공하는 개발 Docs는 상당히 중요하다고 생각합니다. 관련된 내용들이야 구글링 하다 보면 많은 문서들을 확인할 수 있지만 그 모든 내용들이 기본적으로 개발사에서 제공해주는 Docs 또는 API에서 사용된 샘플 코드에 기본하고 있습니다.

Electron 제공하는 개발 문서

Electron Docs Link

Introduction | Electron

한국어

Electron

 

일렉트론 Docs

 

 

일렉트론 홈페이지의 Docs > Get Started > Introduction 을 보면 일렉트론을 구현하는 몇 가지 문서들이 보이네요

main.js, preload.js, index.html  세가지 파일로 기본 화면을 구현할 수 있는 것 같습니다.

 

electron 예제 문서

 

main.js 문서는 확장자가 js 인것을 보니 자바스크립트(javascript)라는 문서 같습니다. 어떤 기능을 하는지 대충 살펴보겠습니다.

 

• main.js  문서 내용을 보면 createWindow() {}라는 함수가 정의되어 있는데 witdth, height 가 있는 것을 보니 대충 윈도 창 크기를 정의해서 열어주는 기능을 하는 것 같습니다. 함수 하단에는 win.loadFile('index.html')로 창을 열어서 index.html 페이지를 보여주라는 내용 같습니다.

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

• preload.js 문서 역시 자바스크립트 문서인 것 같습니다. window.addEventListener  의 DOMContentLoaded 를 보니 대충 html 페이지가 로드되면 무슨 이벤트를 실행하라는 내용인것 같습니다.

window.addEventListener('DOMContentLoaded', () => {
	
    html 문서가 열리면 실행할 무엇인가를 지정함..
	
});

• index.html 은 인터넷의 기본이 되는 웹 문서인것 같습니다. 타이틀로  모든 프로그램 언어의 시작을 알리는 Hellow, World라는 타이틀 보이고 있습니다. 제목 태그 <h1>으로도 굵게 Hellow, World라고 써주었네요.  It's using Node.js라고 쓰여있고  id="node-version",  id="chrome-version", id="electron-version"의 span 태그들이 있는데 이곳이 Node.js를 이용해서 노드의 버전, 크롬 버전, 일렉트론 버전을 표시하겠다는 것 같습니다.

<title>Hello, World!</title>
 ...   
<h1>Hello, World!</h1>
<p>
 It's using Node.js 
  <span id="node-version"></span>, 
 Chromium <span id="chrome-version"></span> 
 
 and Electron 
 <span id="electron-version"></span>.
</p>
....

대충 Introduction (소개)를 살펴보았으니 이젠 일렉트론을 어떻게 시작하는지 Quick Start 영역으로 넘어가 보겠습니다.

일렉트론을 시작해 봅시다.

일렉트론 하니까 전자기타가 생각나네요. 하하하

일렉트론을 사용하기 위해서는 전제 조건으로 node.js가 필요하다고 합니다. 처음에도 뭔지는 모르겠지만 node.js 란 단어가 자주 보이곤 했는데 드디어 본색을 드러내는군요. 그렇죠 어떻게 javascript, css, html 만으로 데스크톱 애블리케이션을 만들겠습니까. 일단 여기가지 와봤으니 설치는 해보겠습니다.

 

• 터미널 창을 열고 node -v, npm -v라고 적어보라는군요 

터미널 프로그램의 실행은 윈도의 검색에서 cmd를 검색하시면 시커면 프로그램 하나가 열리는데 그곳에 node -v 또는 npm -v을

 

노드버전정보와 npm버전 정보

해당 명령을 실행하지 못한다면 node.js라는javascript 런타임 환경이 설치되지 않은 것입니다.  nodejs에 방문하셔서 Nodejs를 설치하여 주시면 됩니다.

 

 

반응형

 

일렉트론 Hello, World! 애플리케이션 만들기

일렉트론 개발 폴더를 만드신 후 cmd 프로그램에서 아래의 npm 명령을 실행하여 주십시오  본인은 C드라이브 밑에 바로 Dev_Data라는 폴더를 만들어서 그 폴더 안에서 테스트 작업을 진행 중에 있습니다.

 

npm 명령 실행

mkdir my-electron-app && cd my-electron-app
npm init

mkdir은 도스 명령어로 폴더를 만들라는 명령입니다.

my-electron-app이라는 폴더를 만들라는 것입니다

그리고 && 다음 문장은  my-electron-app 폴더로 이동하라는 명령입니다.( cd는 change directory라는 뚯일까요?)

my-electron-app 폴더로 이동한 다음에  npm init이라는 명령어를 실행하라고 합니다.

 

• npm init을 실행합니다.

npm init 실행

맨 위의 노란 형광팬 색 부분을 보면 개인적으로 개발 작업을 모아둘 Dev_data의 디렉터리 (폴더)를 만들고 Dev_data 폴더 안에서 mkdir my-electron-app && cd my-electron-app 명령을 실행 후 npm init 명령을 실행시킨 모습입니다. 실행 후 간단히 내용을 살펴보면 이름은 뭐로 지겨울 것인지 몇 번째 버전인지 그런 것들을 지정해 주는 내용입니다. 저는 테스트라 기본 포인트 이름을 maiin.js 라 지정해 준 것을 제외하고 모두 엔터 치고 넘어갔습니다. 

 

c:\Dev_Data\my-electron-app>npm init
...
Press ^C at any time to quit.		// 컨트롤 + C 누르면 명령이 취소됩니다
package name: (my-electron-app)     // 그냥 엔터누름  
version: (1.0.0)					// 그냥 엔터누름 
description:						// 그냥 엔터누름 
entry point: (index.js)				// 기본 자바스크립트 파일명 이건 main.js로 지정
test command:						// 그냥 엔터누름 
git repository:						// 그냥 엔터누름 
keywords:							// 그냥 엔터누름 
author:								// 그냥 엔터누름 
license: (ISC)						// 그냥 엔터누름 
About to write to c:\Dev_Data\my-electron-app\package.json:	// 폴더 밑에 package.json 파일 생성됨

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

c:\Dev_Data\my-electron-app>

전문가 적인 cmd 창은 잠시 뒤로하고 우리에게 익숙한 윈도 창으로 확인해 보겠습니다.

우리에게 익숙한 윈도우 창입니다. 상단 경로 보시면 Dev_Data 밑에 my-electron-app 폴더 밑에 package.json이라는 파일 하나 생성된 모습입니다. package.json 파일의 내용을 메모장으로 열어서 확인해보면 도스 창에서 지정한 앱 이름, 버전 정보 등이 적혀 있는 것을 확인할 수 있습니다.

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

다시 도스 창으로 돌아와 진행을 계속하겠습니다. npm init의 실행이 끝나면 다음으로 cmd 창에서 아래의 명령을 입력하여 주십시오. 내용을 간단히 확인하자면 이제야 electron을 개발자 옵션으로 설치한다는 명령입니다.

npm install --save-dev electron

 위의 명령이 실행된 후 디렉터리 상황을 윈도 창에서 다시 한번 확인해 보겠습니다. 이전까지는 package.json 파일 하나뿐이었었는데 npm install --save-dev electron 명령을 실행한 후에는 node_modules라는 폴더와 package-lock라는 파일이 추가되어 있는 것을 확인할 수 있습니다 또한 package.js의 내용에도 변화가 생긴 것을 확인할 수 있습니다.

일렉트론 install 실행 후 디렉토리와 package.json 파일 내용의 변화

• package.json 파일을 메모장으로 열고 "test": "echo \"Error: no test specified\" && exit 1" 부분을 "start": "electron.”로 교체하여 주시고 저장해 주십시오.
• cmd 창에서 npm start 명령을 실행하여 Hello, world 앱을 실행시켜 보겠습니다. 오류 납니다. 잘못한 거 아닙니다. 당연히 오류 나는 것이 당연합니다. 놀라지 마세요. 오류 내용은 시작점에 main.js 파일이 없다는 내용입니다. main.js 파일이 뭘까요? 

네 처음에 introduction에서 잠깐 보았던 윈도 창 열게 하는 자바스크립트 파일을 이야기하는 것입니다.

 

그렇다면 해당 파일들 모두 메모장으로 만들어서 my-electron-app 폴더에 저장해 보겠습니다. 각 파일을 확장자에 신경 쓰시면서 해당 내용을 복사해서 테스트 작업 폴더에 저장해 주십시오.

 

main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

• 위에 내용들을 복사하셔서 main.js, preload.js, index.html로 작성 저장해 주십시오

main.js, preload.js, index.html 코딩 작업

 

• 그런 다음 다시 실행 cmd 창에서 npm start 실행 명령을 내려주세요.

헬로 월드 애플리케이션

 

제가 만든 첫 데스크톱 애플리케이션 hello world입니다. 간단하지만 창 띄우는 방법을 알았으니 뭐든 만들 수 있을 것 같습니다. 자 이제 일렉트론으로 무엇을  만들지 생각을 해보아야겠습니다.

 

이상 일렉트론 헬로월드 애플리케이션 만들기를 마치겠습니다.