일렉트론, Electron JS 프레임워크 시작하기
- NodeJS 설치
https://nodejs.org/ko/download/
- electron 설치 - 디버깅을 위해 로컬에 설치한다
> npm install --save-dev electron
- 베타 버전 설치 방법 (최신 Node.js 사용을 위해)
> npm i -D electron@beta
- 버전 확인
> node_modules\electron\dist\electron.exe --version
- electron이 사용하는 node.js버전 확인 (코드로 확인)
console.log(process.versions.node);
//-----------------------------------------------------------------
* Electron의 Node.js 버전
Electron은 내부적으로 별도의 Node.js버전을 가지고 있음
- 설치된 Node버전과 Electron 앱에서 사용하는 버전은 다름
2020/08 현재 최신 Node.js v14.7.0
시스템에 최신 Node.js v14를 설치해도
Electron v9.1.2 의 process.versions.node 값은 v12.14.1
- LTS 버전만 사용,
- 일렉트론에서 노드JS의 최신 버전을 사용하려면 베타 버전 설치
npm i -D electron@beta
//-------------------------
Electron 과 Node.js 버전 역사 (노드 역사)
https://en.wikipedia.org/wiki/Electron_(software_framework)#Versions
https://www.electronjs.org/docs/latest/tutorial/electron-timelines
https://nodejs.org/en/about/previous-releases
https://en.wikipedia.org/wiki/Node.js
electron - nodejs
10(2020-08) - 12.16 (2019-04)
11(2020-11) - 12.16
12(2021-03) - 14.15 (2021-04)
15(2021-09) - 16.5 (2021-04)
20(2022-08) - 16.15
23(2022-12) - 18.12 (2022-10)
24(2023-02) - 18.14
25(2023-04) - 18.15
29(2024-02) - 20.9 (2023-04)
30(2024-04) - 20.11
31(2024-06) - 20.14
32(2024-08) - 20.16
//------------------------
Node.js의 ES6 모듈 지원
v8.5.0 (2017) --experimental-modules 옵션으로 ES6 모듈 지원
v13.2.0 (2019) 부터 --experimental-modules 옵션 없이 지원
- *.mjs 파일은 ES6 모듈로 인식 (import)
- *.js , *.cjs 파일은 기존의 ComonJS 모듈로 인식 (require)
- package.json에 "type": "module" 설정이 있으면 *.js 파일도 ES6 모듈로 인식
//-----------------------------------------------------------------
- 프로젝트 초기화
프로젝트 폴더 생성
-> npm init
-> package.json 파일 생성됨 - package.json 파일
{
"name": "name",
"version": "0.1.0",
"description": "description",
"author": "author",
"main": "main.js",
"scripts": {
"start": "electron ."
},
}//---------------------
- main.js 파일 생성
const { app, BrowserWindow } = require("electron");
function createWindow() {
// 브라우저 창을 생성합니다.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, contextIsolation: false
},
});
// and load the index.html of the app.
win.loadFile("main.htm");
// 개발자 도구를 엽니다.
win.webContents.openDevTools();
}
// 이 메소드는 Electron의 초기화가 완료되고
// 브라우저 윈도우가 생성될 준비가 되었을때 호출된다.
// 어떤 API는 이 이벤트가 나타난 이후에만 사용할 수 있습니다.
app.whenReady().then(createWindow);
// 모든 윈도우가 닫히면 종료된다.
app.on("window-all-closed", () => {
// macOS에서는 사용자가 명확하게 Cmd + Q를 누르기 전까지는
// 애플리케이션이나 메뉴 바가 활성화된 상태로 머물러 있는 것이 일반적입니다.
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// macOS에서는 dock 아이콘이 클릭되고 다른 윈도우가 열려있지 않았다면
// 앱에서 새로운 창을 다시 여는 것이 일반적입니다.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});//------------------------------
- main.htm 파일 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>document.write(process.versions.node)</script>,
Chrome
<script>document.write(process.versions.chrome)</script>,
and Electron
<script>document.write(process.versions.electron)</script>.
</body>
</html>//---------------------------
- 작성한 프로그램 실행 방법
- 방법1 : electron main.js
-
- 방법2 : package.json에 다음 설정이 된 경우
"main": "main.js",
"scripts": {
"start": "electron ."
},- 다음 명령으로 시작 가능 : npm start
//-------------------------------------------------
- 디버깅 하기
- electron vscode debug breakpoint
- .vscode/launch.json 파일 생성
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args" : ["."],
"outputCapture": "std"
}
]
}- index.js 파일에 브레이크포이트 설정(F9) 하고 디버깅시작(F5)
//------------------------------------------------------------------------------
*.exe 실행 파일로 빌드
- electron-builder 설치
npm i -g electron-builder
- exe 빌드
electron-builder --win 7z --x64
- 실행파일이 105MB, 압축파일이 42MB
//----------------------------------
// 참고
Electron 본 프로그램 빌드
https://www.electronjs.org/docs/development/build-instructions-gn
- depot_tools 설치하다 포기
- windows용 설치가 없어서 '리눅스용 lsb_release 없음 에러'에서 더 진행이 안됨
- python 도 지원이 중단된 v2를 사용
//----------------------
// 참고
https://www.electronjs.org/docs/tutorial/first-app
https://www.electronjs.org/docs/tutorial/debugging-main-process-vscode
https://github.com/sindresorhus/awesome-electron#boilerplates
'Code' 카테고리의 다른 글
| [Electron] 소스 파일이 변경되면 자동 재시작 하도록 설정 하기 (0) | 2020.08.08 |
|---|---|
| Android Studio Color Scheme 테마 폰트 변경(화면 크기) (0) | 2020.08.04 |
| [Java] 자바 버전 출시 역사 & OpenJDK 정보 (0) | 2020.04.05 |
| [Linux] 명령어로 파일 수정 (sed) (0) | 2020.03.29 |
| 개발자 커뮤니티 (0) | 2020.03.12 |
