Skip to main content

9 posts tagged with "Ecosystem"

'Blog posts about Electron's package ecosystem'

View All Tags

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에서 커뮤니티 지원을 받을 수도 있습니다.

Ecosystem 2023 Recap

· 10 min read

2023년 Electron 개발자 생태계의 개선과 변화를 돌아보며


지난 몇 달 동안, 우리는 Electron 앱의 개발자 경험을 한층 더 강화하기 위해 Electron 생태계 전반에 걸쳐 다양한 변화를 준비해 왔다. Electron HQ에서 직접 전해드리는 최신 업데이트를 간략히 소개한다.

Electron Forge 7 그리고 그 이후

Electron Forge 7 — Electron 애플리케이션을 패키징하고 배포하기 위한 올인원 도구의 최신 메이저 버전 — 이 출시되었다.

Forge 6가 v5에서 완전히 재작성된 것과 달리, v7은 범위가 더 작지만 여전히 몇 가지 주요 변경 사항이 포함되어 있다. 앞으로는 주요 변경이 필요할 때마다 Forge의 메이저 버전을 계속 출시할 계획이다.

더 자세한 내용은 GitHub의 전체 Forge v7.0.0 변경 로그를 참고한다.

주요 변경 사항

  • macOS notarization을 위해 notarytool로 전환: 2023-11-01부터 Apple은 기존의 altool을 더 이상 지원하지 않으며, 이번 릴리스에서는 Electron Forge에서 완전히 제거했다.

  • 최소 Node.js 버전을 v16.4.0으로 상향: 이번 릴리스부터는 Node.js 버전 16.4.0 이상이 필수 요구 사항이다.

  • electron-prebuiltelectron-prebuilt-compile 지원 중단: electron-prebuiltElectron의 npm 모듈 초기 이름이었지만, v1.3.1부터 electron으로 대체되었다. electron-prebuilt-compile은 향상된 개발자 경험(DX) 기능을 제공하는 대안이었으나, 프로젝트로 더 이상 유지되지 않았다.

주요 내용

  • Google Cloud Storage publisher: 정적 자동 업데이트를 더 잘 지원하기 위해, Electron Forge가 이제 Google Cloud Storage에 직접 게시할 수 있게 되었다!
  • ESM forge.config.js 지원: Electron Forge가 이제 ESM forge.config.js 파일을 지원한다. (추가로, Electron 28에서 ESM 진입점 지원을 기대해도 좋다.)
  • Makers의 병렬 실행: Electron Forge 6에서 Makers는 ✨레거시✨ 이유로 순차적으로 실행되었다. 이후 Make 단계의 병렬화를 테스트한 결과 부작용 없이 성공했기 때문에, 같은 플랫폼에서 여러 타겟을 빌드할 때 속도가 빨라질 것이다!
감사합니다!

🙇 GCS Publisher와 Forge 구성에서의 ESM 지원을 위해 기여해 주신 **mahnunchik**에게 큰 감사를 드립니다!

더 나은 정적 저장소 기반 자동 업데이트

Squirrel.Windows와 Squirrel.Mac은 Electron의 내장 autoUpdater 모듈을 지원하는 플랫폼별 업데이트 기술이다. 두 프로젝트는 두 가지 방법으로 자동 업데이트를 제공한다:

  • Squirrel과 호환되는 업데이트 서버
  • 정적 저장소 프로바이더(예: AWS, Google Cloud Platform, Microsoft Azure 등)에 호스팅된 매니페스트 URL

업데이트 서버 방식은 전통적으로 Electron 앱에 권장되는 접근 방식이었으며, 업데이트 로직을 추가로 커스터마이징할 수 있다. 하지만 이 방식은 주요 단점이 있다. 클로즈드 소스 앱인 경우 자체 서버 인스턴스를 유지해야 한다.

반면, 정적 저장소 방식은 항상 가능했지만 Electron 내에서 문서화되지 않았고, Electron 도구 패키지 전반에서 지원이 미흡했다.

@MarshallOfSound의 훌륭한 작업 덕분에 서버리스 자동 앱 업데이트가 크게 간소화되었다:

  • Electron Forge의 Zip 및 Squirrel.Windows 메이커를 이제 autoUpdater와 호환되는 업데이트 매니페스트를 출력하도록 구성할 수 있다.
  • update-electron-app의 새로운 메이저 버전(v2.0.0)은 이제 생성된 매니페스트를 update.electronjs.org 서버의 대안으로 읽을 수 있다.

메이커와 퍼블리셔가 클라우드 파일 저장소에 업데이트 매니페스트를 업로드하도록 구성되면, 몇 줄의 설정만으로 자동 업데이트를 활성화할 수 있다:

const { updateElectronApp, UpdateSourceType } = require('update-electron-app');

updateElectronApp({
updateSource: {
type: UpdateSourceType.StaticStorage,
baseUrl: `https://my-manifest.url/${process.platform}/${process.arch}`,
},
});
추가 자료

📦 더 알고 싶다면? 자세한 가이드는 Forge의 자동 업데이트 문서를 참고하자.

@electron/ 확장 생태계

Electron이 처음 시작되었을 때, 커뮤니티는 Electron 앱을 개발하고, 패키징하며, 배포하는 과정을 개선하기 위해 다양한 패키지를 출시했다. 시간이 지나면서 이러한 패키지 중 상당수가 Electron의 GitHub 조직으로 통합되었고, 핵심 팀이 유지보수를 담당하게 되었다.

2022년부터는 이러한 퍼스트파티 도구들을 npm의 @electron/ 네임스페이스 아래로 통합하기 시작했다. 이 변경으로 인해 electron-foo로 불리던 패키지들은 이제 npm에서 @electron/foo로, electron/electron-foo로 명명되던 저장소들은 GitHub에서 electron/foo로 변경되었다. 이러한 변화는 퍼스트파티 프로젝트와 사용자 프로젝트를 명확히 구분하는 데 도움을 준다. 여기에는 다음과 같이 널리 사용되는 패키지들이 포함된다:

  • @electron/asar
  • @electron/fuses
  • @electron/get
  • @electron/notarize
  • @electron/osx-sign
  • @electron/packager
  • @electron/rebuild
  • @electron/remote
  • @electron/symbolicate-mac
  • @electron/universal

앞으로 출시될 모든 퍼스트파티 패키지도 @electron/ 네임스페이스 아래에 포함될 예정이다. 이 규칙에는 두 가지 예외가 있다:

  • Electron 코어는 계속해서 electron 패키지로 출시된다.
  • Electron Forge는 모든 모노레포 패키지를 @electron-forge/ 네임스페이스 아래에 출시한다.
스타 요청

⭐ 이 과정에서 실수로 electron/packager 저장소를 비공개로 전환했는데, 이로 인해 GitHub 스타 카운트가 초기화되는 부작용이 발생했다(초기화 전에는 9000개 이상이었다). Packager를 활발히 사용 중이라면 ⭐ 스타 ⭐를 눌러주시면 감사하겠다!

@electron/windows-sign 소개

2023년 6월 1일부터 업계 표준이 변경되어 Windows 코드 서명 인증서의 키를 FIPS 호환 하드웨어에 저장해야 한다. 이로 인해 CI 환경에서 빌드와 서명을 진행하는 앱들은 코드 서명 과정이 훨씬 복잡해졌다. 기존의 많은 Electron 도구들은 인증서 파일과 비밀번호를 설정 파라미터로 받아 하드코딩된 로직을 통해 서명을 시도했기 때문이다.

이 문제는 Electron 개발자들에게 공통적인 어려움으로 여겨졌다. 그래서 우리는 macOS에서 @electron/osx-sign가 하는 것처럼 Windows 코드 서명을 독립적인 단계로 분리하는 더 나은 해결책을 개발했다.

현재 이 패키지는 Electron Forge 툴체인에 완전히 통합될 예정이지만, 지금은 독립적으로 사용할 수 있다. npm install --save-dev @electron/windows-sign 명령어를 통해 설치할 수 있으며, 프로그래밍 방식이나 CLI를 통해 활용할 수 있다.

레포지토리의 이슈 트래커에서 여러분의 피드백을 기다린다!

다음은 무엇을 준비할까?

다음 달부터 연말 조용한 기간에 들어간다. 이 기간 동안 2024년에 더 나은 Electron 개발 환경을 만들기 위한 방법을 고민할 예정이다.

개선하고 싶은 부분이나 추가했으면 하는 기능이 있다면 알려주기 바란다!

Introducing Electron Forge 6

· 11 min read

Electron Forge v6.0.0 출시를 발표하게 되어 기쁩니다! 이번 릴리스는 2018년 이후 첫 번째 메이저 업데이트이며, 프로젝트가 electron-userland에서 Github의 메인 electron 조직으로 이동했습니다.

Electron Forge의 새로운 기능과 여러분의 앱에 적용하는 방법을 계속 읽어보세요!

Electron Forge란 무엇인가?

Electron Forge는 Electron 애플리케이션을 패키징하고 배포하기 위한 도구다. Electron의 빌드 도구 생태계를 단일 확장 가능한 인터페이스로 통합하여 누구나 쉽게 Electron 앱을 만들 수 있도록 돕는다.

주요 기능은 다음과 같다:

  • 📦 애플리케이션 패키징 및 코드 서명
  • 🚚 Windows, macOS, Linux에서 커스텀 설치 프로그램 지원 (DMG, deb, MSI, PKG, AppX 등)
  • ☁️ 클라우드 프로바이더를 위한 자동화된 배포 기능 (GitHub, S3, Bitbucket 등)
  • ⚡️ webpack과 TypeScript를 위한 사용하기 쉬운 보일러플레이트 템플릿 제공
  • ⚙️ 네이티브 Node.js 모듈 지원
  • 🔌 확장 가능한 JavaScript 플러그인 API
더 알아보기

Forge의 철학과 아키텍처에 대해 더 알고 싶다면 [Why Electron Forge] 문서를 참고하자.

v6의 새로운 점

완전히 다시 작성됨

v1부터 v5까지 Electron Forge는 현재 중단된 electron-compile 프로젝트를 기반으로 했다. Forge 6는 완전히 다시 작성되어 새로운 모듈식 아키텍처를 도입했으며, 이는 모든 Electron 애플리케이션의 요구를 충족하도록 확장할 수 있다.

지난 몇 년 동안 Forge v6.0.0-beta는 v5와 동일한 기능을 구현했고, 코드 변경이 크게 줄어들어 이제 일반적으로 사용할 준비가 되었다.

잘못된 패키지를 설치하지 마세요

5버전 이하에서는 Electron Forge가 npm의 electron-forge 패키지로 배포되었다. v6부터는 Forge가 모노레포 프로젝트로 구조화되어 여러 작은 프로젝트로 구성된다.

공식 지원

역사적으로 Electron 관리자들은 빌드 도구에 대해 특별한 의견을 제시하지 않았고, 이를 다양한 커뮤니티 패키지에 맡겨왔다. 하지만 Electron이 프로젝트로서 성숙해짐에 따라, 새로운 Electron 개발자들이 자신의 앱을 빌드하고 배포하기 위해 어떤 도구가 필요한지 이해하기가 점점 어려워졌다.

Electron 개발자들이 배포 과정을 더 쉽게 따라갈 수 있도록 우리는 Forge를 Electron의 공식적인 통합 빌드 파이프라인으로 지정하기로 결정했다.

지난 한 해 동안, 우리는 Forge를 점진적으로 공식 Electron 문서에 통합해왔고, 최근에는 Forge를 electron-userland/electron-forge에서 electron/forge 리포지토리로 이전했다. 이제 우리는 드디어 Electron Forge를 일반 사용자들에게 공개할 준비가 되었다!

시작하기

새로운 Forge 프로젝트 초기화

Electron Forge 프로젝트를 새로 시작하려면 create-electron-app CLI 스크립트를 사용하면 된다.

yarn create electron-app my-app --template=webpack
cd my-app
yarn start

이 스크립트는 my-app 폴더에 Electron 프로젝트를 생성한다. 프로젝트는 완전한 JavaScript 번들링과 사전 구성된 빌드 파이프라인을 포함한다.

더 자세한 정보는 Forge 문서의 시작하기 가이드를 참고하면 된다.

퍼스트클래스 웹팩 지원

위 코드 조각은 Forge의 [Webpack Template]을 사용한다. 이 템플릿은 새로운 Electron 프로젝트를 시작하기에 적합하다. 이 템플릿은 @electron-forge/plugin-webpack 플러그인을 기반으로 한다. 이 플러그인은 웹팩과 Electron Forge를 다음과 같은 방식으로 통합한다:

  • webpack-dev-server를 통해 로컬 개발 흐름을 개선한다. 렌더러에서 HMR을 지원한다.
  • 애플리케이션 패키징 전에 웹팩 번들에 대한 빌드 로직을 처리한다.
  • 웹팩 번들링 과정에서 네이티브 Node 모듈을 지원한다.

타입스크립트 지원이 필요하다면 [Webpack + TypeScript Template]을 사용하는 것을 고려해 보면 된다.

기존 프로젝트 가져오기

Electron Forge CLI는 기존 Electron 프로젝트를 가져오는 명령어도 제공한다.

cd my-app
yarn add --dev @electron-forge/cli
yarn electron-forge import

import 명령어를 사용하면 Electron Forge는 몇 가지 핵심 의존성을 추가하고 새로운 forge.config.js 설정 파일을 생성한다. 만약 기존에 사용하던 빌드 도구(예: Electron Packager, Electron Builder, 또는 Forge 5)가 있다면 가능한 한 많은 설정을 자동으로 마이그레이션한다. 일부 기존 설정은 수동으로 마이그레이션해야 할 수도 있다.

수동 마이그레이션에 대한 자세한 내용은 Forge의 [가져오기 문서]에서 확인할 수 있다. 도움이 필요하다면 Discord 서버를 방문해 보자!

Forge로 전환해야 하는 이유

Electron 앱을 패키징하고 배포하기 위한 도구가 이미 있다 하더라도, Electron Forge를 도입함으로써 얻는 이점이 초기 전환 비용을 상쇄할 수 있다.

Forge를 사용하는 데에는 두 가지 주요 이점이 있다:

  1. Forge는 Electron에서 새로운 기능이 지원되자마자 앱 빌드에 바로 적용한다. 이 경우, 새로운 도구 지원을 직접 연결하거나, 다른 패키지가 해당 지원을 구현하기를 기다릴 필요 없이 바로 업그레이드할 수 있다. 최근 예시로는 macOS 유니버설 바이너리ASAR 무결성 검사가 있다.

  2. Forge의 다중 패키지 아키텍처는 이해와 확장이 쉽다. Forge는 명확한 책임을 가진 여러 작은 패키지로 구성되어 있어 코드 흐름을 따라가기 쉽다. 또한, Forge의 확장 가능한 API 설계는 제공된 구성 옵션과 별도로 고급 사용 사례를 위한 추가 빌드 로직을 작성할 수 있게 한다. 커스텀 Forge 플러그인, 메이커, 퍼블리셔를 작성하는 방법에 대한 자세한 내용은 문서의 Electron Forge 확장 섹션을 참고한다.

주요 변경 사항

Forge 6은 오랜 시간 동안 베타 단계를 거쳤으며, 릴리스 속도가 점차 느려졌다. 그러나 2022년 하반기에 개발 속도를 높였고, 최종 안정 버전인 v6.0.0 출시 전 마지막 몇 차례의 릴리스를 통해 주요 변경 사항을 적용했다.

Electron Forge 6 베타 사용자라면 최근 베타 버전(>=6.0.0-beta.65)에서 발생한 주요 변경 사항 목록을 확인하려면 v6.0.0 GitHub 릴리스 노트를 참고한다.

전체 변경 사항과 커밋 내역은 저장소의 CHANGELOG.md에서 확인할 수 있다.

여러분의 피드백을 보내주세요!

Electron Forge 팀은 항상 프로젝트를 더 나은 방향으로 개선하기 위해 노력하고 있습니다. 여러분의 의견을 통해 Electron Forge를 더욱 발전시킬 수 있습니다.

여러분은 다음과 같은 방법으로 도움을 줄 수 있습니다:

  • 기능 요청 제출
  • 이슈 등록
  • 피드백 공유

또한 공식 Electron Discord 서버에 참여하여 Electron Forge 관련 토론에 참여할 수 있습니다. Discord에는 Electron Forge 전용 채널이 마련되어 있습니다.

https://electronforge.io 사이트의 문서에 대한 피드백을 제공하고 싶다면, electron-forge/electron-forge-docs 저장소와 동기화된 GitBook 인스턴스를 활용할 수 있습니다.

Spectron Deprecation Notice

· 4 min read

Spectron은 2022년 2월 1일부터 더 이상 지원되지 않는다.


2022년 2월부터 Spectron은 Electron 팀에 의해 공식적으로 지원이 중단된다.

Spectron이 deprecated되는 이유

Spectron은 Electron의 각 새 버전마다 새로운 릴리즈를 꾸준히 제공해왔다. 하지만 이 프로젝트는 1년 이상 동안 유지보수와 개선이 거의 이루어지지 않았으며, 현재 전담 관리자가 없다. Electron 14에서 remote 모듈이 Electron 코어에서 외부 모듈로 이동하면서, Spectron이 안정적으로 동작하려면 대대적인 재작성이 필요하다.

Spectron의 지속적인 유지보수를 위한 여러 옵션을 검토한 후, Electron 팀은 2022년에 Spectron을 deprecated하기로 결정했다.

지원 중단 일정

다음은 지원 중단 계획에 대한 일정이다:

  • 2021년 11월 - 2022년 1월: Electron 팀은 커뮤니티로부터 풀 리퀘스트를 계속 받는다.
  • 2022년 1월: Spectron 지원 중단에 대한 최종 공지가 발표된다.
  • 2022년 2월 1일: Spectron 저장소가 "보관됨"으로 표시된다. 더 이상 풀 리퀘스트를 받지 않는다.

2022년 2월 1일 이후에도 Electron은 Spectron 저장소를 무기한 유지할 예정이다. 이를 통해 다른 프로젝트에서 Spectron 코드를 포크하거나 사용할 수 있도록 한다. Spectron에 여전히 의존하는 프로젝트들이 원활히 전환할 수 있기를 바란다.

Spectron 대체 솔루션

현재 프로젝트에서 Spectron을 사용 중이고 다른 테스트 솔루션으로 전환하고 싶다면, 자동화 테스트 가이드를 참고한다.

Spectron 대신 사용할 수 있는 여러 추천 대체 솔루션이 있다. Playwright와 WebDriverIO가 대표적이다. 각 옵션에 대한 공식 튜토리얼은 자동화 테스트 문서에서 확인할 수 있다.

다음 단계

Electron 팀은 여러분이 Spectron과 Electron을 사용해 주셔서 감사하게 생각한다. 많은 분들이 앱 테스트를 위해 Spectron에 의존하고 있다는 것을 잘 알고 있으며, 이번 전환 과정을 가능한 한 원활하게 진행하려고 최선을 다하고 있다. Electron을 선택해 주셔서 다시 한번 감사드린다!

오픈소스 앱을 위한 간편한 자동 업데이트

· 5 min read

오늘, 우리는 오픈소스 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 앱의 지속 가능한 미래를 기원한다!

Announcing TypeScript support in Electron

· 8 min read

electron npm 패키지에는 이제 Electron API 전체에 대한 상세한 주석을 제공하는 TypeScript 정의 파일이 포함되어 있다. 이 주석들은 순수 JavaScript를 작성하더라도 Electron 개발 경험을 향상시킬 수 있다. 프로젝트에서 최신 Electron 타입 정의를 사용하려면 npm install electron을 실행하면 된다.


TypeScript는 Microsoft가 만든 오픈소스 프로그래밍 언어다. JavaScript의 상위 집합으로, 정적 타입 지원을 추가해 언어를 확장한다. 최근 몇 년 동안 TypeScript 커뮤니티는 빠르게 성장했으며, 최근 Stack Overflow 개발자 설문조사에서 가장 사랑받는 프로그래밍 언어 중 하나로 꼽혔다. TypeScript는 "확장 가능한 JavaScript"로 불리며, GitHub, Slack, Microsoft와 같은 팀들이 수백만 명이 사용하는 확장 가능한 Electron 앱을 작성하는 데 활용하고 있다.

TypeScript는 클래스, 객체 구조 분해, async/await와 같은 JavaScript의 최신 언어 기능을 지원하지만, 진정한 차별점은 타입 주석이다. 프로그램의 입력 및 출력 데이터 타입을 선언하면 컴파일 시 오류를 찾는 데 도움을 주어 버그를 줄일 수 있으며, 주석은 프로그램의 작동 방식에 대한 공식적인 선언 역할도 한다.

라이브러리가 순수 JavaScript로 작성된 경우, 타입은 종종 문서 작성 시 부차적으로 모호하게 정의된다. 함수는 문서화된 것보다 더 많은 타입을 허용할 수 있거나, 문서화되지 않은 숨겨진 제약 조건이 있을 수 있어 런타임 오류로 이어질 수 있다.

TypeScript는 정의 파일로 이 문제를 해결한다. TypeScript 정의 파일은 라이브러리의 모든 함수와 예상되는 입력 및 출력 타입을 설명한다. 라이브러리 작성자가 배포된 라이브러리에 TypeScript 정의 파일을 포함시키면, 라이브러리 사용자는 에디터 내에서 바로 API를 탐색할 수 있으며, 종종 라이브러리 문서를 참조하지 않고도 바로 사용할 수 있다.

Angular, Vue.js, node-github (그리고 이제 Electron!)과 같은 많은 인기 프로젝트들은 자체 정의 파일을 컴파일하여 배포된 npm 패키지에 포함시킨다. 자체 정의 파일을 포함하지 않는 프로젝트의 경우, 커뮤니티에서 관리하는 정의 파일의 제3자 생태계인 DefinitelyTyped가 있다.

설치

Electron 버전 1.6.10부터 모든 릴리스에는 자체 TypeScript 정의 파일이 포함된다. npm에서 electron 패키지를 설치하면 electron.d.ts 파일이 자동으로 설치된 패키지와 함께 번들로 제공된다.

Electron을 설치하는 가장 안전한 방법은 정확한 버전 번호를 사용하는 것이다:

npm install electron --save-dev --save-exact

혹은 yarn을 사용한다면:

yarn add electron --dev --exact

이미 @types/electron이나 @types/node와 같은 서드파티 정의를 사용하고 있었다면, 충돌을 방지하기 위해 Electron 프로젝트에서 이를 제거해야 한다.

정의 파일은 구조화된 API 문서에서 파생되었기 때문에, 항상 Electron의 API 문서와 일치한다. 단순히 electron을 설치하면 사용 중인 Electron 버전에 맞는 최신 TypeScript 정의를 항상 얻을 수 있다.

사용 방법

Electron의 새로운 TypeScript 어노테이션을 설치하고 사용하는 방법에 대한 요약은 다음 짧은 데모 스크린캐스트를 참고한다:

Visual Studio Code를 사용한다면, 이미 TypeScript 지원이 내장되어 있다. 또한 커뮤니티에서 관리하는 플러그인도 사용할 수 있다. Atom, Sublime, vim, 그리고 기타 에디터를 위한 플러그인이 있다.

에디터에서 TypeScript를 설정하면, 자동 완성 제안, 인라인 메서드 참조, 인자 검사 등과 같은 컨텍스트 인식 동작을 확인할 수 있다.

메서드 자동 완성

메서드 참조

인자 검사

TypeScript 시작하기

TypeScript가 처음이라면, Microsoft의 입문 동영상을 통해 이 언어가 왜 만들어졌는지, 어떻게 동작하는지, 사용 방법과 앞으로의 방향에 대해 간략히 살펴볼 수 있다.

또한 공식 TypeScript 웹사이트에서 핸드북플레이그라운드를 제공한다.

TypeScript는 JavaScript의 상위 집합이므로, 기존 JavaScript 코드는 이미 유효한 TypeScript 코드이다. 이는 기존 JavaScript 프로젝트를 점진적으로 TypeScript로 전환할 수 있으며, 필요에 따라 새로운 언어 기능을 추가할 수 있음을 의미한다.

감사의 말

이 프로젝트는 Electron 오픈소스 커뮤니티의 도움 없이는 가능하지 않았을 것입니다. 특히 Samuel Attard, Felix Rieseberg, Birunthan Mohanathas, Milan Burda, Brendan Forster를 비롯한 많은 분들이 버그 수정, 문서 개선, 기술적 조언 등으로 큰 도움을 주셨습니다. 여러분의 기여에 깊은 감사를 드립니다.

지원

Electron의 새로운 TypeScript 정의 파일을 사용하면서 문제가 발생하면, electron-typescript-definitions 저장소에 이슈를 등록하세요.

TypeScript를 즐겁게 사용하세요!

Electron Userland

· 6 min read

Electron 웹사이트에 새로운 userland 섹션을 추가했다. 이 섹션은 우리의 활발한 오픈소스 생태계를 이루는 사람들, 패키지, 앱을 사용자가 쉽게 발견할 수 있도록 돕는다.


github-contributors

유저랜드의 기원

유저랜드는 소프트웨어 커뮤니티의 사람들이 도구와 아이디어를 공유하는 장소다. 이 용어는 Unix 커뮤니티에서 시작되었으며, 커널 외부에서 실행되는 모든 프로그램을 의미했다. 하지만 오늘날에는 더 넓은 의미를 지닌다. 현재 JavaScript 커뮤니티에서 유저랜드를 언급할 때, 대부분 npm 패키지 레지스트리를 가리킨다. 여기서 대부분의 실험과 혁신이 이루어지며, Node와 JavaScript 언어(Unix 커널과 유사하게)는 비교적 작고 안정적인 핵심 기능 집합을 유지한다.

Node와 Electron

Node와 마찬가지로 Electron도 핵심 API 세트를 제공한다. 이 API들은 멀티플랫폼 데스크톱 애플리케이션 개발에 필요한 기본 기능을 지원한다. 이러한 설계 철학은 Electron이 사용 방식에 대해 지나치게 규제하지 않으면서도 유연한 도구로 남을 수 있게 한다.

Userland는 "core"의 상대 개념으로, 사용자가 Electron의 기능을 확장하는 도구를 만들고 공유할 수 있게 한다.

데이터 수집

우리 생태계의 트렌드를 더 잘 이해하기 위해 electron이나 electron-prebuilt에 의존하는 15,000개의 공개 GitHub 저장소의 메타데이터를 분석했다.

GitHub API, libraries.io API, 그리고 npm 레지스트리를 사용해 의존성, 개발 의존성, 의존 패키지, 패키지 작성자, 저장소 기여자, 다운로드 수, 포크 수, 스타 수 등의 정보를 수집했다.

이 데이터를 활용해 다음과 같은 보고서를 생성했다:

결과 필터링

앱 의존성이나 스타를 받은 앱과 같은 보고서는 패키지, 앱, 레포지토리를 나열하며, 결과를 필터링할 수 있는 텍스트 입력창을 제공한다.

이 입력창에 텍스트를 입력하면 페이지의 URL이 실시간으로 업데이트된다. 이를 통해 특정 조건에 맞는 userland 데이터를 나타내는 URL을 복사하고 다른 사람과 공유할 수 있다.

babel

더 많은 내용이 추가될 예정

이번에 공개한 첫 번째 보고서는 시작에 불과하다. 우리는 Electron 커뮤니티가 어떻게 프로젝트를 구축하고 있는지에 대한 데이터를 계속 수집할 것이며, 웹사이트에 새로운 보고서를 추가할 예정이다.

이 데이터를 수집하고 표시하는 데 사용된 모든 도구는 오픈소스로 공개되어 있다:

이 보고서를 개선할 아이디어가 있다면, 웹사이트 저장소에 이슈를 열어 알려주거나 위에 언급된 저장소 중 하나에 제안해 주길 바란다.

Electron 커뮤니티 여러분 덕분에 사용자 영역이 오늘날의 모습을 갖추게 되었다. 감사하다!

Accessibility Tools

· 3 min read

접근성 있는 애플리케이션을 만드는 것은 중요하다. 우리는 DevtronSpectron에 새로운 기능을 추가해 개발자들이 더 나은 애플리케이션을 만들 수 있도록 지원하게 되어 기쁘게 생각한다.


Electron 애플리케이션의 접근성 문제는 웹사이트와 유사하다. 둘 다 궁극적으로 HTML을 기반으로 하기 때문이다. 그러나 Electron 앱은 URL이 없어 접근성 감사 도구를 사용할 수 없다는 점에서 차이가 있다.

이 새로운 기능들은 이러한 감사 도구를 Electron 앱에 제공한다. Spectron을 통해 테스트에 접근성 감사를 추가하거나 Devtron을 통해 DevTools 내에서 사용할 수 있다. 이 도구들의 요약을 확인하거나 더 자세한 정보를 원한다면 접근성 문서를 참고하라.

Spectron

테스트 프레임워크인 Spectron에서 이제 애플리케이션의 각 윈도우와 <webview> 태그에 대한 접근성 검사를 수행할 수 있다. 예를 들어:

app.client.auditAccessibility().then(function (audit) {
if (audit.failed) {
console.error(audit.message);
}
});

이 기능에 대한 자세한 내용은 Spectron의 문서에서 확인할 수 있다.

Devtron에는 새로운 접근성 탭이 추가되었다. 이 탭을 사용하면 앱 내 페이지를 감사하고, 결과를 정렬하거나 필터링할 수 있다.

devtron screenshot

이 도구들은 모두 Google이 Chrome용으로 개발한 Accessibility Developer Tools 라이브러리를 사용한다. 이 라이브러리가 사용하는 접근성 감사 규칙에 대해 더 알고 싶다면 저장소의 위키를 참고하면 된다.

Electron용으로 유용한 다른 접근성 도구를 알고 있다면, 접근성 문서에 풀 리퀘스트를 통해 추가할 수 있다.

Mac App Store와 Windows 자동 업데이터를 Electron에 적용하기

· 3 min read

최근 Electron에 두 가지 흥미로운 기능이 추가되었다. Mac App Store와 호환되는 빌드와 내장된 Windows 자동 업데이터 기능이다.

Mac App Store 지원

v0.34.0 버전부터 각 Electron 릴리스에는 Mac App Store와 호환되는 빌드가 포함된다. 이전에는 Electron으로 빌드한 애플리케이션이 Mac App Store의 애플 요구 사항을 충족하지 못했다. 이러한 요구 사항 중 대부분은 프라이빗 API 사용과 관련이 있다. Electron이 이러한 요구 사항을 충족하도록 샌드박스화하기 위해 두 모듈을 제거해야 했다:

  • crash-reporter
  • auto-updater

또한 DNS 변경 감지, 비디오 캡처, 접근성 기능과 관련된 일부 동작이 변경되었다. 이러한 변경 사항과 Mac App Store에 앱 제출에 대한 자세한 내용은 문서에서 확인할 수 있다. mas- 접두사가 붙은 배포판은 Electron 릴리스 페이지에서 찾을 수 있다.

관련 풀 리퀘스트: electron/electron#3108, electron/electron#2920

윈도우 자동 업데이터

Electron v0.34.1 버전에서 auto-updater 모듈이 Squirrel.Windows와 호환되도록 개선되었다. 이는 Electron이 OS X와 윈도우 모두에서 앱을 자동으로 업데이트할 수 있는 간편한 방법을 제공한다는 것을 의미한다. 윈도우에서 앱을 자동 업데이트하도록 설정하는 방법에 대한 자세한 내용은 문서에서 확인할 수 있다.

관련 풀 리퀘스트: electron/electron#1984