Skip to main content

Electron FAQ

Electron 설치가 안 되는 이유는 무엇인가요?​

npm install electron 명령어를 실행할 때, 간혹 설치 오류가 발생하는 경우가 있다.

대부분의 경우, 이러한 오류는 네트워크 문제로 인해 발생하며, electron npm 패키지 자체의 문제는 아니다. ELIFECYCLE, EAI_AGAIN, ECONNRESET, ETIMEDOUT과 같은 오류는 모두 네트워크 문제를 나타낸다. 가장 좋은 해결 방법은 네트워크를 바꿔보거나, 잠시 기다린 후 다시 설치를 시도하는 것이다.

npm을 통한 설치가 계속 실패한다면, electron/electron/releases에서 직접 Electron을 다운로드해 볼 수도 있다.

Electron이 최신 Chrome 버전으로 업그레이드되는 시기는 언제인가요?​

Electron의 Chrome 버전은 일반적으로 새로운 Chrome 안정 버전이 출시된 후 1~2주 이내에 업데이트된다. 하지만 이 예상은 보장된 것이 아니며, 업그레이드 과정에서 필요한 작업량에 따라 달라질 수 있다.

Electron은 Chrome의 안정 채널만 사용한다. 만약 중요한 수정 사항이 베타나 개발 채널에 있다면, 해당 수정 사항을 백포트할 것이다.

더 자세한 정보는 보안 소개 문서를 참고한다.

Electron은 언제 최신 Node.js로 업그레이드되나요?​

새로운 Node.js 버전이 출시되면, 일반적으로 약 한 달 정도 기다린 후 Electron의 Node.js를 업그레이드한다. 이렇게 하면 새로운 Node.js 버전에서 발생할 수 있는 버그로 인한 영향을 피할 수 있다. 새로운 Node.js 버전에서 버그가 발생하는 경우는 매우 흔하다.

Node.js의 새로운 기능은 주로 V8 업그레이드를 통해 제공된다. Electron은 Chrome 브라우저가 제공하는 V8을 사용하기 때문에, 새로운 Node.js 버전의 자바스크립트 기능은 대부분 이미 Electron에 포함되어 있다.

웹 페이지 간 데이터 공유 방법​

웹 페이지(렌더러 프로세스) 간 데이터를 공유하는 가장 간단한 방법은 브라우저에서 이미 제공하는 HTML5 API를 사용하는 것이다. 적합한 후보로는 Storage API, localStorage, sessionStorage, 그리고 IndexedDB가 있다.

또는 Electron이 제공하는 IPC 기초 기능을 활용할 수도 있다. 메인 프로세스와 렌더러 프로세스 간 데이터를 공유하려면 ipcMain과 ipcRenderer 모듈을 사용하면 된다. 웹 페이지 간 직접 통신을 원한다면, MessagePort를 한 페이지에서 다른 페이지로 전송할 수 있다. 이때 메인 프로세스를 통해 ipcRenderer.postMessage()를 사용할 수도 있다. 이후 메시지 포트를 통한 통신은 직접 이루어지며 메인 프로세스를 거치지 않는다.

앱의 트레이가 몇 분 후 사라지는 문제​

이 문제는 트레이를 저장하는 데 사용된 변수가 가비지 컬렉션에 의해 제거될 때 발생한다.

이 문제를 해결하려면 다음 문서가 도움이 될 수 있다:

빠른 해결 방법을 원한다면, 변수를 전역으로 만들어야 한다. 다음 코드를:

const { app, Tray } = require('electron')
app.whenReady().then(() => {
  const tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

아래와 같이 변경한다:

const { app, Tray } = require('electron')
let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

Electron에서 jQuery/RequireJS/Meteor/AngularJS를 사용할 수 없는 이유​

Electron의 Node.js 통합으로 인해 module, exports, require 같은 추가 심볼이 DOM에 삽입된다. 이로 인해 동일한 이름의 심볼을 사용하려는 일부 라이브러리와 충돌이 발생할 수 있다.

이 문제를 해결하려면 Electron에서 Node.js 통합을 비활성화할 수 있다:

// 메인 프로세스에서
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

하지만 Node.js와 Electron API를 계속 사용하고 싶다면, 다른 라이브러리를 포함하기 전에 페이지 내 심볼 이름을 변경해야 한다:

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

require('electron').xxx가 정의되지 않음​

Electron 내장 모듈을 사용하다가 다음과 같은 오류를 마주할 수 있다:

> require('electron').webFrame.setZoomFactor(1.0)
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined

이 오류는 모듈을 잘못된 프로세스에서 사용하고 있을 가능성이 높다. 예를 들어 electron.app은 메인 프로세스에서만 사용할 수 있고, electron.webFrame은 렌더러 프로세스에서만 사용할 수 있다.

폰트가 흐릿하게 보이는 이유와 해결 방법​

서브픽셀 안티앨리어싱이 비활성화되면 LCD 화면에서 폰트가 흐릿하게 보일 수 있다. 예시:

서브픽셀 렌더링 예시

서브픽셀 안티앨리어싱은 폰트 글리프를 포함하는 레이어의 배경이 투명하지 않아야 한다. (자세한 내용은 이 이슈를 참고한다.)

이를 위해 BrowserWindow의 생성자에서 배경색을 설정한다:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  backgroundColor: '#fff'
})

이 효과는 (일부?) LCD 화면에서만 보인다. 직접 차이를 느끼지 못하더라도 사용자 중 일부는 영향을 받을 수 있다. 특별한 이유가 없다면 항상 이 방법으로 배경을 설정하는 것이 좋다.

CSS에서 배경을 설정하는 것만으로는 원하는 효과를 얻을 수 없다는 점에 유의한다.