□ Electron 이란
- Electron은 JavaScript, HTML, CSS 를 사용하여 데스크탑 애플리케이션을 개발할 수 있는 Framework입니다.
- Electron은 Chromium과 Node.js를 바이너리에 내장하여 한번의 JavaScript 개발로 Windows, macOS,
Linux를 지원하는 크로스 플랫폼 앱을 생성할 수 있습니다.
□ Electron 시작하기
1. Electron을 사용할 프로젝트CRA하기
npx
npx create-react-app my-electron-app
npm
npm init react-app my-electron-app
yarn
yarn create react-app electron-app
CRA를 완료하였을 경우 아래와 같은 package.json 설정 파일을 확인할 수 있습니다.
package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "description example",
"main": "main.js",
"author": "k2systems",
"license": "MIT"
}
2. devDependencies에 Electron 패키지 설치하기
npm
npm install --save-dev electron
yarn
yarn add --dev electron
3. 프로젝트 실행하기
npm
npm start
yarn
yarn start
package.json
{
"scripts": {
"start": "electron ."
}
}
□ Electron 메인 프로세스 설정 (main.js)
Electron 앱의 entry point는 main script입니다. main script는 전체 Node.js 환경에서 동작하는 메인 프로세스를 제어하며 앱의 생명주기
관리, 네이티브 인터페이스 표시, 렌더러 프로세스를 관리하는 역할을 합니다.
1. 애플리케이션 창 설정
Electron에서 웹페이지를 열기 위해서는 2가지 Electron 모듈이 필요합니다.
• app 모듈 : 애플리케이션의 이벤트 생명주기를 제어합니다.
• Browser 모듈 : 애플리케이션 윈도우를 생성하고 관리합니다.
1. main.js 파일에 모듈을 추가합니다.
const { app, BrowserWindow } = require('electron')
2. 애플리케이션 사이즈를 지정하고 index.html 파일 설정을 추가합니다.
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
3. 애플리케이션 창이 생성된 후에 이벤트가 작동할 수 있도록 설정을 추가합니다.
app.whenReady().then(() => {
createWindow()
})
2. 애플리케이션 창 생명주기 관리
이제 애플리케이션 창을 여는 설정을 완료하였지만 이 애플리케이션을 더 자연스럽게 만들기 위해 추가 설정이 필요합니다.
애플리케이션 창은 각각의 OS마다 다르게 동작하기 때문에 Electron 은 개발자가 이를 위한 앱 설정을 할 수 있도록 규칙을 정했습니다.
process의 platform 속성을 사용하여 특정 OS에 맞는 코드를 실행할 수 있습니다.
1. 애플리케이션 창이 모두 닫혔을 경우 앱 종료
Windows나 Linux에서 모든 창을 닫았을 경우 일반적으로 앱을 종료합니다.
그러나 macOS는 모든 창을 닫아도 애플리케이션이 백그라운드에서 실행되도록 유지되는 flow를 아래 예시 코드를 통해
설정할 수 있습니다.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
2. 창이 열려 있지 않는 경우에 애플리케이션 초기화 (macOS일 경우)
macOS 앱은 일반적으로 열려 있는 창이 없어도 계속 실행 되기 때문에 앱을 종료했을 경우만이 아닌 모든 창이 닫혀 있는 상태에서
애플리케이션이 다시 활성화 되었을때 초기화 후 새로운 창을 열 수 있도록 설정해주어야 합니다.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
⭐발표자 : 이예은님
참고 : Electron 공식 문서를 번역하여 작성하였습니다.
https://www.electronjs.org/docs/latest/
□ Electron 이란
- Electron은 JavaScript, HTML, CSS 를 사용하여 데스크탑 애플리케이션을 개발할 수 있는 Framework입니다.
- Electron은 Chromium과 Node.js를 바이너리에 내장하여 한번의 JavaScript 개발로 Windows, macOS,
Linux를 지원하는 크로스 플랫폼 앱을 생성할 수 있습니다.
□ Electron 시작하기
1. Electron을 사용할 프로젝트CRA하기
npx
npx create-react-app my-electron-app
npm
npm init react-app my-electron-app
yarn
yarn create react-app electron-app
CRA를 완료하였을 경우 아래와 같은 package.json 설정 파일을 확인할 수 있습니다.
package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "description example",
"main": "main.js",
"author": "k2systems",
"license": "MIT"
}
2. devDependencies에 Electron 패키지 설치하기
npm
npm install --save-dev electron
yarn
yarn add --dev electron
3. 프로젝트 실행하기
npm
npm start
yarn
yarn start
package.json
{
"scripts": {
"start": "electron ."
}
}
□ Electron 메인 프로세스 설정 (main.js)
Electron 앱의 entry point는 main script입니다. main script는 전체 Node.js 환경에서 동작하는 메인 프로세스를 제어하며 앱의 생명주기
관리, 네이티브 인터페이스 표시, 렌더러 프로세스를 관리하는 역할을 합니다.
1. 애플리케이션 창 설정
Electron에서 웹페이지를 열기 위해서는 2가지 Electron 모듈이 필요합니다.
• app 모듈 : 애플리케이션의 이벤트 생명주기를 제어합니다.
• Browser 모듈 : 애플리케이션 윈도우를 생성하고 관리합니다.
1. main.js 파일에 모듈을 추가합니다.
const { app, BrowserWindow } = require('electron')
2. 애플리케이션 사이즈를 지정하고 index.html 파일 설정을 추가합니다.
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
3. 애플리케이션 창이 생성된 후에 이벤트가 작동할 수 있도록 설정을 추가합니다.
app.whenReady().then(() => {
createWindow()
})
2. 애플리케이션 창 생명주기 관리
이제 애플리케이션 창을 여는 설정을 완료하였지만 이 애플리케이션을 더 자연스럽게 만들기 위해 추가 설정이 필요합니다.
애플리케이션 창은 각각의 OS마다 다르게 동작하기 때문에 Electron 은 개발자가 이를 위한 앱 설정을 할 수 있도록 규칙을 정했습니다.
process의 platform 속성을 사용하여 특정 OS에 맞는 코드를 실행할 수 있습니다.
1. 애플리케이션 창이 모두 닫혔을 경우 앱 종료
Windows나 Linux에서 모든 창을 닫았을 경우 일반적으로 앱을 종료합니다.
그러나 macOS는 모든 창을 닫아도 애플리케이션이 백그라운드에서 실행되도록 유지되는 flow를 아래 예시 코드를 통해
설정할 수 있습니다.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
2. 창이 열려 있지 않는 경우에 애플리케이션 초기화 (macOS일 경우)
macOS 앱은 일반적으로 열려 있는 창이 없어도 계속 실행 되기 때문에 앱을 종료했을 경우만이 아닌 모든 창이 닫혀 있는 상태에서
애플리케이션이 다시 활성화 되었을때 초기화 후 새로운 창을 열 수 있도록 설정해주어야 합니다.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
⭐발표자 : 이예은님
참고 : Electron 공식 문서를 번역하여 작성하였습니다.
https://www.electronjs.org/docs/latest/