5 posts tagged with "Features"

Electron의 API Working Group은 Electron 코어에 대한 주요 변경 사항을 관리하기 위해 공개적인 Requests for Comments (RFC) 프로세스를 도입하고 있다.

RFC가 필요한 이유​

간단히 말해, 우리는 Electron 코어에 중대한 변경 사항을 적용하는 과정을 원활하게 만들고자 한다.

현재 새로운 코드 변경은 대부분 GitHub 이슈와 풀 리퀘스트를 통해 논의된다. 대부분의 Electron 변경 사항에 대해 이 시스템은 잘 작동한다. 많은 버그 수정, 문서 변경, 그리고 새로운 기능들은 GitHub의 표준 워크플로우를 통해 비동기적으로 리뷰하고 병합하기에 충분히 직관적이다.

그러나 더 중요한 변경 사항, 예를 들어 큰 API 영역이나 대부분의 Electron 앱에 영향을 미칠 수 있는 호환성 깨짐(breaking changes)과 같은 경우, 코드 대부분이 작성되기 전에 아이디어 단계에서 리뷰가 이루어지는 것이 합리적이다.

이 프로세스는 공개적으로 진행되도록 설계되어 있다. 이를 통해 오픈소스 커뮤니티가 Electron에 반영되기 전에 잠재적인 변경 사항에 대해 피드백을 제공하기가 더 쉬워진다.

동작 원리​

전체 RFC 프로세스는 GitHub의 electron/rfcs 저장소에서 관리된다. 각 단계는 저장소의 README에 자세히 설명되어 있다.

간단히 설명하면, RFC는 electron/rfcs 저장소에 PR이 생성되면 Proposed 상태가 된다. Proposed RFC는 다음과 같이 변한다:

• Active: PR이 저장소의 main 브랜치로 병합되면 Active 상태가 된다. 이는 Electron 관리자가 electron/electron에서 구현을 허용한다는 의미다.
• Declined: PR이 최종적으로 거부되면 Declined 상태가 된다.

Active 상태의 RFC는 구현이 electron/electron에 병합되면 Completed 상태가 된다.

누가 참여할 수 있나요?​

Electron 커뮤니티의 누구나 electron/rfcs 저장소에 RFC를 제출하거나 피드백을 남길 수 있습니다!

• 현재 활성화된 RFC 목록을 확인하려면 저장소의 text 폴더를 참고하세요.
• 제안된 RFC에 대한 피드백을 남기려면 열려 있는 PR 목록을 확인하세요.
• 새로운 RFC를 제출하려면 저장소의 README와 RFC 템플릿을 참고하세요.

이 과정을 양방향 대화로 만들고, 커뮤니티의 참여를 장려하여 향후 이러한 API를 사용할 수 있는 Electron 앱으로부터 다양한 의견을 수집하고자 합니다. 현재 제안된 RFC에 피드백을 남기고 싶다면, Electron 메인테이너들이 이미 몇 가지를 작성해 두었습니다:

• Electron C APIs
• Preload Realm for Service Workers

크레딧​

Electron의 RFC 프로세스는 여러 오픈소스 RFC 프로세스를 참고하여 설계되었다. 아이디어와 주요 문구 작성에 영감을 준 프로젝트는 다음과 같다:

• emberjs/rfcs
• reactjs/rfcs
• rust-lang/rfcs
• tauri-apps/rfcs
• vuejs/rfcs
• yarnpkg/rfcs

Apple Silicon 하드웨어가 올해 말 출시됨에 따라, 여러분의 Electron 앱을 새로운 하드웨어에서 실행하기 위한 방법은 어떻게 될까?

Electron 11.0.0-beta.1 릴리스와 함께, Electron 팀은 Apple이 올해 말 출시할 예정인 새로운 Apple Silicon 하드웨어에서 실행되는 Electron 빌드를 제공하기 시작했다. 최신 베타 버전은 npm install electron@beta 명령어로 설치하거나 릴리스 웹사이트에서 직접 다운로드할 수 있다.

어떻게 동작하나?​

Electron 11부터는 인텔 맥과 애플 실리콘 맥을 위한 별도의 Electron 버전을 제공한다. 이 변경 전에는 이미 darwin-x64와 mas-x64 두 가지 아티팩트를 제공하고 있었는데, 후자는 Mac App Store 호환성을 위한 것이다. 이제 darwin-arm64와 mas-arm64라는 두 가지 새로운 아티팩트를 추가로 제공하며, 이는 앞서 언급한 아티팩트의 애플 실리콘 버전에 해당한다.

무엇을 해야 하나?​

여러분은 앱을 두 가지 버전으로 배포해야 한다. 하나는 x64(Intel Mac)용이고, 다른 하나는 arm64(Apple Silicon)용이다. 다행히도 electron-packager, electron-rebuild, 그리고 electron-forge는 이미 arm64 아키텍처를 지원한다. 이 패키지들의 최신 버전을 사용한다면, 타겟 아키텍처를 arm64로 업데이트한 후 앱이 원활하게 동작할 것이다.

앞으로 arm64와 x64 앱을 하나의 유니버설 바이너리로 통합할 수 있는 패키지를 출시할 예정이지만, 이 바이너리는 매우 크기 때문에 사용자에게 배포하기에는 적합하지 않을 것이다.

업데이트: 이 패키지는 이제 @electron/universal에서 사용할 수 있다. 이를 통해 패키징된 x64와 arm64 앱을 하나의 바이너리로 통합할 수 있다.

잠재적인 문제점​

네이티브 모듈​

새로운 아키텍처를 타겟팅하면서 여러 종속성을 업데이트해야 할 수 있으며, 이로 인해 빌드 문제가 발생할 수 있다. 아래는 참고를 위해 필요한 최소 버전의 종속성 목록이다.

이러한 종속성 버전 요구사항으로 인해 특정 네이티브 모듈을 수정하거나 업데이트해야 할 수 있다. 특히 Xcode 업그레이드는 새로운 버전의 macOS SDK를 도입할 수 있으며, 이는 네이티브 모듈의 빌드 실패를 유발할 수 있다는 점에 주의해야 한다.

어떻게 테스트할 수 있나요?​

현재 Apple Silicon 애플리케이션은 Apple Silicon 하드웨어에서만 실행된다. 이 글을 작성하는 시점에서는 상용 Apple Silicon 하드웨어가 출시되지 않았다. Developer Transition Kit이 있다면, 이를 통해 애플리케이션을 테스트할 수 있다. 그렇지 않다면, 상용 Apple Silicon 하드웨어가 출시될 때까지 기다려야 한다. 출시 후에야 애플리케이션이 정상적으로 작동하는지 확인할 수 있다.

Rosetta 2에 대해 알아보자​

Rosetta 2는 Apple의 최신 기술로, 새로운 arm64 Apple Silicon 하드웨어에서 x64 Intel 애플리케이션을 실행할 수 있게 해준다. x64 Electron 앱이 Rosetta 2에서 실행될 수는 있지만, 몇 가지 중요한 사항을 주의해야 한다(그리고 왜 네이티브 arm64 바이너리를 제공해야 하는지에 대한 이유도 있다).

• 앱의 성능이 크게 저하된다. Electron/V8은 JavaScript를 위해 JIT 컴파일을 사용하는데, Rosetta의 작동 방식 때문에 JIT가 두 번 실행된다(V8에서 한 번, Rosetta에서 한 번).
• Apple Silicon의 새로운 기술 이점을 잃게 된다. 예를 들어, 증가된 메모리 페이지 크기를 활용할 수 없다.
• 성능이 크게 저하된다는 점을 다시 한 번 강조한다.

새로운 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 1.6.3 베타 버전이 macOS Touch Bar에 대한 초기 지원을 포함하고 있다.

새로운 Touch Bar API를 통해 버튼, 라벨, 팝오버, 색상 선택기, 슬라이더, 그리고 간격 조절기를 추가할 수 있다. 이러한 엘리먼트들은 동적으로 업데이트할 수 있으며, 사용자와 상호작용할 때 이벤트를 발생시킨다.

이 API는 첫 번째 릴리스이기 때문에 향후 몇 번의 Electron 릴리스에 걸쳐 발전할 예정이다. 추가 업데이트는 릴리스 노트를 확인하고, 문제나 누락된 기능이 있다면 이슈를 열어보길 바란다.

이 버전은 npm install electron@beta를 통해 설치할 수 있으며, TouchBar와 BrowserWindow Electron 문서에서 더 자세한 내용을 확인할 수 있다.

이 기능을 Electron에 기여한 @MarshallOfSound에게 큰 감사를 표한다. 🎉

터치 바 예제​

아래는 터치 바를 활용해 간단한 슬롯 머신 게임을 만드는 예제이다. 이 예제는 터치 바를 생성하고 아이템을 스타일링하며, 윈도우와 연결하고 버튼 클릭 이벤트를 처리하며, 레이블을 동적으로 업데이트하는 방법을 보여준다.

const { app, BrowserWindow, TouchBar } = require('electron');

const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;

let spinning = false;

// 릴 레이블
const reel1 = new TouchBarLabel();
const reel2 = new TouchBarLabel();
const reel3 = new TouchBarLabel();

// 스핀 결과 레이블
const result = new TouchBarLabel();

// 스핀 버튼
const spin = new TouchBarButton({
  label: '🎰 Spin',
  backgroundColor: '#7851A9',
  click: () => {
    // 이미 스핀 중이면 클릭 무시
    if (spinning) {
      return;
    }

    spinning = true;
    result.label = '';

    let timeout = 10;
    const spinLength = 4 * 1000; // 4초
    const startTime = Date.now();

    const spinReels = () => {
      updateReels();

      if (Date.now() - startTime >= spinLength) {
        finishSpin();
      } else {
        // 각 스핀마다 속도를 조금씩 늦춤
        timeout *= 1.1;
        setTimeout(spinReels, timeout);
      }
    };

    spinReels();
  },
});

const getRandomValue = () => {
  const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
  return values[Math.floor(Math.random() * values.length)];
};

const updateReels = () => {
  reel1.label = getRandomValue();
  reel2.label = getRandomValue();
  reel3.label = getRandomValue();
};

const finishSpin = () => {
  const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
  if (uniqueValues === 1) {
    // 3개 모두 같은 경우
    result.label = '💰 Jackpot!';
    result.textColor = '#FDFF00';
  } else if (uniqueValues === 2) {
    // 2개가 같은 경우
    result.label = '😍 Winner!';
    result.textColor = '#FDFF00';
  } else {
    // 모두 다른 경우
    result.label = '🙁 Spin Again';
    result.textColor = null;
  }
  spinning = false;
};

const touchBar = new TouchBar([
  spin,
  new TouchBarSpacer({ size: 'large' }),
  reel1,
  new TouchBarSpacer({ size: 'small' }),
  reel2,
  new TouchBarSpacer({ size: 'small' }),
  reel3,
  new TouchBarSpacer({ size: 'large' }),
  result,
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    frame: false,
    titleBarStyle: 'hidden-inset',
    width: 200,
    height: 200,
    backgroundColor: '#000',
  });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

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

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

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

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

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

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

여기서 몇 가지 기능을 예제로 살펴보겠지만, 모든 기능에 대해 알고 싶다면 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 앱을 개발할 때 다음과 같은 멋진 기능들을 활용할 수 있다. 이 기능들은 다음과 같지만, 이에 국한되지 않는다:

• MouseEvent.getModifierState()
• CSS.escape()
• Fetch API Streaming

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

무엇이 가장 기대되나요?​

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