Skip to main content

Electron 34.0.0

· 5 min read

Electron 34.0.0이 출시되었다! 이번 버전은 Chromium 132.0.6834.83, V8 13.2, 그리고 Node 20.18.1로 업그레이드되었다.


Electron 팀은 Electron 34.0.0의 출시를 기쁘게 발표한다! npm install electron@latest 명령어를 통해 npm으로 설치하거나 릴리스 웹사이트에서 다운로드할 수 있다. 이번 릴리스에 대한 자세한 내용은 계속 읽어보길 바란다.

피드백이 있다면 BlueskyMastodon을 통해 공유하거나, 커뮤니티 Discord에 참여해보길 바란다! 버그나 기능 요청은 Electron의 이슈 트래커에 보고할 수 있다.

주요 변경 사항

주요 기능

  • 응답하지 않는 렌더러의 JavaScript 호출 스택에 접근하기 위해 WebFrameMain.collectJavaScriptCallStack()를 추가했다. #44938
  • Brotli 또는 ZStandard를 사용한 압축 효율성을 높이기 위해 공유 사전을 관리하는 새로운 API를 추가했다. 이 API는 session.getSharedDictionaryUsageInfo(), session.getSharedDictionaryInfo(options), session.clearSharedDictionaryCache(), session.clearSharedDictionaryCacheForIsolationKey(options)이다. #44950

스택 변경 사항

Electron 34은 Chromium을 130.0.6723.44에서 132.0.6834.83로, Node를 20.18.0에서 20.18.1로, 그리고 V8을 13.0에서 13.2로 업그레이드한다.

새로운 기능

  • Brotli 또는 ZStandard 압축 효율을 위해 공유 딕셔너리를 관리할 수 있는 새로운 API를 추가했다. 새로운 API는 session.getSharedDictionaryUsageInfo(), session.getSharedDictionaryInfo(options), session.clearSharedDictionaryCache(), session.clearSharedDictionaryCacheForIsolationKey(options)이다. #44950
  • 응답하지 않는 렌더러의 JavaScript 호출 스택에 접근하기 위해 WebFrameMain.collectJavaScriptCallStack()을 추가했다. #44938
  • 언로드 상태의 프레임을 위해 WebFrameMain.detached를 추가했다.
    • 프레임이 파괴되었는지 확인하기 위해 WebFrameMain.isDestroyed()를 추가했다.
    • 프레임이 언로드 상태일 때 webFrameMain.fromId(processId, frameId)가 주어진 매개변수와 일치하지 않는 WebFrameMain 인스턴스를 반환하는 문제를 수정했다. #43473
  • V8 치명적 오류에 대한 진단 보고를 지원하기 위해 유틸리티 프로세스에 오류 이벤트를 추가했다. #43774
  • GPU 가속 공유 텍스처 오프스크린 렌더링 기능을 추가했다. #42953

주요 변경 사항

동작 변경: Windows에서 전체 화면 시 메뉴 바가 숨겨짐

이 변경으로 Windows의 동작이 Linux와 동일하게 조정되었다. 기존 동작: Windows에서 전체 화면 시에도 메뉴 바가 표시됨. 새로운 동작: Windows에서 전체 화면 시 메뉴 바가 숨겨짐.

수정 사항: 이 변경 사항은 이전에 Electron 33의 주요 변경 사항으로 소개되었지만, 실제로는 Electron 34에서 처음 릴리스되었다.

31.x.y 버전 지원 종료

Electron 31.x.y 버전은 프로젝트의 지원 정책에 따라 지원이 종료되었다. 개발자와 애플리케이션은 더 새로운 버전의 Electron으로 업그레이드할 것을 권장한다.

E34 (2025년 1월)E35 (2025년 4월)E36 (2025년 6월)
34.x.y35.x.y36.x.y
33.x.y34.x.y35.x.y
32.x.y33.x.y34.x.y

다음 단계

앞으로 짧은 기간 동안, Electron 팀은 Chromium, Node, V8과 같은 주요 컴포넌트의 개발 동향을 계속 따라가며 이를 유지하는 데 주력할 것이다.

Electron의 공개 타임라인은 여기에서 확인할 수 있다.

향후 변경 사항에 대한 더 자세한 정보는 Planned Breaking Changes 페이지에서 찾을 수 있다.

Moving our Ecosystem to Node 22

· 4 min read

2025년 초, Electron의 npm 생태계 저장소(@electron/@electron-forge/ 네임스페이스 아래)는 최소 지원 버전을 Node.js 22로 변경한다.

과거에는 Electron의 npm 생태계(Forge, Packager 등) 내 패키지들이 가능한 한 오랫동안 Node 버전을 지원해왔다. 심지어 해당 버전이 End-Of-Life(EOL)에 도달한 후에도 말이다. 이는 생태계가 분열되는 것을 방지하기 위한 조치였다. 많은 프로젝트가 구버전의 Node에 의존하고 있음을 이해했기 때문에, 업그레이드가 꼭 필요한 상황이 아니라면 이러한 프로젝트를 방치하는 위험을 감수하고 싶지 않았다.

하지만 시간이 지나면서 Node.js 14를 최소 버전으로 사용하는 것이 점점 더 어려워졌다. 그 이유는 다음과 같다:

  • 공식적인 Node.js 14 macOS ARM64 빌드가 없어, 전체 테스트 커버리지를 제공하기 위해 CI 인프라를 유지하는 데 추가 작업이 필요하다.
  • 상위 패키지 의존성의 engines 요구사항이 점점 더 높아지면서, 의존성 업데이트를 통해 공급망 보안 문제를 해결하기가 더 어려워졌다.

또한, 최신 버전의 Node.js에는 fs.globutil.parseArgs 같은 런타임 내장 유틸리티와 node:test, node:sqlite 같은 새로운 모듈이 포함되어 있다. 이러한 개선 사항을 활용하고 싶은 이유도 있다.

왜 지금 업그레이드해야 할까?

2024년 7월, Electron의 Ecosystem Working Group은 모든 패키지를 동기식 ESM 그래프의 require()를 지원하는 가장 이른 Node 버전으로 업그레이드하기로 결정했다. 이 버전이 LTS(장기 지원) 날짜에 도달한 후에 적용될 예정이다. 관련 내용은 nodejs/node#51977nodejs/node#53500에서 확인할 수 있다.

이 업데이트 시점을 2025년 1월/2월로 정했다. 이 업그레이드가 완료되면, Node 22가 기존 생태계 패키지에서 지원되는 최소 버전이 된다.

어떤 조치를 취해야 하나?

가능한 한 많은 호환성을 유지하기 위해 노력할 것이다. 하지만 최상의 지원을 보장하기 위해 여러분의 앱을 Node 22 이상으로 업그레이드할 것을 권장한다.

프로젝트에서 실행 중인 Node 버전은 현재 사용 중인 Electron 버전에 내장된 Node 버전과는 별개라는 점을 유의하라.

궁금한 점이나 문의사항이 있다면 언제든지 info@electronjs.org로 메일을 보내주세요. 또한 공식 Electron Discord에서 커뮤니티 지원을 받을 수도 있습니다.

12월 조용한 기간 (2024년 12월)

· 2 min read

Electron 프로젝트는 2024년 12월 한 달 동안 휴식기를 갖고, 2025년 1월부터 다시 본격적으로 진행될 예정이다.

via GIPHY


12월에도 변하지 않을 것들

  1. 제로데이 및 기타 주요 보안 관련 릴리스는 필요 시 공개된다. 보안 사고는 SECURITY.md를 통해 신고해야 한다.
  2. 행동 강령 관련 신고와 조정은 계속 이어진다.

12월에 달라지는 점

  1. 2024년 마지막 안정 버전인 Electron 31, 32, 33이 12월 첫 주에 출시된다. 12월에는 추가 출시 계획이 없다.
  2. 12월 마지막 두 주 동안 Nightly와 Alpha 버전이 출시되지 않는다.
  3. 몇 가지 예외를 제외하고, 풀 리퀘스트 리뷰나 병합이 진행되지 않는다.
  4. 모든 저장소에서 이슈 트래커 업데이트가 중단된다.
  5. 메인테이너들이 Discord에서 디버깅 도움을 제공하지 않는다.
  6. 소셜 미디어 콘텐츠 업데이트가 없다.

2025년에 뵙겠습니다!

BrowserView에서 WebContentsView로 마이그레이션하기

· 6 min read

Electron 30부터 BrowserView는 더 이상 사용되지 않으며, WebContentView로 대체되었다. 다행히도 마이그레이션은 비교적 간단하다.


Electron은 Chromium의 UI 프레임워크인 Views API와의 일관성을 유지하기 위해 BrowserView에서 WebContentsView로 전환하고 있다. WebContentsView는 Chromium의 렌더링 파이프라인과 직접 연결된 재사용 가능한 뷰를 제공하며, 이를 통해 향후 업그레이드가 간소화되고 개발자가 Electron 앱에 비웹 UI 엘리먼트를 통합할 수 있는 가능성이 열린다. WebContentsView를 채택함으로써 애플리케이션은 다가오는 업데이트에 대비할 수 있을 뿐만 아니라 코드 복잡성이 줄어들고 장기적으로 잠재적인 버그가 감소하는 이점을 얻는다.

BrowserWindowBrowserView에 익숙한 개발자라면 BrowserWindowWebContentsView가 각각 BaseWindowView 기본 클래스를 상속받은 서브클래스라는 점을 주목해야 한다. 사용 가능한 인스턴스 변수와 메서드를 완전히 이해하려면 이 기본 클래스에 대한 문서를 참고하는 것이 좋다.

마이그레이션 단계

1. Electron을 30.0.0 이상 버전으로 업그레이드

warning

Electron 릴리스에는 애플리케이션에 영향을 미칠 수 있는 주요 변경 사항이 포함될 수 있다. 이 마이그레이션을 진행하기 전에 먼저 애플리케이션에서 Electron 업그레이드를 테스트하고 적용하는 것이 좋다. 각 Electron 주요 버전의 주요 변경 사항 목록은 여기에서 확인할 수 있으며, Electron 블로그의 각 주요 버전 릴리스 노트에서도 확인할 수 있다.

2. 애플리케이션에서 BrowserView를 사용하는 부분 파악하기

이를 위해 코드베이스에서 new BrowserView(를 검색해 보는 방법이 있다. 이렇게 하면 애플리케이션이 BrowserView를 어떻게 사용하고 있는지, 그리고 몇 군데를 마이그레이션해야 하는지 대략적인 감을 잡을 수 있다.

tip

대부분의 경우, 애플리케이션에서 새로운 BrowserView를 생성하는 각각의 인스턴스는 서로 독립적으로 마이그레이션할 수 있다.

3. BrowserView 사용 부분 마이그레이션

  1. 인스턴스 생성 부분을 마이그레이션한다. WebContentsViewBrowserView의 생성자는 거의 동일한 형태를 가지고 있기 때문에 비교적 간단하다. 둘 다 webPreferences 파라미터를 통해 WebPreferences를 받는다.

    - this.tabBar = new BrowserView({
    + this.tabBar = new WebContentsView({
    info

    기본적으로 WebContentsView는 흰색 배경으로 인스턴스화되지만, BrowserView는 투명한 배경으로 인스턴스화된다.
    WebContentsView에서 투명한 배경을 얻으려면 배경색을 RGBA 헥스 값으로 설정하고 알파 채널을 00으로 지정한다:

    + this.webContentsView.setBackgroundColor("#00000000");
  2. BrowserView가 부모 윈도우에 추가되는 부분을 마이그레이션한다.

    - this.browserWindow.addBrowserView(this.tabBar)
    + this.browserWindow.contentView.addChildView(this.tabBar);
  3. 부모 윈도우에서 BrowserView 인스턴스 메서드 호출을 마이그레이션한다.

    이전 메서드새로운 메서드참고 사항
    win.setBrowserViewwin.contentView.removeChildView + win.contentView.addChildView
    win.getBrowserViewwin.contentView.children
    win.removeBrowserViewwin.contentView.removeChildView
    win.setTopBrowserViewwin.contentView.addChildView기존 뷰에 addChildView를 호출하면 해당 뷰를 맨 위로 재정렬한다.
    win.getBrowserViewswin.contentView.children
  4. setAutoResize 인스턴스 메서드를 리사이즈 리스너로 마이그레이션한다.

    - this.browserView.setAutoResize({
    - vertical: true,
    - })

    + this.browserWindow.on('resize', () => {
    + if (!this.browserWindow || !this.webContentsView) {
    + return;
    + }
    + const bounds = this.browserWindow.getBounds();
    + this.webContentsView.setBounds({
    + x: 0,
    + y: 0,
    + width: bounds.width,
    + height: bounds.height,
    + });
    + });
    tip

    browserView.webContentsbrowserView.setBounds, browserView.getBounds, browserView.setBackgroundColor 인스턴스 메서드의 기존 사용법은 마이그레이션할 필요가 없으며, WebContentsView 인스턴스에서 바로 작동한다!

4. 변경 사항 테스트 및 커밋

문제가 발생한가요? Electron의 이슈 트래커에서 WebContentsView 태그를 확인해 보고, 당신이 겪고 있는 문제가 이미 보고되었는지 확인하세요. 해당 문제가 없다면 새로운 버그 리포트를 추가해도 좋습니다. 테스트 케이스 예제를 포함하면 문제를 더 효율적으로 처리할 수 있습니다.

축하합니다! WebContentsView로 마이그레이션을 성공적으로 완료했습니다! 🎉

Electron 33.0.0

· 7 min read

Electron 33.0.0이 출시되었다! 이번 버전은 Chromium 130.0.6723.44, V8 13.0, 그리고 Node 20.18.0로 업그레이드되었다.


Electron 팀은 Electron 33.0.0 출시를 발표하게 되어 기쁘다! npm install electron@latest 명령어를 통해 설치하거나 릴리스 웹사이트에서 다운로드할 수 있다. 이번 릴리스에 대한 자세한 내용은 계속 읽어보자.

피드백이 있다면 TwitterMastodon을 통해 공유하거나, 커뮤니티 Discord에 참여하자! 버그 및 기능 요청은 Electron의 이슈 트래커에 보고할 수 있다.

주요 변경 사항

주요 기능

  • 암호화 장치의 잠금을 해제할 때 PIN이 필요한 경우를 처리하기 위해 app.setClientCertRequestPasswordHandler(handler) 핸들러를 추가했다. #41205
  • 네비게이션 히스토리 관리를 더욱 효과적으로 하기 위해 navigationHistory API에 2개의 새로운 함수를 추가했다. #42014
  • 네이티브 테마의 투명도 검사 기능을 개선했다. #42862

스택 변경 사항

Electron 33은 Chromium을 128.0.6613.36에서 130.0.6723.44로, Node를 20.16.0에서 20.18.0로, V8을 12.8에서 13.0으로 업그레이드한다.

새로운 기능

  • PIN이 필요한 경우 암호화 장치를 잠금 해제할 수 있도록 app.setClientCertRequestPasswordHandler(handler) 핸들러를 추가했다. #41205
  • V8 치명적 오류에 대한 진단 보고를 지원하기 위해 유틸리티 프로세스에 error 이벤트를 추가했다. #43997
  • View.setBorderRadius(radius)를 추가해 뷰의 테두리 반경을 커스터마이징할 수 있게 했으며, WebContentsView와도 호환된다. #42320
  • 더 나은 히스토리 관리를 위해 navigationHistory API에 2개의 새로운 함수를 추가해 확장했다. #42014

주요 변경 사항

제거: macOS 10.15 지원 중단

macOS 10.15 (Catalina)는 더 이상 Chromium에서 지원하지 않는다.

이전 버전의 Electron은 Catalina에서 계속 실행되지만, Electron v33.0.0 이상 버전을 사용하려면 macOS 11 (Big Sur) 이상이 필요하다.

동작 변경: 네이티브 모듈 이제 C++20 필요

업스트림 변경 사항으로 인해, V8Node.js 모두 이제 최소 C++20 버전을 요구한다. 네이티브 노드 모듈을 사용하는 개발자는 --std=c++17 대신 --std=c++20으로 모듈을 빌드해야 한다. gcc9 이하 버전을 사용하는 이미지는 컴파일을 위해 gcc10으로 업데이트해야 할 수도 있다. 자세한 내용은 #43555을 참고한다.

동작 변경: Windows에서 커스텀 프로토콜 URL 처리

Chromium의 Non-Special Scheme URLs 지원을 위한 변경으로 인해, Windows 파일 경로를 사용하는 커스텀 프로토콜 URL은 더 이상 protocol.registerFileProtocolBrowserWindow.loadURL, WebContents.loadURL, <webview>.loadURLbaseURLForDataURL 속성과 함께 제대로 작동하지 않는다. protocol.handle도 이러한 타입의 URL과 함께 작동하지 않지만, 이는 기존부터 그래왔기 때문에 변경 사항은 아니다.

// 더 이상 작동하지 않음
protocol.registerFileProtocol('other', () => {
callback({ filePath: '/path/to/my/file' });
});

const mainWindow = new BrowserWindow();
mainWindow.loadURL(
'data:text/html,<script src="loaded-from-dataurl.js"></script>',
{ baseURLForDataURL: 'other://C:\\myapp' },
);
mainWindow.loadURL('other://C:\\myapp\\index.html');

// 대체 방법
const path = require('node:path');
const nodeUrl = require('node:url');
protocol.handle(other, (req) => {
const srcPath = 'C:\\myapp\\';
const reqURL = new URL(req.url);
return net.fetch(
nodeUrl.pathToFileURL(path.join(srcPath, reqURL.pathname)).toString(),
);
});

mainWindow.loadURL(
'data:text/html,<script src="loaded-from-dataurl.js"></script>',
{ baseURLForDataURL: 'other://' },
);
mainWindow.loadURL('other://index.html');

변경된 동작: applogin 이벤트에서 webContents 프로퍼티

respondToAuthRequestsFromMainProcess 옵션과 함께 생성된 유틸리티 프로세스에서 발생한 요청에 대해 applogin 이벤트가 트리거될 때, webContents 프로퍼티는 null이 된다.

더 이상 사용되지 않음: BrowserWindowConstructorOption.typetextured 옵션

BrowserWindowConstructorOptionstype에 있는 textured 옵션은 대체 기능 없이 더 이상 사용되지 않는다. 이 옵션은 macOS에서 NSWindowStyleMaskTexturedBackground 스타일 마스크에 의존했는데, 이 마스크 역시 대체 기능 없이 더 이상 사용되지 않는다.

더 이상 사용되지 않음: systemPreferences.accessibilityDisplayShouldReduceTransparency

systemPreferences.accessibilityDisplayShouldReduceTransparency 속성은 더 이상 사용되지 않으며, 동일한 정보를 제공하고 크로스 플랫폼에서 작동하는 새로운 nativeTheme.prefersReducedTransparency로 대체되었다.

// 더 이상 사용되지 않음
const shouldReduceTransparency =
systemPreferences.accessibilityDisplayShouldReduceTransparency;

// 대체 코드:
const prefersReducedTransparency = nativeTheme.prefersReducedTransparency;

30.x.y 버전 지원 종료

프로젝트의 지원 정책에 따라 Electron 30.x.y 버전의 지원이 종료되었다. 개발자와 애플리케이션은 최신 버전의 Electron으로 업그레이드하는 것을 권장한다.

E33 (2024년 10월)E34 (2025년 1월)E35 (2025년 4월)
33.x.y34.x.y35.x.y
32.x.y33.x.y34.x.y
31.x.y32.x.y33.x.y

다음 단계

단기적으로, Electron 팀은 Chromium, Node, V8 등 Electron을 구성하는 주요 컴포넌트의 개발을 꾸준히 따라가기 위해 노력할 것이다.

Electron의 공개 타임라인에서 자세한 정보를 확인할 수 있다.

향후 예정된 변경 사항에 대한 더 많은 정보는 Planned Breaking Changes 페이지에서 찾아볼 수 있다.

Introducing API History (GSoC 2024)

· 12 min read

Electron API의 역사적 변경 사항이 이제 문서에 상세히 기록된다.


안녕하세요 👋, 저는 2024년 Google Summer of Code(GSoC)에 참여하여 Electron에 기여한 Peter입니다.

GSoC 프로그램 기간 동안, 저는 Node.js 문서와 유사한 방식으로 Electron 문서와 그 기능, 클래스 등에 대한 API 기록 기능을 구현했다. 이를 위해 API 문서 마크다운 파일에 간단하지만 강력한 YAML 스키마를 사용할 수 있게 했고, Electron 문서 웹사이트에서 이를 멋지게 표시하도록 했다.

Electron 32.0.0

· 7 min read

Electron 32.0.0이 출시되었습니다! 이번 버전은 Chromium 128.0.6613.36, V8 12.8, 그리고 Node 20.16.0으로 업그레이드되었습니다.


Electron 팀은 Electron 32.0.0 출시를 발표하게 되어 기쁩니다. npm install electron@latest 명령어를 통해 npm으로 설치하거나 릴리스 웹사이트에서 직접 다운로드할 수 있습니다. 이번 릴리스에 대한 자세한 내용은 계속해서 읽어보세요.

피드백이 있다면 TwitterMastodon을 통해 공유하거나, 커뮤니티 Discord에 참여해 주세요. 버그 및 기능 요청은 Electron의 이슈 트래커에 보고할 수 있습니다.

주요 변경 사항

하이라이트

  • Google Summer of Code 프로젝트의 일환으로 @piotrpdev가 개발한 새로운 API 버전 히스토리 기능을 문서에 추가했다. 자세한 내용은 이 블로그 포스트에서 확인할 수 있다. #42982
  • 웹 File API에서 비표준 확장자인 File.path를 제거했다. #42053
  • Web File System API에서 차단된 경로의 파일이나 디렉토리를 열려고 할 때의 실패 경로를 업스트림과 맞췄다. #42993
  • webcontents.navigationHistory에 기존 네비게이션 관련 API인 canGoBack, goBack, canGoForward, goForward, canGoToOffset, goToOffset, clear를 추가했다. 이전 네비게이션 API는 이제 더 이상 사용되지 않는다. #41752

스택 변경 사항

Electron 32는 Chromium을 126.0.6478.36에서 128.0.6613.36으로, Node를 20.14.0에서 20.16.0으로, 그리고 V8을 12.6에서 12.8로 업그레이드한다.

새로운 기능

  • app 모듈의 'login' 이벤트를 통해 유틸리티 프로세스에서 시작된 인증 요청에 응답할 수 있는 기능을 추가했다. #43317
  • CPUUsage 구조체에 cumulativeCPUUsage 속성을 추가했다. 이 속성은 프로세스 시작 이후 사용된 총 CPU 시간(초)을 반환한다. #41819
  • webContents.navigationHistory에 기존 네비게이션 관련 API를 추가했다. 추가된 API는 canGoBack, goBack, canGoForward, goForward, canGoToOffset, goToOffset, clear이다. #41752
  • WebContentsView가 기존 webContents 객체를 받아들일 수 있도록 기능을 확장했다. #42086
  • nativeTheme에 새로운 속성 prefersReducedTransparency를 추가했다. 이 속성은 사용자가 시스템 접근성 설정을 통해 OS 수준의 투명도를 줄이도록 선택했는지 여부를 나타낸다. #43137
  • 차단된 경로에서 파일 또는 디렉터리를 열려고 시도할 때 File System Access API의 실패 경로를 업스트림과 일치시켰다. #42993
  • Linux에서 Windows Control Overlay API를 활성화했다. #42681
  • 네트워크 요청에서 zstd 압축을 활성화했다. #43300

주요 변경 사항

제거됨: File.path

File 객체의 비표준 path 프로퍼티는 초기 Electron 버전에서 추가되었다. 당시 렌더러 프로세스에서 모든 작업을 처리하는 것이 일반적이었기 때문에, 네이티브 파일 작업을 편리하게 하기 위해 도입되었다. 하지만 이는 표준에서 벗어난 방식이며, 사소한 보안 위험도 내포하고 있다. 따라서 Electron 32.0부터는 이 프로퍼티를 제거하고, 대신 webUtils.getPathForFile 메서드를 사용하도록 변경했다.

// 이전 (렌더러)
const file = document.querySelector('input[type=file]');
alert(`업로드된 파일 경로: ${file.path}`);
// 이후 (렌더러)
const file = document.querySelector('input[type=file]');
electron.showFilePath(file);

// 이후 (프리로드)
const { contextBridge, webUtils } = require('electron');

contextBridge.exposeInMainWorld('electron', {
showFilePath(file) {
// 가능하다면 웹 콘텐츠에 전체 파일 경로를 노출하지 않는 것이 좋다.
const path = webUtils.getPathForFile(file);
alert(`업로드된 파일 경로: ${path}`);
},
});

더 이상 사용되지 않는 API: clearHistory, canGoBack, goBack, canGoForward, goForward, goToIndex, canGoToOffset, goToOffset on WebContents

WebContents 인스턴스에서 네비게이션 관련 API는 이제 더 이상 사용되지 않는다. 이 API들은 네비게이션 기록을 관리하기 위해 더 구조적이고 직관적인 인터페이스를 제공하기 위해 WebContentsnavigationHistory 속성으로 이동했다.

// 더 이상 사용되지 않는 API
win.webContents.clearHistory();
win.webContents.canGoBack();
win.webContents.goBack();
win.webContents.canGoForward();
win.webContents.goForward();
win.webContents.goToIndex(index);
win.webContents.canGoToOffset();
win.webContents.goToOffset(index);

// 대체 방법
win.webContents.navigationHistory.clear();
win.webContents.navigationHistory.canGoBack();
win.webContents.navigationHistory.goBack();
win.webContents.navigationHistory.canGoForward();
win.webContents.navigationHistory.goForward();
win.webContents.navigationHistory.canGoToOffset();
win.webContents.navigationHistory.goToOffset(index);

29.x.y 버전 지원 종료

Electron 29.x.y 버전은 프로젝트의 지원 정책에 따라 지원이 종료되었다. 개발자와 애플리케이션은 더 새로운 버전의 Electron으로 업그레이드할 것을 권장한다.

E32 (2024년 8월)E33 (2024년 10월)E34 (2025년 1월)
32.x.y33.x.y34.x.y
31.x.y32.x.y33.x.y
30.x.y31.x.y32.x.y

다음 단계

단기적으로, Electron 팀은 Chromium, Node, V8과 같은 주요 컴포넌트의 개발에 발맞추는 데 계속 집중할 것이다.

Electron의 공개 타임라인을 통해 현재 진행 상황을 확인할 수 있다.

미래의 주요 변경 사항에 대한 자세한 정보는 예정된 주요 변경 사항 페이지에서 찾아볼 수 있다.

Electron 31.0.0

· 6 min read

Electron 31.0.0이 출시되었다! 이번 버전은 Chromium 126.0.6478.36, V8 12.6, 그리고 Node 20.14.0으로 업그레이드되었다.


Electron 팀은 Electron 31.0.0의 출시를 기쁘게 발표한다! 여러분은 npm install electron@latest 명령어를 통해 설치하거나 릴리스 웹사이트에서 다운로드할 수 있다. 이번 릴리스에 대한 자세한 내용은 계속 읽어보자.

피드백이 있다면 TwitterMastodon을 통해 공유하거나, 커뮤니티 Discord에 참여해보자! 버그나 기능 요청은 Electron의 이슈 트래커에 보고할 수 있다.

주요 변경 사항

주요 업데이트

  • WebContentsView가 기존 webContents 객체를 받아들일 수 있도록 확장. #42319
  • NODE_EXTRA_CA_CERTS 지원 추가. #41689
  • macOS에서 window.flashFrame(bool)이 지속적으로 깜빡이도록 업데이트. #41391
  • WebSQL 지원 제거 #41868
  • nativeImage.toDataURL이 PNG 색상 공간을 보존하도록 변경 #41610
  • webContents.setWindowOpenHandler가 수동으로 BrowserWindow를 생성할 수 있도록 확장. #41432

스택 변경 사항

Electron 31은 Chromium을 124.0.6367.49에서 126.0.6478.36으로, Node를 20.11.1에서 20.14.0으로, V8을 12.4에서 12.6으로 업그레이드했다.

새로운 기능

  • SessionclearData 메서드를 추가했다. #40983
    • Session.clearData API에 options 파라미터를 추가했다. #41355
  • navigator.serial에서 서비스 클래스 ID를 통해 Bluetooth 포트를 요청할 수 있는 기능을 추가했다. #41638
  • Node.js의 NODE_EXTRA_CA_CERTS 환경 변수를 지원하도록 추가했다. #41689
  • webContents.setWindowOpenHandlerBrowserWindow를 수동으로 생성할 수 있도록 기능을 확장했다. #41432
  • 웹 표준 File System API를 지원하도록 구현했다. #41419
  • WebContentsView가 기존 WebContents 인스턴스를 받아들일 수 있도록 기능을 확장했다. #42319
  • webContents API에 navigationHistory 인스턴스 프로퍼티와 navigationHistory.getEntryAtIndex 메서드를 추가해, 애플리케이션이 브라우징 기록 내의 모든 네비게이션 항목의 URL과 제목을 조회할 수 있게 했다. #41577 (또한 29, 30에서도 확인 가능)

주요 변경 사항

제거됨: WebSQL 지원

Chromium은 WebSQL 지원을 제거하고 Android 플랫폼으로만 이전했다. 자세한 내용은 Chromium의 제거 의도 논의를 참고한다.

변경된 동작: nativeImage.toDataURL이 PNG 컬러스페이스를 보존

PNG 디코더 구현이 변경되어 컬러스페이스 데이터를 보존하도록 업데이트되었다. 이제 이 함수에서 반환되는 인코딩된 데이터는 원본 컬러스페이스와 일치한다.

자세한 내용은 crbug.com/332584706에서 확인할 수 있다.

동작 변경: win.flashFrame(bool)이 macOS에서 도크 아이콘을 지속적으로 깜빡임

이 변경으로 macOS의 동작이 Windows와 Linux와 동일해졌다. 이전 동작: flashFrame(true)를 처음 호출하면 도크 아이콘이 한 번만 튕기고(NSInformationalRequest 수준 사용), flashFrame(false)는 아무 동작도 하지 않았다. 새로운 동작: flashFrame(false)가 호출될 때까지 도크 아이콘을 지속적으로 깜빡인다. 이제 NSCriticalRequest 수준을 사용한다. 도크 아이콘을 한 번만 튕기게 하려면 여전히 dock.bounce('informational')을 사용할 수 있다.

28.x.y 버전 지원 종료

Electron 28.x.y 버전은 프로젝트의 지원 정책에 따라 지원이 종료되었다. 개발자와 애플리케이션은 더 새로운 버전의 Electron으로 업그레이드하는 것을 권장한다.

E31 (2024년 6월)E32 (2024년 8월)E33 (2024년 10월)
31.x.y32.x.y33.x.y
30.x.y31.x.y32.x.y
28.x.y29.x.y31.x.y

다음 단계

앞으로는 Electron 팀이 Chromium, Node, V8과 같은 주요 구성 요소의 개발 속도를 따라가는 데 계속 집중할 것으로 예상된다.

Electron의 공개 타임라인은 여기에서 확인할 수 있다.

향후 예정된 변경 사항에 대한 자세한 내용은 예정된 주요 변경 사항 페이지에서 확인할 수 있다.

Electron 30.0.0

· 8 min read

Electron 30.0.0이 출시되었다! 이번 버전은 Chromium 124.0.6367.49, V8 12.4, 그리고 Node.js 20.11.1로 업그레이드되었다.


Electron 팀은 Electron 30.0.0 출시를 발표하게 되어 기쁘다. npm install electron@latest 명령어를 통해 npm으로 설치하거나 릴리스 웹사이트에서 직접 다운로드할 수 있다. 이번 릴리스에 대한 자세한 내용은 계속 읽어보자.

피드백이 있다면 TwitterMastodon을 통해 공유하거나, 커뮤니티 Discord에 참여해보자. 버그 및 기능 요청은 Electron의 이슈 트래커에서 보고할 수 있다.

주요 변경 사항

주요 사항

  • Windows에서 ASAR Integrity fuse 지원 추가 (#40504)
    • ASAR Integrity가 활성화된 기존 앱은 올바르게 설정되지 않으면 Windows에서 작동하지 않을 수 있다. Electron 패키징 도구를 사용하는 앱은 @electron/packager@18.3.1 또는 @electron/forge@7.4.0으로 업그레이드해야 한다.
    • 자세한 내용은 ASAR Integrity 튜토리얼을 참고한다.
  • WebContentsViewBaseWindow 메인 프로세스 모듈 추가, BrowserView를 대체하며 더 이상 사용되지 않음 (#35658). BrowserView에서 WebContentsView로 마이그레이션하는 방법은 이 블로그 포스트에서 확인할 수 있다.
    • BrowserView는 이제 WebContentsView를 기반으로 한 shim이며, 이전 구현은 제거되었다.
    • 새로운 WebContentsView API와 다른 유사한 API를 비교하려면 Web Embeds 문서를 참고한다.
  • File System API 지원 구현 (#41827)

스택 변경 사항

Electron 30은 Chromium을 122.0.6261.39에서 124.0.6367.49로, Node를 20.9.0에서 20.11.1로, V8을 12.2에서 12.4로 업그레이드한다.

새로운 기능

  • 웹뷰에 transparent 웹 환경설정을 추가했다. (#40301)
  • webContents API에 navigationHistory 인스턴스 프로퍼티와 navigationHistory.getEntryAtIndex 메서드를 추가해, 애플리케이션이 브라우징 히스토리 내의 모든 네비게이션 항목의 URL과 제목을 가져올 수 있게 했다. (#41662)
  • 새로운 BrowserWindow.isOccluded() 메서드를 추가해 앱이 윈도우의 가려짐 상태를 확인할 수 있게 했다. (#38982)
  • 유틸리티 프로세스에서 net 모듈을 사용해 만든 요청에 대한 프록시 설정 지원을 추가했다. (#41417)
  • navigator.serial에서 서비스 클래스 ID로 블루투스 포트를 요청하는 기능을 지원한다. (#41734)
  • Node.js의 NODE_EXTRA_CA_CERTS CLI 플래그를 지원한다. (#41822)

주요 변경 사항

동작 변경: 크로스 오리진 iframe에서 기능 접근 시 Permission Policy 사용

이제 크로스 오리진 iframe은 allow 속성을 통해 특정 iframe에서 사용 가능한 기능을 명시해야 한다. 이를 통해 해당 기능에 접근할 수 있다.

자세한 내용은 문서를 참고한다.

제거됨: --disable-color-correct-rendering 커맨드라인 스위치

이 스위치는 공식적으로 문서화된 적은 없지만, 여기서 제거 사항을 기록한다. 크로미엄 자체가 이제 색상 공간을 더 잘 지원하므로 이 플래그가 더 이상 필요하지 않다.

변경된 동작: macOS에서 BrowserView.setAutoResize의 동작

Electron 30에서는 BrowserView가 새로운 WebContentsView API를 기반으로 동작하도록 변경되었다.

이전에는 BrowserView API의 setAutoResize 함수가 macOS에서는 autoresizing을, Windows와 Linux에서는 커스텀 알고리즘을 사용했다. BrowserView가 전체 윈도우를 채우는 간단한 사용 사례에서는 두 접근 방식의 동작이 동일했다. 하지만 더 복잡한 경우에는 macOS의 autoresizing API와 Windows 및 Linux의 커스텀 리사이징 알고리즘이 완벽히 일치하지 않아 BrowserView가 플랫폼별로 다르게 리사이징되었다. 이제는 모든 플랫폼에서 리사이징 동작이 표준화되었다.

만약 여러분의 앱이 BrowserView.setAutoResize를 사용해 BrowserView가 전체 윈도우를 채우는 것보다 더 복잡한 작업을 수행한다면, macOS에서의 동작 차이를 처리하기 위해 이미 커스텀 로직을 구현했을 가능성이 높다. 이 경우, Electron 30에서는 리사이징 동작이 일관되게 변경되었기 때문에 더 이상 해당 로직이 필요하지 않다.

제거됨: WebContentscontext-menu 이벤트에서 params.inputFormType 속성

WebContentscontext-menu 이벤트에서 params 객체의 inputFormType 속성이 제거되었다. 대신 새로운 formControlType 속성을 사용한다.

제거됨: process.getIOCounters()

Chromium은 이 정보에 대한 접근을 제거했다.

27.x.y 버전 지원 종료

Electron 27.x.y 버전은 프로젝트의 지원 정책에 따라 지원이 종료되었다. 개발자와 애플리케이션은 더 새로운 버전의 Electron으로 업그레이드하는 것을 권장한다.

E30 (2024년 4월)E31 (2024년 6월)E32 (2024년 8월)
30.x.y31.x.y32.x.y
29.x.y30.x.y31.x.y
28.x.y29.x.y30.x.y

다음 단계

앞으로 짧은 기간 동안, Electron 팀은 Chromium, Node, V8 등 주요 컴포넌트의 개발 동향을 계속 따라가며 이를 유지하는 데 주력할 것으로 예상된다.

Electron의 공개 타임라인은 여기서 확인할 수 있다.

향후 예정된 변경 사항에 대한 자세한 정보는 계획된 주요 변경 사항 페이지에서 찾아볼 수 있다.

Google Summer of Code 2024

· 6 min read

Electron이 2024년 Google Summer of Code(GSoC)의 20번째 멘토링 기관으로 선정되었다는 소식을 전하게 되어 기쁩니다! Google Summer of Code는 오픈소스 소프트웨어 개발에 새로운 기여자를 유치하는 데 중점을 둔 글로벌 프로그램입니다.

프로그램에 대한 자세한 내용은 Google의 Summer of Code 홈페이지에서 확인할 수 있습니다.

우리 소개

Electron은 웹 기술을 활용해 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있는 자바스크립트 프레임워크다. Electron의 핵심 프레임워크는 ChromiumNode.js를 기반으로 빌드된 컴파일된 바이너리 실행 파일이며, 주로 C++로 작성되었다.

Electron 코어 외에도, 우리는 Electron 생태계를 유지하고 발전시키기 위해 다양한 프로젝트를 진행하고 있다. 주요 프로젝트는 다음과 같다:

Summer of Code 기여자로서, 여러분은 github.com/electron 아래의 다양한 프로젝트 중 하나에서 Electron의 핵심 기여자들과 함께 협업하게 될 것이다.

적용 전에

Electron에 익숙하지 않다면, 먼저 공식 문서를 읽고 Electron Fiddle에서 예제를 직접 실행해보는 것을 추천한다.

Electron 앱 배포에 대해 더 알고 싶다면, Electron Forge를 사용해 샘플 애플리케이션을 만들어보자:

npm init electron-app@latest my-app

코드를 어느 정도 익힌 후에는 Electron Discord 서버에 참여해 대화에 동참해보자.

info

Google Summer of Code에 처음 참여하거나 오픈 소스에 익숙하지 않다면, 커뮤니티와 소통하기 전에 Google의 컨트리뷰터 가이드를 먼저 읽어보는 것을 권장한다.

제안서 작성하기

Electron과 협업에 관심이 있다면, 먼저 준비된 일곱 가지 프로젝트 아이디어 초안을 확인해 보자. 현재 모든 아이디어는 제안을 받고 있다.

다른 아이디어를 제안하고 싶다면, 제안된 프로젝트 목록에 없는 새로운 아이디어도 검토할 수 있다. 단, 접근 방식을 철저히 정리하고 상세히 설명해야 한다. 확신이 없다면, 우리가 제안한 아이디어를 따르는 것을 권장한다.

지원서에는 다음 내용을 포함해야 한다:

  • 제안서: 여름 동안 달성할 계획을 상세히 설명한 문서
  • 개발자로서의 배경: 이력서가 있다면 사본을 첨부한다. 그렇지 않다면, 과거의 기술 경험에 대해 설명한다.
    • 특정 분야에서 경험이 부족하더라도 자격이 박탈되지는 않지만, 멘토들이 최상의 지원 계획을 세우고 여름 프로젝트가 성공할 수 있도록 도움을 줄 것이다.

Electron 지원서 제출에 대한 상세 가이드는 여기에서 확인할 수 있다. 제안서는 Google Summer of Code 포털에 직접 제출해야 한다. Electron 팀에 이메일로 보낸 제안서는 최종 제출로 간주되지 않는다.

제안서 작성에 대한 추가 지침이 필요하거나 무엇을 포함해야 할지 확실하지 않다면, Google Summer of Code의 공식 제안서 작성 가이드를 따르는 것을 권장한다.

지원은 2024년 3월 18일에 시작되어 2024년 4월 2일에 마감된다.

info

2022년 Google Summer of Code 인턴인 @aryanshridhar는 훌륭한 작업을 했다! Aryan이 Electron과 함께 여름 동안 어떤 작업을 했는지 궁금하다면, 2022 GSoC 프로그램 아카이브에서 그의 보고서를 읽어볼 수 있다.

궁금한 점이 있나요?

블로그 글에서 다루지 않은 질문이나 제안서 초안에 대한 문의가 있다면, summer-of-code@electronjs.org로 이메일을 보내거나 GSoC FAQ를 확인해 보세요!

참고 자료