Skip to main content

Use V8 and Chromium Features in Electron

· 5 min read

Electron에서 V8과 Chromium의 최신 기능을 사용하는 방법에 대해 알아보자. 이 글에서는 Electron이 어떻게 V8 엔진과 Chromium의 최신 기능을 활용하는지 설명한다. 또한, 이러한 기능을 프로젝트에 적용하는 방법을 단계별로 안내한다.

Electron은 Node.js와 Chromium을 기반으로 동작한다. 따라서 V8 엔진과 Chromium의 최신 기능을 활용할 수 있다. 이를 통해 더 나은 성능과 최신 웹 표준을 지원하는 애플리케이션을 개발할 수 있다.

이 글에서는 다음과 같은 주제를 다룬다:

  • V8 엔진의 최신 기능과 이를 Electron에서 어떻게 활용할 수 있는지 설명한다.
  • Chromium의 최신 기능을 Electron 프로젝트에 통합하는 방법을 알아본다.
  • Electron 애플리케이션에서 이러한 기능을 사용할 때 주의해야 할 점을 살펴본다.

이 글을 통해 Electron 개발자들은 V8과 Chromium의 최신 기능을 효과적으로 활용할 수 있는 방법을 배울 수 있다. 이를 통해 더 강력하고 현대적인 애플리케이션을 개발하는 데 도움이 될 것이다.

Electron 애플리케이션을 개발하면 단일 코드베이스와 하나의 브라우저를 대상으로 설계할 수 있어 매우 편리하다. 또한 Electron은 Node.jsChromium의 최신 버전을 지속적으로 반영하기 때문에, 이들이 제공하는 훌륭한 기능들을 활용할 수 있다. 경우에 따라 웹 앱에서 필요했던 의존성을 제거할 수도 있다.


여기서 몇 가지 기능을 예제로 살펴보겠지만, 모든 기능에 대해 알고 싶다면 Google Chromium 블로그Node.js 변경 로그를 주시하면 된다. Electron이 사용하는 Node.js, Chromium, V8 버전은 electronjs.org/#electron-versions에서 확인할 수 있다.

V8을 통한 ES6 지원

Electron은 Chromium의 렌더링 라이브러리와 Node.js를 결합한다. 이 둘은 동일한 자바스크립트 엔진인 V8을 사용한다. 많은 ECMAScript 2015(ES6) 기능이 이미 V8에 내장되어 있어서, 컴파일러 없이도 Electron 애플리케이션에서 바로 사용할 수 있다.

아래는 몇 가지 예제지만, 클래스(엄격 모드에서), 블록 스코프, Promise, 타입 배열 등도 사용 가능하다. V8에서 지원하는 ES6 기능에 대한 더 많은 정보는 이 목록을 참고한다.

화살표 함수

findTime () => {
console.log(new Date())
}

문자열 보간

var octocat = 'Mona Lisa';
console.log(`The octocat's name is ${octocat}`);

New Target

Octocat() => {
if (!new.target) throw "Not new";
console.log("New Octocat");
}

// Throws
Octocat();
// Logs
new Octocat();

배열 includes

// Returns true
[1, 2].includes(2);

Rest 매개변수

// Represent indefinite number of arguments as an array
(o, c, ...args) => {
console.log(args.length);
};

크로미움 기능

구글과 기여자들의 노력 덕분에, Electron 앱을 개발할 때 다음과 같은 멋진 기능들을 활용할 수 있다. 이 기능들은 다음과 같지만, 이에 국한되지 않는다:

새로운 버전이 출시될 때마다 구글 크로미움 블로그를 통해 기능을 확인할 수 있다. 또한, Electron에서 사용하는 크로미움 버전은 여기에서 확인할 수 있다.

무엇이 가장 기대되나요?

V8이나 Chromium에 내장된 여러분이 가장 좋아하는 기능을 @ElectronJS로 트윗해 주세요.

Electron 1.0에서 예정된 API 변경 사항

· 6 min read

Electron의 시작은 Atom-Shell이라는 이름으로 거슬러 올라간다. 그때부터 우리는 Chromium의 컨텐츠 모듈과 네이티브 GUI 컴포넌트를 위한 크로스 플랫폼 JavaScript API를 제공하기 위해 다양한 실험을 해왔다. 초기 API는 매우 자연스럽게 발전했으며, 시간이 지나면서 초기 설계를 개선하기 위해 여러 변경을 가했다.


이제 Electron이 1.0 릴리즈를 준비하면서, 마지막으로 남은 API 세부 사항을 정리할 기회를 잡고자 한다. 아래 설명된 변경 사항은 0.35.x 버전에 포함되며, 기존 API는 폐기 예정 경고를 표시한다. 이를 통해 다가오는 1.0 릴리즈를 대비할 수 있다. Electron 1.0은 몇 달 후에 출시될 예정이므로, 이 변경 사항이 주요 변경으로 적용되기 전까지 여유 시간이 있다.

사용 중단 경고

기본적으로, 사용 중단된 API를 사용할 경우 경고 메시지가 표시된다. 이 경고를 끄려면 process.noDeprecationtrue로 설정하면 된다. 사용 중단된 API 사용의 출처를 추적하려면, process.throwDeprecationtrue로 설정해 경고 대신 예외를 발생시킬 수 있다. 또는 process.traceDeprecationtrue로 설정해 사용 중단된 API의 호출 스택을 출력할 수도 있다.

내장 모듈 사용의 새로운 방식

이제 내장 모듈은 독립적인 모듈로 분리되지 않고 하나의 모듈로 그룹화되어 있어 다른 모듈과의 충돌 없이 사용할 수 있다:

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;

이전 방식인 require('app')은 하위 호환성을 위해 여전히 지원되지만, 이를 끌 수도 있다:

require('electron').hideInternalModules();
require('app'); // 에러 발생.

remote 모듈을 더 쉽게 사용하는 방법

내장 모듈 사용 방식이 변경되면서, 렌더러 프로세스에서 메인 프로세스 측 모듈을 더 쉽게 사용할 수 있게 되었다. 이제 remote의 속성에 직접 접근하여 사용할 수 있다:

// 새로운 방식
var app = require('electron').remote.app;
var BrowserWindow = require('electron').remote.BrowserWindow;

기존의 긴 require 체인을 사용하는 대신:

// 기존 방식
var app = require('electron').remote.require('app');
var BrowserWindow = require('electron').remote.require('BrowserWindow');

ipc 모듈 분리

ipc 모듈은 메인 프로세스와 렌더러 프로세스 양쪽에 존재했지만, 각각의 API가 달라서 초보 사용자에게 혼란을 주었다. 혼동을 피하기 위해 메인 프로세스의 모듈은 ipcMain으로, 렌더러 프로세스의 모듈은 ipcRenderer로 이름을 바꿨다:

// 메인 프로세스에서
var ipcMain = require('electron').ipcMain;
// 렌더러 프로세스에서
var ipcRenderer = require('electron').ipcRenderer;

또한 ipcRenderer 모듈에서는 메시지를 받을 때 ipcMain 모듈과 동일한 방식으로 처리할 수 있도록 event 객체를 추가했다:

ipcRenderer.on('message', function (event) {
console.log(event);
});

BrowserWindow 옵션 표준화

기존 BrowserWindow 옵션은 다른 API의 옵션과 스타일이 달랐으며, 이름에 -가 포함되어 있어 JavaScript에서 사용하기 다소 불편했다. 이제는 전통적인 JavaScript 네이밍 컨벤션에 맞춰 표준화되었다:

new BrowserWindow({ minWidth: 800, minHeight: 600 });

DOM 규칙에 맞춘 API 이름 변경

Electron의 API 이름은 원래 모든 API에 카멜 케이스(camelCase)를 사용했다. 예를 들어 UrlURL로 표기하는 방식이다. 하지만 DOM은 자체적인 규칙을 가지고 있으며, URLUrl보다 선호하고 ID 대신 Id를 사용한다. 이러한 DOM 스타일에 맞추기 위해 다음과 같은 API 이름 변경 작업을 진행했다:

  • UrlURL로 변경
  • CspCSP로 변경

Electron v0.35.0을 사용할 때 이러한 변경 사항으로 인해 많은 부분에서 더 이상 사용되지 않는(deprecated) API를 발견할 수 있다. 이를 해결하는 간단한 방법은 모든 Url 인스턴스를 URL로 바꾸는 것이다.

Tray 이벤트 이름 변경

Tray의 이벤트 이름 스타일이 다른 모듈과 조금 달랐기 때문에, 일관성을 유지하기 위해 이름을 변경했다.

  • clickedclick으로 변경
  • double-clickeddouble-click으로 변경
  • right-clickedright-click으로 변경

Mac App Store와 Windows 자동 업데이터를 Electron에 적용하기

· 3 min read

최근 Electron에 두 가지 흥미로운 기능이 추가되었다. Mac App Store와 호환되는 빌드와 내장된 Windows 자동 업데이터 기능이다.

Mac App Store 지원

v0.34.0 버전부터 각 Electron 릴리스에는 Mac App Store와 호환되는 빌드가 포함된다. 이전에는 Electron으로 빌드한 애플리케이션이 Mac App Store의 애플 요구 사항을 충족하지 못했다. 이러한 요구 사항 중 대부분은 프라이빗 API 사용과 관련이 있다. Electron이 이러한 요구 사항을 충족하도록 샌드박스화하기 위해 두 모듈을 제거해야 했다:

  • crash-reporter
  • auto-updater

또한 DNS 변경 감지, 비디오 캡처, 접근성 기능과 관련된 일부 동작이 변경되었다. 이러한 변경 사항과 Mac App Store에 앱 제출에 대한 자세한 내용은 문서에서 확인할 수 있다. mas- 접두사가 붙은 배포판은 Electron 릴리스 페이지에서 찾을 수 있다.

관련 풀 리퀘스트: electron/electron#3108, electron/electron#2920

윈도우 자동 업데이터

Electron v0.34.1 버전에서 auto-updater 모듈이 Squirrel.Windows와 호환되도록 개선되었다. 이는 Electron이 OS X와 윈도우 모두에서 앱을 자동으로 업데이트할 수 있는 간편한 방법을 제공한다는 것을 의미한다. 윈도우에서 앱을 자동 업데이트하도록 설정하는 방법에 대한 자세한 내용은 문서에서 확인할 수 있다.

관련 풀 리퀘스트: electron/electron#1984

Electron의 새로운 기능

· 4 min read

최근 Electron에 관한 흥미로운 업데이트와 발표가 있었습니다. 여기 그 내용을 정리했습니다.

소스

Electron은 v0.32.0 버전부터 Chrome 45와 동기화되었다. 다른 업데이트 사항은 다음과 같다...

더 나은 문서화

새 문서

문서를 더 보기 좋고 읽기 쉽게 재구성하고 표준화했다. 또한 일본어와 한국어와 같은 커뮤니티 기여 번역도 포함되어 있다.

관련 풀 리퀘스트: electron/electron#2028, electron/electron#2533, electron/electron#2557, electron/electron#2709, electron/electron#2725, electron/electron#2698, electron/electron#2649.

Node.js 4.1.0

v0.33.0 버전부터 Electron은 Node.js 4.1.0을 포함하고 있다.

관련된 풀 리퀘스트:
electron/electron#2817.

node-pre-gyp

소스 코드로부터 빌드할 때 node-pre-gyp에 의존하는 모듈을 이제 Electron에 맞게 컴파일할 수 있다.

관련 풀 리퀘스트:
mapbox/node-pre-gyp#175.

ARM 지원

이제 Electron은 Linux에서 ARMv7 빌드를 제공한다. 이는 Chromebook과 Raspberry Pi 2와 같은 인기 있는 플랫폼에서 실행된다.

관련 이슈: atom/libchromiumcontent#138, electron/electron#2094, electron/electron#366.

Yosemite 스타일의 프레임리스 윈도우

frameless window

@jaanus가 제출한 패치가 병합되었다. 이 패치는 OS X Yosemite 이상 버전에서 시스템 트래픽 라이트가 통합된 프레임리스 윈도우를 생성할 수 있도록 해준다. 이 기능은 다른 기본 OS X 앱들과 유사한 방식으로 작동한다.

관련 풀 리퀘스트: electron/electron#2776.

Google Summer of Code 이후의 인쇄 기능 개선

Google Summer of Code 이후, @hokein이 제공한 패치를 병합하여 인쇄 기능을 개선하고, 페이지를 PDF 파일로 저장할 수 있는 기능을 추가했다.

관련 이슈: electron/electron#2677, electron/electron#1935, electron/electron#1532, electron/electron#805, electron/electron#1669, electron/electron#1835.

Atom

Atom은 이제 Chrome 44 기반의 Electron v0.30.6로 업그레이드되었다. 현재 atom/atom#8779에서 v0.33.0으로의 업그레이드 작업이 진행 중이다.

발표 자료

GitHubber Amy PalamountainNordic.js에서 열린 발표에서 Electron에 대한 훌륭한 소개를 했다. 그녀는 또한 electron-accelerator 라이브러리를 만들었다.

Amy Palomountain의 Electron을 활용한 네이티브 애플리케이션 개발

Atom 팀의 Ben OgleYAPC Asia에서 Electron에 대한 발표를 진행했다:

웹 기술로 데스크톱 앱 만들기 - Ben Ogle

Atom 팀 멤버인 Kevin Sawicki와 다른 개발자들이 최근 Bay Area Electron User Group 미트업에서 Electron에 대해 발표했다. 이 발표의 영상이 공개되었으며, 그중 몇 가지를 소개한다:

Kevin Sawicki가 말하는 Electron의 역사

Ben Gotow의 웹 앱을 네이티브처럼 느껴지게 만드는 방법

GitHub HQ에서 열린 Electron 밋업

· 2 min read

9월 29일 GitHub 본사에서 Atom 팀 멤버 @jlord@kevinsawicki가 주최하는 Electron 밋업이 열린다. 이번 행사에서는 다양한 발표, 간식, 그리고 Electron으로 멋진 작업을 하는 사람들과 교류할 시간이 마련된다. 또한 참가자들이 짧은 발표를 할 수 있는 시간도 준비되어 있다. 여러분의 참여를 기대한다!


발표 내용

  • Jonathan RossFrancois LabergeJibo에서 Electron을 사용해 로봇을 애니메이션화한 경험을 공유한다.
  • Jessica Lord는 Electron을 기반으로 교육 도구 Git-it을 개발한 이야기를 발표한다.
  • Tom Moorspeak.io에서 Electron을 사용해 비디오 및 화면 공유 기능을 개발하며 얻은 장단점에 대해 이야기한다.
  • Ben GotowNylas 메일 클라이언트를 미리 보여주고, Electron 기반으로 개발한 과정을 발표한다.

세부 정보

  • 장소: GitHub HQ, 275 Brannan Street, San Francisco, CA, 94107
  • 날짜: 2015년 9월 29일 화요일
  • 시간: 오후 6시 - 오후 9시
  • RSVP: ti.to/github-events/electron-meetup

electron-meetup-office-2

Electron Documentation

· 7 min read

이번 주에 Electron 문서를 electronjs.org로 옮겼다. 최신 문서는 /docs/latest에서 확인할 수 있다. 이전 버전의 문서도 유지하므로, 사용 중인 버전에 해당하는 문서는 /docs/vX.XX.X에서 찾아볼 수 있다.


사용 가능한 문서 버전을 확인하려면 /docs를 방문하거나, 모든 최신 버전의 문서를 한 페이지에서 보려면 /docs/all로 이동하면 된다. cmd + f를 사용해 검색하기에 편리하다.

문서 내용에 기여하고 싶다면, Electron 저장소에서 작업할 수 있다. 문서는 여기에서 가져오며, 각 마이너 릴리스마다 가져와 Jekyll로 만들어진 Electron 사이트 저장소에 추가한다.

문서를 한 저장소에서 다른 저장소로 가져오는 방법에 대해 더 알고 싶다면 아래를 계속 읽어보자. 그렇지 않으면 문서를 즐기길 바란다!

기술적 세부 사항

우리는 Electron 코어 저장소 내의 문서를 그대로 보존한다. 이는 electron/electron이 항상 최신 버전의 문서를 갖고 있음을 의미한다. 새로운 Electron 버전이 출시되면, 해당 문서를 Electron 웹사이트 저장소인 electron/electronjs.org로 복제한다.

문서를 가져오기 위해 script/docs vX.XX.X 커맨드라인 인터페이스를 사용해 스크립트를 실행한다. 이때 --latest 옵션을 포함할지 여부는 가져오는 버전이 최신 버전인지에 따라 결정된다. 문서를 가져오는 스크립트는 몇 가지 흥미로운 Node 모듈을 사용한다:

  • nugget: 릴리스 tarball을 가져와 임시 디렉토리에 저장한다.
  • gunzip-maybe: tarball을 압축 해제한다.
  • tar-fs: tarball에서 /docs 디렉토리만 스트리밍하고, 파일을 필터링 및 처리한다. 이 과정에서 through2를 사용해 Jekyll 사이트와 잘 동작하도록 조정한다.

테스트는 모든 부분이 예상대로 동작하는지 확인하는 데 도움을 준다.

Jekyll

Electron 웹사이트는 Jekyll로 구축되어 있으며, 문서화를 위해 컬렉션(Collections) 기능을 활용한다. 이 구조는 다음과 같다:

electron.atom.io
└── _docs
├── latest
├── v0.27.0
├── v0.26.0
├── so on
└── so forth

Front matter

Jekyll이 각 페이지를 렌더링하려면 최소한 빈 front matter가 필요하다. 우리는 모든 페이지에서 front matter를 활용할 것이므로, /docs 디렉토리를 스트리밍하는 동안 파일이 README.md인지 확인한다. README.md 파일인 경우 하나의 front matter 설정을 받고, 마크다운 확장자를 가진 다른 파일인 경우 약간 다른 front matter를 받는다.

각 페이지는 다음과 같은 front matter 변수 세트를 받는다:

---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

README.md는 추가적으로 permalink를 받아 URL이 /readme/와 같은 어색한 형태가 아닌 index.html이라는 공통 루트를 가지도록 한다.

permalink: /docs/v0.27.0/index.html

설정과 리다이렉트

사이트의 _config.yml 파일에서는 문서를 가져올 때 --latest 플래그를 사용할 때마다 latest_version 변수가 설정된다. 또한 사이트에 추가된 모든 버전 목록과 전체 문서 컬렉션에 대해 원하는 고정 링크도 함께 추가한다.

latest_version: v0.27.0
available_versions:
- v0.27.0
collections:
docs: { output: true, permalink: '/docs/:path/' }

사이트 루트에 있는 latest.md 파일은 이 프런트 매터만 포함하고 있으며, 이를 통해 사용자는 특정 최신 버전 번호를 사용하지 않고도 electron.atom.io/docs/latest URL을 방문해 최신 버전 문서의 인덱스(즉, README)를 볼 수 있다(물론 최신 버전 번호를 직접 사용해도 된다).

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

레이아웃

docs.html 레이아웃 템플릿에서는 조건문을 사용해 헤더와 브레드크럼브에 정보를 표시하거나 숨긴다.

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
{{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

사용 가능한 버전을 보여주는 페이지를 만들려면 사이트 루트에 있는 versions.md 파일에서 설정 파일의 리스트를 순회한다. 이 페이지에는 /docs/라는 고정 링크를 부여한다.

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

이 기술적인 내용이 흥미로웠기를 바란다! Jekyll을 사용해 문서 사이트를 만드는 방법에 대해 더 알고 싶다면, GitHub의 문서 팀이 Jekyll로 GitHub 문서를 게시하는 방법을 확인해 보자.

Atom Shell is now Electron

· 3 min read

Atom Shell은 이제 Electron으로 이름이 변경되었다. Electron에 대한 더 많은 정보와 사람들이 이를 통해 무엇을 만들고 있는지 알고 싶다면 새로운 홈페이지 electronjs.org를 방문해 보자.


electron

Electron은 원래 Atom 에디터를 위해 개발된 크로스 플랫폼 애플리케이션 셸로, Chromium과 Node.js의 이벤트 루프 통합 및 네이티브 API를 처리하기 위해 만들어졌다.

시작할 당시 우리의 목표는 단순히 텍스트 에디터의 요구사항을 지원하는 것만이 아니었다. 웹 기술을 사용해 네이티브 기능을 모두 갖춘 크로스 플랫폼 데스크톱 앱을 쉽게 만들 수 있는 직관적인 프레임워크를 만드는 것도 목표였다.

2년 동안 Electron은 크게 성장했다. 이제는 자동 앱 업데이트, Windows 설치 프로그램, 크래시 보고, 알림 등 다양한 네이티브 앱 기능을 JavaScript API를 통해 제공한다. 그리고 더 많은 기능을 개발 중이다. Atom에서 더 많은 라이브러리를 추출해 웹 기술로 네이티브 앱을 만드는 과정을 최대한 간단하게 만들 계획이다.

지금까지 개인 개발자, 초기 스타트업, 대기업 등 다양한 사용자가 Electron을 기반으로 앱을 만들었다. 채팅 앱, 데이터베이스 탐색기, 지도 디자이너, 협업 디자인 도구, 모바일 프로토타이핑 앱 등 다양한 종류의 앱이 개발되었다.

새로운 electronjs.org를 방문해 사람들이 Electron으로 만든 앱들을 확인하거나 문서를 참고해 더 많은 것을 만들어 보자.

이미 Electron을 사용해 앱을 만들기 시작했다면, 여러분이 만드는 앱에 대해 이야기 나누고 싶다. info@electronjs.org로 이메일을 보내 자세한 내용을 알려주자. 또한 새로운 @ElectronJS 트위터 계정을 팔로우해 프로젝트와 연결을 유지하자.

💙 🔌