Skip to main content

Electron 0.37의 새로운 기능

· 7 min read
zeke
zeke

Electron 0.37이 최근 릴리스되었으며, Chrome 47에서 Chrome 49로의 주요 업그레이드와 여러 새로운 코어 API가 포함되었다. 이번 최신 릴리스는 Chrome 48과 Chrome 49에서 제공된 모든 새로운 기능을 가져온다. 여기에는 CSS 커스텀 프로퍼티, ES6 지원 강화, KeyboardEvent 개선, Promise 개선, 그리고 이제 Electron 앱에서 사용할 수 있는 다양한 새로운 기능이 포함된다.

새로운 기능​

CSS 커스텀 속성​

Sass나 Less 같은 전처리 언어를 사용해 본 적이 있다면, 색상 스키마나 레이아웃 같은 재사용 가능한 값을 정의할 수 있는 변수에 익숙할 것이다. 변수는 스타일시트를 DRY(Don't Repeat Yourself)하게 유지하고 더 유지보수하기 쉽게 만든다.

CSS 커스텀 속성은 전처리 변수와 비슷하게 재사용 가능하지만, 더 강력하고 유연한 독특한 특징이 있다: 자바스크립트로 조작할 수 있다. 이 미묘하지만 강력한 기능은 CSS의 하드웨어 가속을 활용하면서도 시각적 인터페이스를 동적으로 변경할 수 있게 해준다. 또한 프론트엔드 코드와 스타일시트 간의 코드 중복을 줄이는 데도 도움이 된다.

CSS 커스텀 속성에 대한 더 자세한 정보는 MDN 문서와 Google Chrome 데모를 참고하면 된다.

CSS 변수 활용 예제​

앱에서 실시간으로 조정할 수 있는 간단한 변수 예제를 살펴보자.

:root {
  --awesome-color: #a5ecfa;
}

body {
  background-color: var(--awesome-color);
}

변수 값은 자바스크립트에서 직접 가져오거나 변경할 수 있다:

// 변수 값 '#A5ECFA'를 가져옴
let color = window
  .getComputedStyle(document.body)
  .getPropertyValue('--awesome-color');

// 변수 값을 'orange'로 설정
document.body.style.setProperty('--awesome-color', 'orange');

변수 값은 개발 도구의 스타일 섹션에서도 편집할 수 있어 빠르게 피드백을 받고 조정할 수 있다:

스타일 탭의 CSS 속성

KeyboardEvent.code 속성​

Chrome 48에서는 KeyboardEvent 이벤트에 새로운 code 속성을 추가했다. 이 속성은 운영체제의 키보드 레이아웃과 상관없이 물리적으로 눌린 키를 나타낸다. 이를 통해 여러 기기와 설정에서 일관된 커스텀 키보드 단축키를 구현할 수 있다.

window.addEventListener('keydown', function (event) {
  console.log(`${event.code} was pressed.`);
});

이 예제를 통해 실제 동작을 확인할 수 있다.

Promise 거부 이벤트​

Chrome 49에서는 거부된 Promise가 처리되지 않았을 때 이를 알려주는 두 가지 새로운 window 이벤트를 추가했다.

window.addEventListener('unhandledrejection', function (event) {
  console.log('거부된 Promise가 처리되지 않았습니다', event.promise, event.reason);
});

window.addEventListener('rejectionhandled', function (event) {
  console.log('거부된 Promise가 처리되었습니다', event.promise, event.reason);
});

실제 동작을 확인하려면 이 예제를 참고하라.

V8 엔진의 ES2015 업데이트​

현재 Electron에 포함된 V8 버전은 ES2015 기능의 91%를 지원한다. 플래그나 사전 컴파일러 없이 바로 사용할 수 있는 몇 가지 흥미로운 기능을 소개한다:

기본 매개변수​

function multiply(x, y = 1) {
  return x * y;
}

multiply(5); // 5

구조 분해 할당​

Chrome 49부터 구조 분해 할당이 추가되어 변수와 함수 인자를 더 쉽게 할당할 수 있게 되었다.

이 기능 덕분에 Electron에서의 요구 사항을 더 깔끔하고 간결하게 할당할 수 있게 되었다:

브라우저 프로세스 요구 사항​
const { app, BrowserWindow, Menu } = require('electron');
렌더러 프로세스 요구 사항​
const { dialog, Tray } = require('electron').remote;
다른 예제들​
// 배열 구조 분해 할당에서 두 번째 요소 건너뛰기
const [first, , last] = findAll();

// 함수 매개변수 구조 분해 할당
function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(`${displayName} is ${name}`);
}

let user = {
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe',
  },
};
whois(user); // "jdoe is John"

// 객체 구조 분해 할당
let { name, avatar } = getUser();

새로운 Electron API​

아래는 몇 가지 새로운 Electron API다. Electron 릴리스 노트에서 각 API에 대한 자세한 내용을 확인할 수 있다.

BrowserWindow의 show와 hide 이벤트​

이 이벤트들은 윈도우가 보여지거나 숨겨질 때 발생한다.

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('show', function () {
  console.log('Window was shown');
});
window.on('hide', function () {
  console.log('Window was hidden');
});

app의 platform-theme-changed 이벤트 (OS X)​

이 이벤트는 시스템의 다크 모드 테마가 전환될 때 발생한다.

const { app } = require('electron');

app.on('platform-theme-changed', function () {
  console.log(`Platform theme changed. In dark mode? ${app.isDarkMode()}`);
});

app.isDarkMode() for OS X​

이 메서드는 시스템이 다크 모드 상태일 때 true를 반환하고, 그렇지 않으면 false를 반환한다.

OS X용 scroll-touch-begin 및 scroll-touch-end 이벤트를 BrowserWindow에 추가​

이 이벤트들은 스크롤 휠 이벤트 단계가 시작되거나 끝날 때 발생한다.

const { BrowserWindow } = require('electron');

let window = new BrowserWindow({ width: 500, height: 500 });
window.on('scroll-touch-begin', function () {
  console.log('Scroll touch started');
});
window.on('scroll-touch-end', function () {
  console.log('Scroll touch ended');
});