Electron 공식문서를 번역한 내용과 글 하단의 출처에 적힌 블로그들을 참고하여 작성된 내용입니다.
What is Electron?
Electron은 자바스크립트, HTML, CSS를 사용하여 데스크톱 애플리케이션을 만드는 프레임워크이다.
Chromium과 Node.js를 바이너리에 내장함으로써 Electron은 하나의 JavaScript 코드베이스를 유지하고 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있습니다.
Prerequisites
일렉트론 공식문서는 독자가 Node.js와 일반적인 웹 개발에 모두 익숙하다는 가정 하에 작성되어있다. 이 두가지 영역은 아래 링크를 통해 좀 더 알아볼 수 있다.
Chromium의 process model을 알고 있다면 일렉트론이 어떻게 동작하는지 더 잘 이해할 수 있다. 2008년 크롬런칭과 함께 발행된 Chrome comic을 통해 크롬구조를 간단히 살펴볼 수 있다.
Running examples with Electron Fiddle
Electron Fiddle은 Electron과 함께 작성되고 Electron의 유지보수자들이 지원하는 샌드박스 앱이다. 개발 중에 Electron의 API를 실험하거나 프로토타입 기능을 사용하기 위한 학습 도구로 설치할 것을 적극 권장합니다.
튜토리얼의 예제를 살펴볼 때 코드 블록 아래에 "Electron Fiddle에서 열기" 단추가 있는 경우가 많습니다. Fiddle을 설치한 경우 이 버튼을 누르면fiddle.electronjs.org 링크가 열리고 복사 붙여넣기 작업이 필요하지 않습니다.
Quick Start
이 가이드에서는 electron/electron-quick-start처럼 Electron에서 Hello world앱을 만드는 과정을 안내합니다.
이 튜토리얼이 끝나면 실행 중인 Cromium, Node.js 및 Electron 버전에 대한 정보가 포함된 웹 페이지를 표시하는 브라우저 창이 열립니다.
Prerequisites
Electron을 사용하려면 Node.js를 설치해야 합니다. 사용 가능한 최신 LTS 버전을 사용하는 것이 좋습니다.
플랫폼에 대해 사전 구축된 설치 프로그램을 사용하여 Node.js를 설치하십시오. 그렇지 않으면 다른 개발 도구에서 비호환성 문제가 발생할 수 있습니다.
Node.js가 올바르게 설치되었는지 확인하려면 터미널 클라이언트에 다음 명령을 입력합니다.
$node -v
$npm -v참고: Electronic은 Node.js를 이진 파일에 포함하므로 코드를 실행하는 Node.js 버전은 시스템에서 실행 중인 버전과 관련이 없습니다.
Create your application
Scaffold the project
electron앱은 다른 Node.js 프로젝트와 같은 일반적인 구조를 따른다. 폴더를 만들고 npm 패키지를 초기화하는 것부터 시작합니다.
$ mkdir my-electron-app && cd my-electron-app
$ npm init이 튜토리얼의 목적을 위해 따라야 할 몇 가지 규칙이 있습니다.
- 진입점은main.js여야 한다.
- author 와 description은 아무값이나 될 수 있으나, app packaging을 위해서는 반드시 필요하다.
당신의 package.json 파일은 다음과 같아야 합니다
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}그런 다음electron 패키지를 앱의 devDependencies에 설치합니다.
$ npm install --save-dev electron참고: Electron을 설치하는 데 문제가 있는 경우 고급 설치 안내서를 참조하십시오.
마지막으로 Electron을 실행할 수 있습니다.
package.json config의scripts필드에 다음과 같은start 명령을 추가합니다.
{
"scripts": {
"start": "electron ."
}
}이 start명령을 사용하면 개발 모드에서 앱을 열 수 있습니다.
$ npm startNote: 이 스크립트는 프로젝트의 루트 폴더에서 Electron을 실행하도록 알려줍니다. 이 단계에서 앱은 실행할 앱을 찾을 수 없다는 에러를 즉시 발생시킵니다.
Run the main process
Electron 응용 프로그램의 시작 지점은 main 스크립트입니다. 이 스크립트는 전체 Node.js 환경에서 실행되는 main process를 제어하며 앱의 lifecycle 제어, 네이티브 인터페이스 표시, 권한 있는 작업 수행, 렌더러 프로세스 관리를 담당합니다.
실행하는 동안 Electron은 앱의 app scaffolding단계에서 구성한package.jsonconfig 의 main field 에서 이 스크립트를 찾습니다.
main script를 초기화하려면 프로젝트의 루트 폴더에main.js라는 빈 파일을 생성하십시오.
참고: 이 시점에서 start 스크립트를 다시 실행하면 앱에서 오류가 더 이상 발생하지 않습니다! 하지만 아직 main.js에 코드를 추가하지 않았기 때문에 아무것도 할 수 없습니다.
Create a web page
우리의 응용 프로그램을 위한 창을 만들기 전에, 우리는 그 안에 로드될 콘텐츠를 만들어야 합니다. Electron에서 각 창은 로컬 HTML 파일 또는 원격 URL에서 로드할 수 있는 웹 콘텐츠를 표시합니다.
프로젝트의 루트 폴더에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'">
<meta http-equiv="X-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>Opening your web page in a browser window
이제 웹 페이지가 생겼으니 응용 프로그램 창에 로드하십시오. 이렇게 하려면 두 개의 Electron 모듈이 필요합니다.
- app module: 응용 프로그램의 이벤트 수명 주기를 제어하는 응용 프로그램 모듈입니다.
- BrowserWindow module : 응용 프로그램 창을 만들고 관리하는 모듈.
기본 프로세스가 Node.js를 실행하므로 Node.js를 파일 상단에서 CommonJS 모듈으로 가져올 수 있습니다.
const { app, BrowserWindow } = require('electron')그런 다음index.html을 로드하는createWindow() 함수를 새 BrowserWindow 인스턴스에 추가합니다.
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}다음으로 이createWindow( ) 함수를 호출하여 창을 엽니다.
Electron에서는app 모듈의 ready이벤트가 발생한 후에만 브라우저 창을 만들 수 있습니다. 이 이벤트는 app.whenReady( ) API를 사용하여 기다리시면 됩니다. whenReady( )가 Promise를 resolve시킨 후createWindow( )를 호출합니다.
app.whenReady().then(() => {
createWindow()
})참고: 이 때 Electron 응용 프로그램은 웹 페이지를 표시하는 창을 성공적으로 엽니다!
참고
https://parandol.tistory.com/24
[TCP Socket Router #02] Electron Architecture, IPC Main/IPC Renderer
TCP Socket Router 예제를 통한 Electron Application 작성방법에 대한 연재가 완료되었습니다. Electron + Vue.js 애플리케이션 만들기 1. Electron 프로젝트 생성하기(Create Electron Application Project) 2...
parandol.tistory.com
https://developers.google.com/web/updates/2018/09/inside-browser-part1?hl=ko
모던 웹 브라우저 들여다보기 (파트 1) | Web | Google Developers
브라우저에서 사용자 코드를 하이레벨 아키텍처부터 렌더링 파이프라인 세부 기능에 이르는 기능성 웹사이트로 전환하는 방법
developers.google.com
'Electron' 카테고리의 다른 글
| 프로세스 모델 (0) | 2021.10.29 |
|---|---|
| Electron 시작하기 (2) (0) | 2021.10.27 |
