Electron 팀은 Electron 3의 첫 번째 안정 버전을 출시하게 되어 기쁘게 생각합니다. 이제 electronjs.org에서 또는 npm install electron@latest 명령어를 통해 다운로드할 수 있습니다. 이번 버전은 다양한 업그레이드, 수정 사항, 그리고 새로운 기능으로 가득 차 있습니다. 여러분이 이 기능들을 활용해 무엇을 만들어 낼지 기대가 큽니다. 아래는 이번 릴리스에 대한 상세 정보입니다. 여러분의 피드백을 환영합니다.

릴리스 프로세스​

v3.0.0 개발을 진행하면서, 우리는 점진적인 베타 릴리스에 대한 피드백 프로세스를 공식화하여 안정적인 릴리스 기준을 더 실질적으로 정의하려고 노력했다. 앱 피드백 프로그램 파트너들이 없었다면 v3.0.0은 불가능했을 것이다. 이 파트너들은 베타 주기 동안 초기 테스트와 피드백을 제공했다. Atlassian, Atom, Microsoft Teams, Oculus, OpenFin, Slack, Symphony, VS Code 및 다른 프로그램 멤버들의 노력에 감사한다. 앞으로의 베타 테스트에 참여하고 싶다면 info@electronjs.org로 메일을 보내주길 바란다.

변경 사항 / 새로운 기능​

Electron의 핵심 툴체인에 대한 주요 업데이트가 이루어졌다. Chrome v66.0.3359.181, Node v10.2.0, 그리고 V8 v6.6.346.23 버전으로 업그레이드됐다.

• [#12656] 기능 추가: app.isPackaged
• [#12652] 기능 추가: app.whenReady()
• [#13183] 기능 추가: process.getHeapStatistics()
• [#12485] 기능 추가: win.moveTop()을 통해 윈도우의 z-order를 최상위로 이동
• [#13110] 기능 추가: TextField 및 Button API
• [#13068] 기능 추가: 동적 로깅 제어를 위한 netLog API
• [#13539] 기능 추가: 샌드박스 렌더러에서 webview 사용 가능
• [#14118] 기능 추가: fs.readSync가 대용량 파일에서도 작동
• [#14031] 기능 추가: fs.realpathSync.native 및 fs.realpath.native를 사용할 수 있는 node fs 래퍼 추가

주요 API 변경 사항​

• [#12362] 기능: 메뉴 아이템 순서 제어 업데이트
• [#13050] 리팩토링: 문서화된 사용 중단 API 제거
  • 자세한 내용은 문서 참고
• [#12477] 리팩토링: did-get-response-details 및 did-get-redirect-request 이벤트 제거
• [#12655] 기능: 드래그/드롭 시 기본적으로 네비게이션 비활성화
• [#12993] 기능: electron npm 모듈 사용을 위해 Node v4.x 이상 필요
• [#12008 #12140 #12503 #12514 #12584 #12596 #12637 #12660 #12696 #12716 #12750 #12787 #12858] 리팩토링: NativeWindow
• [#11968] 리팩토링: menu.popup()
• [#8953] 기능: ipcRenderer.sendSync 결과 전송 시 더 이상 JSON 사용하지 않음
• [#13039] 기능: URL 뒤에 오는 커맨드라인 인수 기본적으로 무시
• [#12004] 리팩토링: api::Window를 api::BrowserWindow로 이름 변경
• [#12679] 기능: 시각적 줌 기능 기본적으로 비활성화
• [#12408] 리팩토링: 앱 커맨드 media-play_pause를 media-play-pause로 이름 변경

macOS​

• [#12093] feat: 워크스페이스 알림 지원 추가
• [#12496] feat: 트레이 더블 클릭 이벤트 무시 기능 추가 (tray.setIgnoreDoubleClickEvents(ignore))
• [#12281] feat: macOS에서 마우스 포워딩 기능 추가
• [#12714] feat: 화면 잠금 / 잠금 해제 이벤트 추가

Windows​

• [#12879] 기능: DIP와 스크린 좌표 간 변환 기능 추가

주의: 이 버전을 실행한 후 이전 버전의 Electron으로 전환하려면 사용자 데이터 디렉터리를 삭제해야 한다. 그렇지 않으면 이전 버전이 충돌할 수 있다. 사용자 데이터 디렉터리는 console.log(app.getPath("userData"))를 실행하거나 문서를 참조하여 확인할 수 있다.

버그 수정​

• [#13397] 수정: fs.statSyncNoException에서 예외가 발생하는 문제 해결
• [#13476, #13452] 수정: jquery를 사용하는 사이트 로드 시 크래시 문제 해결
• [#14092] 수정: net::ClientSocketHandle 소멸자에서 발생하는 크래시 문제 해결
• [#14453] 수정: 다음 틱(tick)이 아닌 즉시 포커스 변경 알림 전송

macOS​

• [#13220] 수정: <input file="type"> 파일 열기 대화상자에서 번들을 선택할 수 있는 문제 해결
• [#12404] 수정: 비동기 대화상자 사용 시 메인 프로세스가 블로킹되는 문제 해결
• [#12043] 수정: 컨텍스트 메뉴 클릭 콜백 문제 해결
• [#12527] 수정: 터치바 아이템 재사용 시 이벤트 누수 문제 해결
• [#12352] 수정: 트레이 제목 충돌 문제 해결
• [#12327] 수정: 드래그 불가능한 영역 문제 해결
• [#12809] 수정: 메뉴가 열려 있는 동안 업데이트되지 않도록 수정
• [#13162] 수정: 트레이 아이콘 경계값이 음수를 허용하지 않는 문제 해결
• [#13085] 수정: 트레이 제목이 강조될 때 색상이 반전되지 않는 문제 해결
• [#12196] 수정: enable_run_as_node==false일 때 macOS 빌드 문제 해결
• [#12157] 수정: 투명 효과가 적용된 프레임리스 윈도우에서 발생하는 추가 문제 해결
• [#13326] 수정: app.removeAsDefaultProtocolClient 호출 후 macOS 프로토콜을 none으로 설정하도록 수정
• [#13530] 수정: MAS 빌드에서 개인 API의 잘못된 사용 문제 해결
• [#13517] 수정: tray.setContextMenu 충돌 문제 해결
• [#14205] 수정: defaultId가 설정된 경우에도 ESC 키를 눌러 대화상자를 닫을 수 있도록 수정

Linux​

• [#12507] 수정: 오프스크린 윈도우에서 BrowserWindow.focus() 문제 해결

기타 참고 사항​

• PDF 뷰어는 현재 작동하지 않지만, 곧 다시 정상적으로 사용할 수 있도록 작업 중이다.
• TextField와 Button API는 실험적 기능이므로 기본적으로 비활성화되어 있다.
  • enable_view_api 빌드 플래그를 사용해 활성화할 수 있다.

다음 단계

Electron 팀은 Chromium, Node, V8의 개발 주기와 궁극적으로 동일한 속도를 유지하기 위해 보다 빠르고 원활한 업그레이드 프로세스를 정의하는 작업을 계속 진행하고 있다.

Electron은 이제 자체 빌드를 위해 GN을 사용한다. 그 이유에 대해 논의해 보자.

Electron이 처음 출시된 2013년 당시, Chromium의 빌드 설정은 GYP("Generate Your Projects"의 약자)로 작성되었다.

2014년에 Chromium 프로젝트는 GN("Generate Ninja"의 약자)이라는 새로운 빌드 설정 도구를 도입했다. Chromium의 빌드 파일은 GN으로 마이그레이션되었고, GYP는 소스 코드에서 제거되었다.

Electron은 역사적으로 메인 [Electron 코드]와 Chromium의 'content' 서브모듈을 감싸는 libchromiumcontent 부분을 분리해 유지했다. Electron은 GYP를 계속 사용한 반면, libchromiumcontent는 Chromium의 일부로서 Chromium과 함께 GN으로 전환했다.

서로 맞물리지 않는 기어처럼, 두 빌드 시스템을 함께 사용하는 데 마찰이 있었다. 컴파일러 플래그와 #defines를 Chromium, Node, V8, Electron 간에 꼼꼼하게 동기화해야 했기 때문에 호환성을 유지하는 일은 오류가 발생하기 쉬웠다.

이 문제를 해결하기 위해 Electron 팀은 모든 것을 GN으로 옮기기 위해 노력했다. 오늘날, Electron에서 마지막 GYP 코드를 제거한 커밋이 마스터 브랜치에 반영되었다.

이 내용이 여러분에게 주는 의미

Electron 자체에 기여하는 경우, master 브랜치나 4.0.0 버전에서 Electron을 체크아웃하고 빌드하는 과정은 3.0.0 및 이전 버전과 크게 다릅니다. 자세한 내용은 GN 빌드 가이드를 참고하세요.

Electron으로 앱을 개발하는 경우, 새로운 Electron 4.0.0-nightly에서 몇 가지 사소한 변경 사항을 발견할 수 있습니다. 하지만 대부분의 경우, 빌드 시스템의 변경은 여러분에게 완전히 투명하게 작동할 것입니다.

이 변경이 Electron에 미치는 영향

GN은 GYP보다 빠르고, 파일의 가독성과 유지보수성이 더 뛰어나다. 또한 단일 빌드 설정 시스템을 사용하면 Electron을 새로운 Chromium 버전으로 업그레이드하는 데 필요한 작업을 줄일 수 있다.

• 이 변경은 Electron 4.0.0 개발에 상당히 도움이 되었다. Chromium 67에서 MSVC 지원이 중단되고 Windows에서 Clang으로 빌드하도록 전환되었기 때문이다. GN 빌드를 사용하면 Chromium의 모든 컴파일러 명령을 직접 상속받으므로, Windows에서 Clang 빌드를 별도의 작업 없이 사용할 수 있었다.

• 또한 이 변경으로 Electron, Chromium, Node 간의 통합 빌드에서 BoringSSL을 사용하기가 더 쉬워졌다. 이전에는 문제가 있었던 부분이다.

Electron 버전(3.0.0-beta.6, 2.0.7, 1.8.7, 1.7.15)에서 중첩된 자식 윈도우를 열 수 있는 기능을 가진 앱에 원격 코드 실행 취약점이 발견되었다. 이 취약점은 CVE 식별자 CVE-2018-15685로 지정되었다.

영향을 받는 플랫폼​

다음과 같은 경우 영향을 받는다:

1. 샌드박스 환경을 포함해 원격 사용자 콘텐츠를 임베드하는 경우
2. XSS 취약점이 있는 사용자 입력을 허용하는 경우

상세 설명

iframe 내부에서 사용자 코드가 실행되거나 iframe을 생성할 수 있는 경우 영향을 받는다. XSS 취약점의 가능성을 고려할 때 대부분의 애플리케이션이 이 경우에 취약하다고 볼 수 있다.

또한 nativeWindowOpen: true 또는 sandbox: true 옵션을 사용해 윈도우를 여는 경우에도 영향을 받는다. 이 취약점 역시 애플리케이션에 XSS 취약점이 존재해야 하지만, 해당 옵션을 사용한다면 아래의 완화 조치 중 하나를 적용해야 한다.

취약점 완화 방법​

이 취약점을 해결한 새로운 Electron 버전을 출시했다: 3.0.0-beta.7, 2.0.8, 1.8.8, 그리고 1.7.16. 모든 Electron 개발자가 가능한 한 빨리 최신 안정 버전으로 앱을 업데이트할 것을 강력히 권장한다.

만약 어떤 이유로 Electron 버전을 업그레이드할 수 없는 경우, 모든 webContents에 대해 new-window 이벤트에 event.preventDefault()를 전역적으로 호출하여 앱을 보호할 수 있다. window.open이나 자식 윈도우를 전혀 사용하지 않는다면, 이 방법 역시 유효한 완화책이 될 수 있다.

mainWindow.webContents.on('new-window', (e) => e.preventDefault());

만약 자식 윈도우가 손자 윈도우를 생성하는 기능에 의존하고 있다면, 다음과 같은 코드를 최상위 윈도우에 적용하는 세 번째 완화 전략을 사용할 수 있다:

const enforceInheritance = (topWebContents) => {
  const handle = (webContents) => {
    webContents.on(
      'new-window',
      (event, url, frameName, disposition, options) => {
        if (!options.webPreferences) {
          options.webPreferences = {};
        }
        Object.assign(
          options.webPreferences,
          topWebContents.getLastWebPreferences(),
        );
        if (options.webContents) {
          handle(options.webContents);
        }
      },
    );
  };
  handle(topWebContents);
};

enforceInheritance(mainWindow.webContents);

이 코드는 최상위 윈도우의 webPreferences가 모든 자식 윈도우에 무한히 깊이까지 수동으로 적용되도록 강제한다.

추가 정보​

이 취약점은 Contrast Security의 Matt Austin이 Electron 프로젝트에 책임감 있게 보고했다. Electron 애플리케이션의 보안을 유지하기 위한 모범 사례를 더 알고 싶다면 보안 튜토리얼을 참고한다.

Electron에서 발견한 취약점을 보고하려면 security@electronjs.org로 이메일을 보낸다.

Electron 웹사이트는 이제 API 문서, 튜토리얼, Electron 관련 npm 패키지 등을 즉각적으로 검색할 수 있는 새로운 검색 엔진을 제공한다.

Electron과 같은 새로운 기술이나 프레임워크를 배우는 것은 부담스러울 수 있다. [빠른 시작] 단계를 넘어서면, 최선의 방법을 배우거나 적절한 API를 찾거나 꿈꾸던 앱을 만들 수 있는 도구를 발견하는 것이 어려울 수 있다. 우리는 Electron 웹사이트가 더 빠르고 쉽게 앱을 만들 수 있는 리소스를 찾는 데 더 나은 도구가 되기를 원한다.

electronjs.org의 어떤 페이지를 방문해도 페이지 상단에 새로운 검색 입력창을 찾을 수 있다.

검색 엔진​

웹사이트에 검색 기능을 추가하려고 처음 계획했을 때, 우리는 GraphQL을 백엔드로 사용해 자체 검색 엔진을 구축했다. GraphQL은 작업하기 재미있었고, 검색 엔진도 꽤 성능이 좋았다. 하지만 우리는 검색 엔진을 만드는 일이 결코 간단하지 않다는 사실을 금방 깨달았다. 여러 단어 검색이나 오타 감지 같은 기능은 제대로 구현하려면 상당한 노력이 필요했다. 바퀴를 다시 발명하지 않고 기존 검색 솔루션을 사용하기로 결정했다. 우리가 선택한 것은 Algolia다.

Algolia는 호스팅 검색 서비스로, React, Vue, Bootstrap, Yarn 등 유명 오픈소스 프로젝트에서 널리 사용되고 있다. 여러 다른 프로젝트에서도 검색 엔진으로 채택하고 있다.

Electron 프로젝트에 Algolia가 적합했던 몇 가지 특징은 다음과 같다:

• InstantSearch.js는 타이핑하는 즉시 결과를 보여주며, 보통 1ms 내에 결과가 나타난다.
• 오타 허용 기능은 widnow처럼 잘못 입력해도 여전히 결과를 제공한다.
• 고급 쿼리 문법은 "정확한 따옴표 일치"와 -제외 기능을 지원한다.
• API 클라이언트는 오픈소스이며 문서화가 잘 되어 있다.
• 분석 기능은 사용자가 가장 많이 검색하는 내용과 찾지 못한 내용을 알려준다. 이를 통해 Electron 문서를 어떻게 개선할지 유용한 통찰을 얻을 수 있다.
• Algolia는 오픈소스 프로젝트에 무료로 제공된다.

API 문서​

때로는 무엇을 해야 할지는 알지만, 정확히 어떻게 해야 할지 모를 때가 있다. Electron에는 750개가 넘는 API 메서드, 이벤트, 프로퍼티가 있다. 사람이 이 모든 것을 쉽게 기억하기는 어렵지만, 컴퓨터는 이런 일에 능숙하다. Electron의 JSON API 문서를 사용해 이 모든 데이터를 Algolia에 인덱싱했기 때문에, 이제 원하는 API를 쉽게 찾을 수 있다.

예를 들어, 윈도우 크기를 조정하려면 resize를 검색하면 바로 필요한 메서드로 이동할 수 있다.

튜토리얼​

Electron은 API 문서를 보완하기 위해 지속적으로 튜토리얼 컬렉션을 확장하고 있다. 이제 특정 주제에 대한 튜토리얼을 관련 API 문서와 함께 더 쉽게 찾을 수 있다.

보안 관련 모범 사례를 찾고 있는가? security를 검색해 보자.

npm 패키지​

현재 npm 레지스트리에는 70만 개가 넘는 패키지가 등록되어 있다. 필요한 패키지를 찾는 것이 항상 쉬운 일은 아니다. 이러한 모듈을 더 쉽게 발견할 수 있도록, 우리는 Electron과 함께 사용하기 위해 특별히 제작된 3400개 이상의 모듈을 모아 electron-npm-packages라는 컬렉션을 만들었다.

Libraries.io의 팀은 코드, 커뮤니티, 문서, 사용량 등 다양한 지표를 기반으로 소프트웨어 프로젝트에 점수를 매기는 시스템인 SourceRank를 개발했다. 우리는 npm 레지스트리에 있는 모든 모듈의 점수를 포함한 sourceranks 모듈을 만들었고, 이 점수를 사용해 패키지 검색 결과를 정렬한다.

Electron의 내장 IPC 모듈 대신 사용할 수 있는 대안을 찾고 있다면, is:package ipc로 검색해 보자.

Electron 앱​

Algolia로 데이터를 쉽게 인덱싱할 수 있기 때문에, electron/apps에 있는 기존 앱 목록을 추가했다.

music이나 homebrew로 검색해 보자.

검색 결과 필터링​

GitHub의 코드 검색을 사용해 본 적이 있다면, extension:js나 user:defunkt와 같은 콜론으로 구분된 키-값 필터를 알고 있을 것이다. 우리는 이 필터링 기법이 매우 강력하다고 생각하기 때문에, Electron의 검색 기능에 is: 키워드를 추가하여 특정 타입의 결과만 표시할 수 있게 했다:

• is:api thumbnail
• is:tutorial security
• is:package ipc
• is:app graphql

키보드 네비게이션​

사람들은 키보드 단축키를 좋아한다! 새로운 검색 기능은 키보드에서 손을 떼지 않고도 사용할 수 있다:

• /를 누르면 검색 입력창에 포커스가 이동한다.
• esc를 누르면 검색 입력창에 포커스가 이동하고 내용이 지워진다.
• down을 누르면 다음 검색 결과로 이동한다.
• up를 누르면 이전 검색 결과로 이동하거나 검색 입력창으로 돌아간다.
• enter를 누르면 검색 결과를 연다.

이 키보드 상호작용을 가능하게 하는 모듈을 오픈소스로 공개했다. 이 모듈은 Algolia InstantSearch와 함께 사용하도록 설계되었지만, 다양한 검색 구현과 호환될 수 있도록 일반화되었다.

여러분의 피드백을 기다립니다​

새로운 검색 도구를 사용하면서 문제를 발견했다면, 여러분의 의견을 들려주세요!

피드백을 제출하는 가장 좋은 방법은 GitHub의 해당 리포지토리에 이슈를 등록하는 것입니다:

• electron/electronjs.org는 Electron 웹사이트입니다. 어디에 이슈를 등록해야 할지 모르겠다면, 여기를 선택하는 것이 가장 좋습니다.
• electron/algolia-indices는 검색 가능한 모든 Electron 데이터가 컴파일되는 곳입니다.
• electron/search-with-your-keyboard는 키보드로 검색 인터페이스를 탐색할 수 있게 해줍니다.
• algolia/instantsearch.js는 타이핑과 동시에 검색을 가능하게 하는 브라우저 측 클라이언트입니다.
• algolia/algoliasearch-client-javascript는 Algolia 서버에 데이터를 업로드하기 위한 Node.js 클라이언트입니다.

감사의 말​

새로운 검색 기능을 구축해 준 Emily Jordan과 Vanessa Yuen에게 특별한 감사를 표한다. 또한 SourceRank 점수를 제공한 Libraries.io와 시작을 도와준 Algolia 팀에게도 감사한다. 🍹

새로운 다국어 지원 Electron 웹사이트가 출시된 이후, 영어권 이외의 개발자들이 Electron 개발 환경을 더 쉽게 접할 수 있도록 노력해왔다.

이번에는 흥미로운 i18n 업데이트 소식을 전한다!

🌐 언어 전환 기능​

많은 사람들이 번역된 문서를 읽을 때 원본 영어 문서와 함께 참조한다는 사실을 알고 있는가? 이렇게 하는 이유는 영어 문서에 익숙해지기 위해서이기도 하고, 국제화된 문서에서 발생할 수 있는 오래되거나 부정확한 번역을 피하기 위해서이다.

영어 문서와의 교차 참조를 더 쉽게 하기 위해, 최근에 Electron 문서에서 특정 섹션을 영어와 현재 웹사이트에서 선택한 언어 사이에서 원활하게 전환할 수 있는 기능을 추가했다. 웹사이트에서 영어가 아닌 언어를 선택한 경우, 언어 전환 버튼이 나타난다.

⚡️ 번역 페이지 빠른 접근​

문서를 읽다가 오타나 잘못된 번역을 발견한 적이 있는가? 이제 더 이상 Crowdin에 로그인하고, 로케일을 선택하고, 수정할 파일을 찾는 등의 번거로운 과정을 거칠 필요가 없다. 대신 해당 문서 하단으로 스크롤하여 "이 문서 번역하기"(또는 해당 언어로 된 동일한 문구)를 클릭하면 된다. 짜잔! 바로 Crowdin 번역 페이지로 이동한다. 이제 번역 마법을 발휘해 보자!

📈 현황 통계​

Electron 문서의 국제화(i18n) 작업을 공개한 이후, 전 세계 Electron 커뮤니티 멤버들의 번역 기여가 크게 증가했다. 현재까지 총 1,719,029개의 문자열이 번역되었으며, 1,066명의 커뮤니티 번역가가 참여했고, 25개 언어로 번역이 진행 중이다.

이 그래프는 현재 속도(작성 시점 기준 최근 14일 동안의 프로젝트 활동을 기반으로 함)를 유지할 경우, 각 언어로 프로젝트를 번역하는 데 필요한 대략적인 시간을 보여준다.

📃 번역가 설문 조사​

Electron 개선을 위해 시간을 내어 도움을 주신 모든 분들께 진심으로 감사드립니다! 번역가 커뮤니티의 노고를 제대로 인정하기 위해, Crowdin과 Github 사용자명 간의 매핑 정보를 수집하는 설문 조사를 마련했습니다.

저희의 훌륭한 번역가 중 한 분이라면, 잠시 시간을 내어 이 설문에 응답해 주시기 바랍니다: https://goo.gl/forms/b46sjdcHmlpV0GKT2.

여러분의 소중한 의견은 Electron 프로젝트의 발전에 큰 도움이 될 것입니다. 감사합니다!

Node의 국제화 프로젝트​

Electron의 i18n 프로젝트가 성공적으로 진행된 것을 보고, Node.js도 새롭게 개편된 i18n 프로젝트를 우리가 사용하는 패턴을 따라가기로 결정했다! 🎉 Node.js i18n 프로젝트는 이제 시작되었고 큰 추진력을 얻었지만, 초기 제안과 그 배경에 대해 여기서 여전히 읽어볼 수 있다.

🔦 기여 가이드​

Electron을 더욱 국제화하기 위해 함께하고 싶다면, 시작하는 데 도움이 될 기여 가이드를 참고하세요. 즐거운 국제화 작업 되세요! 📚

4개월 이상의 개발 기간과 8번의 베타 릴리스를 거쳤으며, 전 세계 여러 앱의 단계적 롤아웃을 통해 테스트를 마친 후, 이제 Electron 2.0.0이 electronjs.org에서 공식 출시되었다.

릴리스 프로세스​

2.0.0 버전부터 Electron의 릴리스는 시맨틱 버저닝을 따르게 된다. 이는 주 버전이 더 자주 올라가며, 일반적으로 Chromium의 주요 업데이트를 포함한다는 의미다. 패치 릴리스는 높은 우선순위의 버그 수정만 포함하기 때문에 더 안정적이어야 한다.

Electron 2.0.0은 또한 주요 릴리스 전에 Electron을 안정화하는 방식의 개선을 의미한다. 여러 대규모 Electron 앱이 2.0.0 베타 버전을 단계적 롤아웃에 포함시켰고, 이는 Electron이 베타 시리즈를 위해 가진 최고의 피드백 루프를 제공했다.

변경 사항 / 새로운 기능​

• Electron의 주요 도구 체인에 대한 주요 업데이트: Chrome 61, Node 8.9.3, V8 6.1.534.41, Linux용 GTK+ 3, 업데이트된 맞춤법 검사기, 그리고 Squirrel이 포함된다.
• MacOS에서 인앱 결제 기능이 지원된다. #11292
• 파일 로드를 위한 새로운 API가 추가되었다. #11565
• 윈도우 활성화/비활성화를 위한 새로운 API가 추가되었다. #11832
• app.setLocale()이라는 새로운 API가 추가되었다. #11469
• IPC 메시지 로깅을 위한 새로운 지원이 추가되었다. #11880
• 새로운 메뉴 이벤트가 추가되었다. #11754
• powerMonitor에 shutdown 이벤트가 추가되었다. #11417
• 여러 BrowserWindows를 단일 프로세스로 모으기 위한 affinity 옵션이 추가되었다. #11501
• saveDialog에서 사용 가능한 확장자를 나열할 수 있는 기능이 추가되었다. #11873
• 추가 알림 액션에 대한 지원이 추가되었다. #11647
• macOS 알림 닫기 버튼의 제목을 설정할 수 있는 기능이 추가되었다. #11654
• menu.popup(window, callback)에 대한 조건부 기능이 추가되었다.
• 터치바 아이템의 메모리 사용이 개선되었다. #12527
• 보안 권장 사항 체크리스트가 개선되었다.
• 앱 범위 보안 스코프 북마크가 추가되었다. #11711
• 렌더러 프로세스에서 임의의 인자를 설정할 수 있는 기능이 추가되었다. #11850
• 포맷 선택기를 위한 액세서리 뷰가 추가되었다. #11873
• 네트워크 대리자 경쟁 조건이 수정되었다. #12053
• Linux에서 mips64el 아키텍처 지원이 중단되었다. Electron은 C++14 도구 체인이 필요하지만, 해당 아키텍처에서는 이 도구 체인이 제공되지 않았다. 향후 다시 지원할 계획이다.

주요 API 변경 사항​

• 더 이상 사용되지 않는 API를 제거했다. 자세한 내용은 deprecated APIs를 참고한다. 변경된 항목은 다음과 같다:
  • menu.popup 시그니처를 변경했다. #11968
  • 더 이상 사용되지 않는 crashReporter.setExtraParameter를 제거했다. #11972
  • 더 이상 사용되지 않는 webContents.setZoomLevelLimits와 webFrame.setZoomLevelLimits를 제거했다. #11974
  • 더 이상 사용되지 않는 clipboard 메서드를 제거했다. #11973
  • tray.setHighlightMode의 불리언 파라미터 지원을 제거했다. #11981

버그 수정​

• webContents.isOffscreen()이 항상 사용 가능하도록 수정. #12531
• DevTools가 독립 창으로 떠 있고 포커스되었을 때 BrowserWindow.getFocusedWindow()가 정상 작동하도록 수정. #12554
• 사전 로드(preload) 경로에 특수 문자가 포함된 경우 샌드박스 렌더에서 사전 로드가 로드되지 않는 문제 해결. #12643
• 문서에 따라 allowRunningInsecureContent의 기본값을 올바르게 수정. #12629
• nativeImage에서 투명도 문제 해결. #12683
• Menu.buildFromTemplate 관련 문제 해결. #12703
• menu.popup 옵션이 객체인지 확인하도록 수정. #12330
• 새로운 프로세스 생성과 컨텍스트 해제 사이의 경쟁 상태 제거. #12361
• BrowserView를 변경할 때 드래그 가능 영역 업데이트. #12370
• 포커스 시 메뉴바 토글 Alt 키 감지 문제 해결. #12235
• 웹뷰에서 잘못된 경고 메시지 출력 문제 해결. #12236
• 부모 윈도우에서 'show' 옵션 상속 문제 해결. #122444
• getLastCrashReport()이 실제로 마지막 크래시 리포트를 반환하도록 보장. #12255
• 네트워크 공유 경로에서 require 사용 문제 해결. #12287
• 컨텍스트 메뉴 클릭 콜백 문제 해결. #12170
• 팝업 메뉴 위치 문제 해결. #12181
• libuv 루프 정리 기능 개선. #11465
• 투명 색상에 대한 hexColorDWORDToRGBA 문제 해결. #11557
• getWebPreferences API 사용 시 널 포인터 역참조 문제 해결. #12245
• 메뉴 대리자에서 순환 참조 문제 해결. #11967
• net.request의 프로토콜 필터링 문제 해결. #11657
• WebFrame.setVisualZoomLevelLimits가 사용자 에이전트 스케일 제약 조건을 설정하도록 수정. #12510
• 웹뷰 옵션에 적절한 기본값 설정. #12292
• 비브란시(vibrancy) 지원 개선. #12157 #12171 #11886
• 단일 픽스처에서 타이밍 문제 해결.
• NotifierSupportsActions()에서 깨진 프로덕션 캐시 문제 해결.
• MenuItem 역할을 camelCase와 호환되도록 수정. #11532
• 터치 바 업데이트 기능 개선. #11812, #11761.
• 불필요한 메뉴 구분자 제거. #11827
• 블루투스 선택기 버그 해결. #11399 닫힘.
• macOS 전체 화면 토글 메뉴 항목 레이블 수정. #11633
• 윈도우 비활성화 시 툴팁 숨김 기능 개선. #11644
• 더 이상 사용되지 않는 웹뷰 메서드 마이그레이션. #11798
• BrowserView에서 열린 윈도우 닫기 문제 해결. #11799
• 블루투스 선택기 버그 해결. #11492
• app.getFileIcon API에서 작업 스케줄러 사용하도록 업데이트. #11595
• 오프스크린 렌더링 시에도 console-message 이벤트가 발생하도록 수정. #11921
• WebContents.downloadURL을 사용한 커스텀 프로토콜 다운로드 문제 해결. #11804
• DevTools가 분리될 때 투명 윈도우가 투명도를 잃는 문제 해결. #11956
• Electron 앱이 재시작 또는 종료를 취소하는 문제 해결. #11625

macOS​

• 터치바 아이템 재사용 시 발생하던 이벤트 누수 문제를 해결했다. #12624
• 다크 모드에서 트레이 하이라이트가 제대로 표시되지 않던 문제를 수정했다. #12398
• 비동기 다이얼로그가 메인 프로세스를 블로킹하던 문제를 해결했다. #12407
• setTitle 트레이 크래시 문제를 수정했다. #12356
• 독 메뉴 설정 시 발생하던 크래시 문제를 해결했다. #12087

Linux​

• 더 나은 Linux 데스크톱 알림 기능. #12229 #12216 #11965 #11980
• 메뉴에 대한 더 나은 GTK+ 테마 지원. #12331
• Linux에서 정상적으로 종료. #12139
• 트레이 아이콘의 기본 툴팁으로 앱 이름 사용. #12393

Windows​

• Visual Studio 2017 지원이 추가되었다. #11656
• 시스템 크래시 핸들러로 예외를 전달하는 문제가 수정되었다. #12259
• 최소화된 윈도우에서 툴팁이 숨겨지는 문제가 해결되었다. #11644
• desktopCapturer가 올바른 화면을 캡처하도록 수정되었다. #11664
• 투명도와 함께 disableHardwareAcceleration이 동작하도록 수정되었다. #11704

다음은 무엇을 준비하고 있나

Electron 팀은 Chromium, Node, v8의 최신 버전을 지원하기 위해 열심히 작업 중이다. 곧 3.0.0-beta.1 버전을 기대해도 좋다!

오늘, 우리는 오픈소스 Electron 앱을 위한 간편한 자동 업데이트를 가능하게 하는 무료 오픈소스 호스팅 업데이트 웹 서비스와 함께 npm 패키지를 공개한다. 이는 앱 개발자들이 배포에 대해 덜 고민하고, 사용자를 위한 고품질 경험 개발에 더 집중할 수 있도록 지원하기 위한 한 걸음이다.

개발 과정을 더 쉽게 만들기​

Electron은 autoUpdater API를 제공한다. 이 API를 사용하면 앱이 원격 엔드포인트에서 메타데이터를 가져와 업데이트를 확인하고, 백그라운드에서 다운로드한 후 자동으로 설치할 수 있다.

하지만 이러한 업데이트 기능을 활성화하는 과정은 많은 Electron 앱 개발자에게 번거로운 작업이었다. 앱 버전 기록 메타데이터를 제공하기 위해 웹 서버를 배포하고 유지 관리해야 했기 때문이다.

이제 더 간단한 자동 앱 업데이트 솔루션을 소개한다. 여러분의 Electron 앱이 공개된 GitHub 저장소에 있고, GitHub Releases를 통해 빌드를 배포한다면, 이 서비스를 사용해 사용자에게 지속적인 앱 업데이트를 제공할 수 있다.

새 모듈 사용하기​

여러분의 설정 작업을 최소화하기 위해, update.electronjs.org 웹 서비스와 통합된 update-electron-app npm 모듈을 만들었다.

모듈을 설치하려면 다음 명령어를 입력한다:

npm install update-electron-app

그리고 앱의 [메인 프로세스] 어디에서든 이 모듈을 호출한다:

require('update-electron-app')();

이게 전부다! 이 모듈은 앱 시작 시 업데이트를 확인하고, 이후 10분마다 확인한다. 업데이트가 발견되면 자동으로 백그라운드에서 다운로드하며, 업데이트가 준비되면 다이얼로그를 표시한다.

기존 앱 마이그레이션​

이미 Electron의 autoUpdater API를 사용 중인 앱도 이 서비스를 활용할 수 있다. 이를 위해 update-electron-app 모듈을 커스터마이징하거나 update.electronjs.org와 직접 통합하는 방법이 있다.

대안​

여러분이 앱을 패키징하기 위해 electron-builder를 사용한다면, 내장된 업데이터를 활용할 수 있다. 자세한 내용은 electron.build/auto-update에서 확인할 수 있다.

앱이 비공개인 경우, 자체 업데이트 서버를 운영해야 할 수도 있다. 이를 위해 Zeit의 Hazel이나 Atlassian의 Nucleus와 같은 여러 오픈소스 도구가 있다. 더 많은 정보는 Deploying an Update Server 튜토리얼을 참고한다.

감사의 말​

간결하고 확장 가능한 웹 서비스를 설계하고 구축하는 데 도움을 준 Julian Gruber에게 감사드린다. 디자인 영감을 얻은 오픈소스 Hazel 서비스를 제공한 Zeit 팀에도 감사한다. 코드 리뷰를 해준 Samuel Attard에게도 감사의 말을 전한다. 이 서비스를 테스트하는 데 도움을 준 Electron 커뮤니티에도 고마움을 표한다.

🌲 Electron 앱의 지속 가능한 미래를 기원한다!

새로운 Electron 2.0 릴리스 라인은 다양한 기능과 수정 사항으로 가득 차 있다. 이번 메이저 버전의 주요 특징 중 하나는 Apple의 Mac App Store를 위한 새로운 inAppPurchase API이다.

인앱 구매는 앱 내에서 직접 콘텐츠나 구독을 구매할 수 있게 해준다. 이를 통해 개발자는 프리미엄 비즈니스 모델을 쉽게 적용할 수 있다. 이 모델에서는 사용자가 앱을 무료로 다운로드한 후, 프리미엄 기능, 추가 콘텐츠, 또는 구독을 위해 선택적으로 인앱 구매를 할 수 있다.

이 새로운 API는 커뮤니티 기여자인 Adrien Fery가 Amanote에서 인앱 구매를 가능하게 하기 위해 Electron에 추가했다. Amanote는 강의와 회의를 위한 노트 필기 Electron 앱으로, PDF에 수학 공식, 그림, 오디오 녹음 등의 기능을 추가해 명확하고 구조화된 노트를 작성할 수 있게 해준다.

Mac 버전의 Amanote에 인앱 구매 지원을 추가한 이후, Adrien은 매출이 40% 증가했다고 보고했다.

시작하기​

새로운 inAppPurchase API가 최신 Electron 베타 버전에 이미 추가되었다:

npm i -D electron@beta

이 API에 대한 문서는 GitHub에서 확인할 수 있으며, Adrien이 이 API를 사용하는 방법에 대한 튜토리얼을 작성했다. 앱에 인앱 결제를 추가하려면 튜토리얼을 참고한다.

API에 대한 더 많은 개선 사항이 진행 중이며, 곧 다음 Electron 베타 릴리스에 추가될 예정이다.

윈도우 플랫폼도 곧 지원 예정​

다음으로, 아드리앙은 Electron에서 Microsoft Store 인앱 구매 기능을 추가해 Amanote에 새로운 수익 창출 경로를 열 계획이다. 이에 대한 소식을 계속 지켜봐 주길 바란다!

일부 Electron 애플리케이션에서 비활성화된 Node.js 통합을 다시 활성화할 수 있는 취약점이 발견되었다. 이 취약점은 CVE-2018-1000136로 지정되었다.

영향을 받는 애플리케이션​

다음 조건을 모두 만족하는 애플리케이션은 영향을 받을 수 있다:

1. Electron 1.7, 1.8 또는 2.0.0-beta 버전에서 실행된다.
2. 임의의 원격 코드 실행을 허용한다.
3. Node.js 통합을 비활성화한다.
4. webPreferences에서 webviewTag: false를 명시적으로 선언하지 않는다.
5. nativeWindowOption 옵션을 활성화하지 않는다.
6. new-window 이벤트를 가로채고, 제공된 옵션 태그를 사용하지 않고 event.newGuest를 수동으로 재정의하지 않는다.

이러한 조건을 모두 충족하는 애플리케이션은 소수에 불과하지만, 예방 차원에서 모든 애플리케이션을 업그레이드할 것을 권장한다.

취약점 완화​

이 취약점은 최신 버전인 1.7.13, 1.8.4, 그리고 2.0.0-beta.5에서 수정되었다.

애플리케이션의 Electron 버전을 업그레이드할 수 없는 개발자는 다음 코드를 통해 이 취약점을 완화할 수 있다:

app.on('web-contents-created', (event, win) => {
  win.on(
    'new-window',
    (event, newURL, frameName, disposition, options, additionalFeatures) => {
      if (!options.webPreferences) options.webPreferences = {};
      options.webPreferences.nodeIntegration = false;
      options.webPreferences.nodeIntegrationInWorker = false;
      options.webPreferences.webviewTag = false;
      delete options.webPreferences.preload;
    },
  );
});

// 그리고 웹뷰를 전혀 사용하지 않는다면,
// 다음 코드도 추가할 수 있다
app.on('web-contents-created', (event, win) => {
  win.on('will-attach-webview', (event, webPreferences, params) => {
    event.preventDefault();
  });
});

추가 정보​

이 취약점은 Trustwave SpiderLabs의 Brendan Scarvell이 Electron 프로젝트에 책임감 있게 보고했다.

Electron 애플리케이션의 보안을 유지하는 모범 사례에 대해 더 알고 싶다면, 보안 튜토리얼을 참고한다.

Electron에서 발견한 취약점을 보고하려면 security@electronjs.org로 이메일을 보낸다.

릴리스 및 보안 업데이트에 대한 정보를 받으려면 이메일 리스트에 가입한다.

지난주 electronjs.org 사이트가 몇 분 동안 접속 불가 상태가 되었다. 이로 인해 불편을 겪은 분들께 사과의 말씀을 전한다. 오늘 조사를 통해 근본 원인을 파악했고, 수정 사항을 배포했다.

앞으로 이런 다운타임이 발생하지 않도록, 우리 앱에 Heroku 임계값 알림 기능을 활성화했다. 이제 웹 서버가 일정 임계값 이상의 실패한 요청이나 느린 응답을 누적하면, 팀에 즉시 알림이 전달되어 문제를 신속히 해결할 수 있을 것이다.

모든 언어로 제공되는 오프라인 문서​

비행기 안이나 지하 카페에서 Electron 앱을 개발할 때, 오프라인 참조를 위해 문서를 가지고 있으면 유용하다. 다행히 Electron 문서는 20개 이상의 언어로 마크다운 파일 형태로 제공된다.

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

GUI가 있는 오프라인 문서​

devdocs.io/electron은 Electron뿐만 아니라 JavaScript, TypeScript, Node.js, React, Angular 등 다양한 프로젝트의 문서를 오프라인으로 저장할 수 있는 유용한 웹사이트다. 물론 이를 위한 Electron 앱도 존재한다. Electron 사이트에서 devdocs-app을 확인해 보자.

마우스나 트랙패드를 사용하지 않고 앱을 설치하고 싶다면 Electron Forge의 install 커맨드를 사용해 보자:

npx electron-forge install egoist/devdocs-app