Electron이란 ?
- 데스크탑 프레임워크 , 현재는 깃허브에 의해 개발되고 있다.
( 데스크톱 GUI 애플리케이션을 개발하는데 사용! )
- JavaScript 코드베이스를 유지하고 Windows, macOS, Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있다.
코드베이스?
특정 소프트웨어 시스템, 응용 소프트웨어, 소프트웨어 구성 요소를 빌드하기 위해 사용되는 소스 코드의 모임
Electron 장단점
장점
- 방대한 커뮤니티 보유
- 낮은 러닝커브
- 웹 기술을 사용가능
- Node.js를 사용하여 JS의 모든 기능을 사용 가능
- MS,Discord,Slack 등에서 사용
단점
- 큰 사이즈의 설치 파일 사이즈 (~120MB)
- 많은 RAM과 CPU 사용
- 모바일 지원 X
- 보안에 취약 ( 사용자가 앱소스코드를 디컴파일해서 볼 수 있다. )
- Node.js FFI 외부에서 네이티브 코드를 통합할 방법이 없다.
( Node.js FFI는 설정하는 것이 어렵고 성능 저하 우려 )
FFI ?
Foreign Function Interface의 약자 .
한 프로그래밍 언어에서 다른 프로그래밍 언어의 코드를 호출하기위한 interface를 뜻 함.
Electron의 구성요소
- 일렉트론은 Main Process와 Renderer Process로 구성된다.
- 일렉트론은 마치 서버와 브라우저로 구성되어 있다고 비유할 수 있는데, 이때 Main Process이 Node서버 이고, Renderer Process가 Chromium 브라우저 이다.
1) Main Process
- Electron App은 반드시 1개의 Main Process를 가지며, 여기서 Node.js API 사용이 가능하다.
- Main Process에서 BrowserWindow로 Renderer Process를 생성하고, 웹페이지로 GUI를 구성한다.
- Main Process가 종료되면 , Renderer Process도 함께 종료된다.
2) Renderer Process
- Main Process에서 Renderer Process는 0개 이상일 수 있다.
- 각각의 Renderer Process는 독립적으로 작동하기에 다른 Renderer Process에 영향을 주지 않는다.
Electron의 Process
- Chromium에서 다중 프로세스 아키텍처를 상속받는다.
- 초기에 브라우저는 단일 프로세스를 사용하였으나 이 패턴은 열려 있는 각 탭에 대한 overhead는 적으나, 하나의 웹사이트가 충돌하거나 중단되면 전체 브라우저에 영향이 간다.
- 따라서 Chrome팀은 각 탭이 자체 프로세스에서 렌더링 되도록 결정.
- 그러면 단일 브라우저 프로세스가 이러한 프로세스와 전체 애플리케이션 수명 주기를 제어한다.
아래는 이 모델을 시각화 한 것이다.
Electron Aplication 구조
1. package.json - 메타데이터
2. main.js - 코드
3. index.html - GUI
+ FW 일렉트론 실행 파일
(electron.exe :윈도우 , electron.app: 맥 , electron : 리눅스)
간단 예제
main.js
// 애플리케이션 수명을 제어하고 , 기본 브라우저 창을 만드는 모듈
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
// 브라우저윈도우 만들기
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
// __dirname : 현재 실행중인 스크립트 경로
// path.join : 여러 경로 세그먼트를 함꼐 결합하여 모든 플랫폼에서 작동하는 결합된 경로 문자열을 생성
}
})
// app의 index.html로드
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// 애플리케이션이 준비된후 실행할 스크립트를 지정
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// mac OS를 제외한 모든 창이 닫히면 종료
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>
<title>Hello, World!</title>
</head>
<body>
<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>
</body>
</html>
이후 npm start 명령어를 터미널에 입력하면 App이 실행된다.
참고 : Electron의 대안 - Tauri , PWA
참고자료
일렉트론 (소프트웨어 프레임워크) - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전. 일렉트론(Electron, 과거 명칭: 아톰 셸/Atom Shell[5])은 청자오(Cheng Zhao)가 개발한 오픈 소스 프레임워크의 하나로, 지금은 깃허브에 의해 개발되고 있다.[6] 원래 웹
ko.wikipedia.org
일렉트론(Electron)은 2021년에도 여전히 최고의 데스크탑 프레임워크인가요?
by 김코딩 | 사실 저는 아직 일렉트론을 대체할 만한 훌륭한 프레임워크를 찾지 못하였습니다. 구글에서 개발한 크로스 플랫폼 프레임워크인 Flutter가 데스크탑 앱까지 개발할 수 있을 것이라고
www.wanted.co.kr
Electron 간단 정리하기
최근 Electron 에 흥미가 생겨 이를 정리해보고자 한다.
pks2974.medium.com
'FE' 카테고리의 다른 글
| Node환경과 브라우저의 차이점 (몇몇 노드 모듈이 브라우저에서 실행할 수 없는 이유) (0) | 2023.12.11 |
|---|---|
| [Clean Code] React에서의 클린코드 (0) | 2023.10.10 |
| 리액트를 사용해보고 느낀점과 Next.js vs Gatsby 알아보기 (2) | 2022.08.04 |
| [디자인패턴] 아토믹패턴이란? (2) | 2022.07.04 |
| SSR , CSR이 무엇일까 ? (0) | 2022.06.22 |