TL;DR
글의 간단한 요약
1. 일렉트론의 기초
일렉트론은 결과적으로 보면 크로미움 브라우저로 데스크탑 앱인 척 한다
일렉트론이 뭔데?
•
JS, HTML, CSS를 이용하여 데스크탑 애플리케이션을 만드는 라이브러리
•
크로미움 브라우저, Node.js를 bianry에 embed함 → JS 코드 베이스를 이용하여 크로스 플랫폼 데스크탑 애플리케이션 제작 가능(Windows, MacOS, Linux)에서!
◦
내가 JS, TS뽕을 맞기 시작한 계기
메인 프로세스
•
NodeJS에서 돌아가는 프로세스로 해당 데스크탑 앱의 라이프사이클, 데스크탑 네이티브 인터페이스, 권한상승 작업, 렌더러 프로세스등을 관장
•
해당 앱의 package.json에서 main위치를 찾아 해당 프로세스를 실행함 → 메인프로세스가 렌더러 프로세스를 실행시킴
렌더러 프로세스
•
크로미움 브라우저
•
프론트엔드 코드가 실행되는 프로세스 → 말그대로 브라우저를 돌리는 개념, 리액트 얹으면 되잖아? → (맞아)
2. 프로젝트 초기화
•
npm 초기화 및 필요 모듈 설치
# 초기화
npm init
# electron, nodemon, typescript, eslint 설치
npm i -D electron nodemon typescript eslint
Bash
복사
•
package.json에 코드 추가 → start 시 TS로 작성된 코드를 js로 변환 후 electron 명령어를 이용하여 앱 실행
"scripts": {
"build": "tsc",
"start": "npm run build && electron ./dist/main.js",
"watch": "nodemon --exec electron."
},
JSON
복사
•
tsconfig.json 설정 추가
{
"compilerOptions": {
"target": "es5",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"suppressImplicitAnyIndexErrors": true,
"module": "commonjs",
"noImplicitAny": true,
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": ["node_modules/*"]
}
},
"include": ["src/**/*"]
}
JSON
복사
3. 프로젝트 구조 확인
일렉트론 프로젝트 구조
dist → 메인 프로세스가 결과적으로 실행하는 TS to JS 트랜스파일의 결과물
main.ts → 메인 프로세스
index.html → 렌더러 프로세스가 실행할 HTML 페이지
4. 기본 코드 작성
main.ts
•
메인 프로세스 기본 코드 작성
// app 모듈 -> 애플리케이션의 이벤트사이클을 관리
// BrowserWindow -> 애플리케이션의 창을 관리
import { app, BrowserWindow } from "electron";
import * as path from "path";
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 1000,
height: 800,
// 렌더러 프로세스에서 node.js 사용 가능
webPreferences: { nodeIntegration: true },
});
// 창이 켜졌을 때 index.htmlfile 로드
mainWindow.loadFile(path.join(__dirname, "../index.html"));
// 프로덕션 코드에선 제거
mainWindow.webContents.openDevTools();
};
// 일렉트론에선 app 모듈에 ready가 실행되어야만 브라우저 윈도우가 실행될 수 있음
// 앱이 준비되면 createWindow로 화면 띄움
app.whenReady().then(() => {
createWindow();
// 맥에서만 돌아가는 코드 -> 윈도우가 없을때 하나만 활성화하기
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// macOS를 제외한 다른 OS의 경우 모든 창이 닫혔을 경우 앱(메인 프로세스 -> 백그라운드 프로세스) 종료
app.on("window-all-closed", () => {
// macOS는 해당 애플리케이션의 모든 창이 전부 닫혀있어도 프로세스는 종료되지 않음
if (process.platform !== "darwin") app.quit();
});
TypeScript
복사
index.html
•
렌더러 프로세스에서 렌더링할 HTML 코드 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<style>
html {
font-family: sans-serif;
background: #2b2e3b;
color: #9feaf9;
}
</style>
</head>
<body>
<h1>Hello Electron!</h1>
<p>
Build cross-platform desktop apps with JavaScript, HTML, and CSS
</p>
</body>
</html>
HTML
복사
5. 실행
# package.json에 추가한 명령어 -> npm run build && electron ./dist/main.js
npm run start
Bash
복사
•
TS로 작성한 코드를 JS로 트랜스파일 후 electron을 실행 명령어 입력
첫 Electron 크로스플랫폼 데스크탑 앱 실행 확인