Electron 이란?

💡 - JavaScript, HTML 및 CSS를 사용하여 데스크탑 애플리케이션을 구축하기 위한 프레임워크

Chromium 과 Node.js 를 바이너리에 내장
Electron을 사용하면 하나의 JavaScript 코드 베이스를 유지하고
Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있음

핵심 구성 요소

💡 프론트엔드 : 크로미움 백엔드 : 노드JS 크로미움 렌더링 라이브러리를 노드JS와 결합 - V8을 공유

△오픈소스 웹브라우저 크로미움(Chromium)

△브라우저 밖에서 자바스크립트 코드를 실행하는 런타임 환경인 노드JS

△오픈소스 자바스크립트 엔진 V8

활용 사례

Atom Editor
VScode
Slack

장점

낮은 진입 장벽
- JavaScript 웹 개발자가 새로운 기술이나 언어를 배울 필요 x
개발 속도 향상
- JavaScript는 한 줄씩 해석하는 인터프리터 방식을 사용
- 개발자가 손쉽게 디버깅 후 최적화 가능 → 빠른 구현
- 비지니스 로직, 디자인 및 구조를 재사용하기 때문에 개발에 소요되는 시간과 비용이 줄어듦
크로스 플랫폼 지원
- OS에 대한 빌드를 지원하고 설치할 수 있음
- 브라우저 버전별로 기능을 제약하거나 타겟 플렛폼에 따라 별도의 버전을 ㅇ쥬ㅣ할 필요 없음
풍부한 OS 네이티브 API를 가진 런타임 제공
써드파티 지원
- 노드JS의 모든 빌트인 모듈과 써드파티 모듈을 사용 가능
- npm 레지스트리에 등록된 대부분의 모듈도 이용 가능
- 노드JS를 통해 파일 시스템에 접근하고 네트워크 리소스를 제약 없이 사용 가능
노드 접근 권한 관리
- 웹뷰에서 노드JS에 대한 접근 권한을 고나리 할 수 있음
- 웹뷰 페이지 내에서 Require이나 Process와 같은 노드JS API를 직접 사용 가능
- 다만, 노드JS 모듈 자체가 안전하지 않을 수 있어서 보안에 유의
빌드 툴과 인스톨러 제공
- 빌드 툴을 제공하여 일렉트론 데스크톱 어플리케이션을 손쉽게 패키징할 수 있음
- autoUpdater 구성요소를 이용하면 애플리케이션 자동 업데이트 기능도 사용 가능

단점

큰 설치 파일 용량
- 크로미움과 노드JS가 포함되기 때문에 일렉트론으로 개발한 애플리케이션이 기본 100MB 이상 ( 초기 설치 파일 용량이 큼)
상대적으로 느린 속도
- 시스템 리소스, RAM을 많이 차지
- 오래된 컴퓨터에서 UI가 약간 느려질 수 있음
- 다양한 플랫폼을 위한 일렉트론은 효율성이 다소 떨어짐
보안은 개발자의 책임
- 노드JS 통합으로 어플리케이션을 만들 수 있는 것뿐만 아니라 더 큰 권한을 갖게됨
- 따라서, 신뢰할 수 없는 임의의 콘텐츠를 표시하면 노드JS 모듈 자체가 안전하지 않을 수 있음
크로스 플랫폼 빌드
- 일렉트론은 크로스 플랫폼을 지우너
- 하나의 플랫폼에서 모든 플랫폼용 데스크톱 어플리케이션을 빌드할 수 없음
- 데스크톱 어플리케이션이 기본OS에 대한 종속성 가질 경우 → 해당 플랫폼에서만 컴파일 가능
  - ex) 맥 OS 코드 서명은 맥 OS에서만 가능

Electron 시작하기

Electron을 사용하려면 필수적으로 Node.js를 설치해야함
가능한 LTS 최신 버전을 이용할 것을 권고

node -v
npm -v

Scaffold Project

mkdir my-electron-app && cd my-electron-app
# 패키지 초기화
npm init

# 의존성 추가
npm install --save-dev electron

package.json 추가

{
  "scripts": {
    "start": "electron ."
  }
}

# 실행
npm start

Electron 동작 원리

출처 : 카카오 기술 블로그 https://tech.kakao.com/2021/08/17/frontend-growth-11/

💡 Electron은 2가지 프로세스 존재

메인(Main) 프로세스와 렌더러(Renderer) 프로세스 Electron 앱은 단 하나의 메인 프로세스를 가짐

메인 프로세스와 렌더러 프로세스 간에 통신이 이뤄져야함
일렉트론에서는 이를 ipcMain과 ipcRenderer와 같은 IPC 모듈을 통해 프로세스 간의 통신을 이룸

메인 프로세스

Node.js를 기반으로 동작
렌더러 프로세스를 관리

렌더러 프로세스

서로 독립적으로 동작

Electron 사용

디렉토리 구조

main.js - 메인 화면 자바스크립트

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

//창을 정의
/* webPreferneces
페이지가 표시 되기 전 실행할 전처리 코드 지정. 
스크립트는 반드시 절대 경로로 전달되야 함.
*/
/*
win.loadFile => 창에서 불러들일 HTML 문서 지정 
*/
const createWindow = () => {
		//create the browser window!
    const win = new BrowserWindow({
        width: 640,
        height: 480,
        webPreferences: { preload: path.join(__dirname, 'preload.js') }
    });
 
    win.loadFile('index.html');
};

// Application이 준비된 후 실행할 스크립트를 지정
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">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

Referenece

https://jetalog.net/104

https://cypsw.tistory.com/56

https://www.samsungsds.com/kr/insights/1239178_4627.html

저작자표시 비영리 변경금지

'Development > Electron' 카테고리의 다른 글

[Electron] ipcRenderer.invoke & ipcMin.handle (0)	2023.06.15
[Electron] dialog.showOpenDialog() (0)	2023.06.15
[Electron] electron 아이콘 넣기 (0)	2023.01.25
[Electron] Electron + React 연동하기 (0)	2023.01.13
[Electron]Electron-forge (0)	2023.01.12

𝘭𝘶𝘮𝘪𝘯𝘰𝘶𝘴

[Electron]Electron

Electron 이란?

핵심 구성 요소

활용 사례

장점

단점

Electron 시작하기

Scaffold Project

Electron 동작 원리

메인 프로세스

렌더러 프로세스

Electron 사용

디렉토리 구조

Referenece

'Development > Electron' 카테고리의 다른 글

댓글

티스토리툴바

« 2024/10 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

[Electron]Electron

Electron 이란?

핵심 구성 요소

활용 사례

장점

단점

Electron 시작하기

Scaffold Project

Electron 동작 원리

메인 프로세스

렌더러 프로세스

Electron 사용

디렉토리 구조

Referenece

'Development > Electron' 카테고리의 다른 글

관련글

댓글

티스토리툴바