Electron 8.0 이 릴리즈 되었다. 주요 엔진들의 업데이트와 함께 많은 개발자들이 지속적으로 요청 했고 기존에 프레임웍 레벨에서 개별적으로 구현해야 했던 크롬의 스펠체크 기능이 추가 되었다. 자세한 업데이트는 원문 블로그를 참고하자.

#Upgrades

• Chromium 이 80.0.3987.86 로 업그레이드, Optional chaining 을 포함한 최신 자바스크립트 사용 가능 하고 웹워커를 모듈로 로딩 할 수 있다
• V8 이 7.8 로 업그레이드 되어서 스크립트 preloading, Faster object destructuring 등 퍼포먼스 향상을 기대 할 수 있다
• Node.js 가 12.13.0 로 업그레이드

#Changes

• IPC 매커니즘이 Structured Clone Algorithm 을 사용.
• 스펠체크 기능이 내장 되었다

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 스펠체크 활성화
      spellcheck: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // webContents.session 에 검사하고 싶은 언어 목록 셋팅
  const ses = mainWindow.webContents.session;
  ses.setSpellCheckerLanguages(['en-US']);
  mainWindow.loadFile('index.html')
}
Copy

• 그 외 추가 된 API 들

New in Chrome 79 의 내용을 번역, 요약, 정리 한 것이다.

#Maskable Icons

Android O 로 넘어가면서 Progressive Web App 아이콘이 원형에 맞게 이쁘게 보이지 않는 경우가 생겼는데 이를 해결 하기 위해서 Chrome 79 에서는 Manifest 의 Icon 값에 새로운 프로퍼티 purpose 를 사용 할 수 있다.

{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}
Copy

maskable 값을 셋팅하면 투명 배경이나 이미지의 중앙을 중심으로 80% 정도의 세이프 존 영역을 보여준다. purpose 는 아이콘이 어플리케이션에서 사용 될 수 있는 badge, 와 any 를 제공한다.

#WebXR Device API

WebXR 은 웹에서도 VR 경험을 사용 할 수 있도록 도와준다. 이번 크롬 79 의 새로운 Experimental 기능이기 때문에 Origin Trial 프로그램을 통해서 API 를 사용 할 수 있다. 신청하면 origin-trial 을 위한 토큰을 발급 받아서 사용한다. 다음은 immersive-vr 을 세션 생성을 요청하는 예제 코드다.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-vr')
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked)
    xrButton.textContent = 'Enter VR'
    xrButton.disabled = false
  }
}
Copy

#Wake Lock API

Wake Lock API 를 사용하여 이제 웹앱/페이지에서도 스크린 세이버와 같이 스크린이 꺼지는 것을 막을 수 있다.

// WakeLockSentinel 오브젝트를 저장한다.
let wakeLock = null
// Wake Lock 요청
const requestWakeLock = async () => {
  try {
    // Wake Lock 을 요청하여 WakeLockSentinel 리턴 받는다/
    wakeLock = await navigator.wakeLock.request('screen')
    // Wake Lock 이 릴리즈 되었을 때 처리할 이벤트
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released')
    })
    console.log('Wake Lock is active')
  } catch (err) {
    console.error(`${err.name}, ${err.message}`)
  }
}
// Wake Lock 릴리즈
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return
  }
  try {
    // wakeLock.request 에서 리턴받은 WakeLockSentinel 를 통해서
    // 락킹의 해제한다.
    await wakeLock.release()
    wakeLock = null
  } catch (err) {
    console.error(`${err.name}, ${err.message}`)
  }
}
Copy

#rendersubtree attribute

rendersubtree 속성을 사용하면 해당 DOM 의 서브-트리의 렌더링의 여부와 히팅-테스트를 조절할 수 있다. 예를 들면 스크롤을 하고 있을 때 리스트 아이템의 DOM 을 렌더링하지 않게 할 수 있다. display:none 과 비슷하지만 브라우저의 Find 등의 동작이나 히팅-테스트여부등이 다른 점이다. 더 자세한 내용은 Display locking 스펙에 설명이 있다. 아래 예제에서 보면 div 의 서브-트리는 바로 렌더링 되지 않는다 이후 스크립트로 rendersubtree 속성을 초기화 하면 그때 렌더링 된다. 다양한 사용예제들이 있으니 참고하자.

만약 의도한 대로 동작하지 않는다면 chrome://flags 에서 #enable-display-locking 를 확인하자

<div id="target" rendersubtree="invisible skip-activation">
  ...content...
</div>
<script>
  target.setAttribute('rendersubtree', '')
</script>
Copy

V8 이 V8.0 을 릴리즈 했다. V8 이름 덕분에 여러가지 버전명이 예상 되었지만 V8.0 으로 릴리즈 되었다. 특별하게 추가 된 기능이나 컴파일러 소식은 없지만 퍼포먼스와 메모리 관리에 향상이 있었다.

#Pointer compression

V8 의 힙 메모리에서 대부분을 차지하는 Tagged value 포인터의 비트를 절약하는 방법을 찾아내어 힙메모리가 평균 40% 정도 절약 되었다. 이에 따라서 페이스북, CNN 그리고 구글 맵스와 같은 사이트의 수행 시간이 각각 모바일, 테스크탑에서 4~10% 가량 줄었고 가비지 콜렉팅의 시간이 10% ~ 20% 가량 줄었다.

#Optimizing higher-order builtins

기존에 사용자-정의 함수으로 일반 적으로 호출 되던 higher-order builtins 함수가 아래와 같다면,

const charCodeAt = Function.prototype.call.bind(String.prototype.charCodeAt)
charCodeAt(string, 8)
Copy

TurboFan 의 최적화를 통해서 실제 내장 함수를 호출 하도록 변경되어 직접 실제 내장 함수를 호출하는 것과 같은 성능을 보여준다. Function.prototype.apply, Reflect.apply 그리고 Array.prototype.map 등이 영향을 받는다

string.charCodeAt(8)
Copy

#Option chaining

체이닝 프로퍼티 접근 시에 아래처럼 매번 값의 null 또는 undefined 를 검사하거나 에러를 무시하고 접근 했다면

// Error prone-version, could throw.
const nameLength = db.user.name.length
// Less error-prone, but harder to read.
let nameLength
if (db && db.user && db.user.name) nameLength = db.user.name.length
Copy

Optional chaining 연산자 ?. 는 값의 검사와 할당을 동시에 할 수 있다. 만약 값이 기대한 값을 가지고 있지 않다면 아래 표현은 undefined 로 평가 된다.

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length
Copy

#Nullish coalescing

Nullish coalescing 기본값을 다룰 수 있는 새로운 이항 연산자가 추가. 기존에 || 과 용법은 비슷하지만 Nullish (null or undefined) 에만 false 로 판단 된다. 아래 예제를 참고하자

false ?? true // => false
0 ?? 1 // => 0
'' ?? 'default' // => ''
null ?? [] // => []
undefined ?? [] // => []
Copy

Electron 7.0 이 릴리즈 되었다. 엔진들의 업데이트와 함께 빠른 IPC 를 위한 새로운 API 를 추가 하였고 OS 의 시스템 컬러 테마를 사용하여 타크, 라이트 모드 테마를 이용할 수 있게 되었다. 자세한 업데이트는 원문 블로그를 참고하자.

#Upgrades

• Chromium 이 78.0.2905.1 로 업그레이드 CSS Properties and Values API 와 서비스 워커 자동 업데이트를 사용할 수 있다
• V8 이 7.8 로 업그레이드 되어 Script streaming 이나 WebAssembly 의 성능향상을 기대
• Node.js 가 12.8.1 로 업그레이드 변경 사항은 Node.js 한국 커뮤니티 문서를 참고

#Changes

• Windows on Arm(64bit) 릴리즈가 추가
• 새로운 비동기적으로 형태의 IPC API ipcRenderer.invoke 와 ipcMain.handle 추가, Renderer 의 영향이 없이 데이터를 비동기로 주고 받을 수 있다.

ipcRenderer.invoke('some-name', someArgument).then(result => {
  // 비동기로 리턴 된 결과 값 받음
})
// Main process
ipcMain.handle('some-name', async (event, someArgument) => {
  // 비동기로 작업 완료 후 리턴
  const result = await doSomeWork(someArgument)
  return result
})
Copy

• nativeTheme 가 추가되어 OS 의 다크모드등을 셋팅하거나 현재 시스템의 테마 상태를 알 수 있다.

const { app, BrowserWindow, nativeTheme } = require('electron')
const path = require('path')
function createWindow() {
  nativeTheme.themeSource = 'dark'
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
    backgroundColor: nativeTheme.shouldUseDarkColors ? '#efefef' : '#000000'
  })
  mainWindow.loadFile('index.html')
  mainWindow.on('closed', function() {
    mainWindow = null
  })
}
app.on('ready', createWindow)
Copy