Windows API 개발을 위한 Electron 설정

이 가이드에서는 Windows API 개발을 위한 Electron 개발 환경을 설정하는 방법에 대해 설명합니다. 필요한 도구를 설치하고, project 초기화하고, Windows SDK를 구성합니다.

이 가이드를 마치면 다음과 같은 Electron 앱이 제공됩니다.

  • 최신 Windows API 호출(Windows SDK 및 Windows App SDK)
  • AI 기능(Phi Silica 또는 WinML)을 지원하는 네이티브 애드온을 사용할 수 있습니다.
  • 보호된 API를 테스트하기 위해 앱 ID를 사용하여 실행
  • 배포를 위해 서명된 MSIX로 패키지할 수 있음

필수 조건

  • Windows 11(Phi Silica를 사용하는 경우 코필로트+ PC)
  • Node.js - winget install OpenJS.NodeJS --source winget
  • .NET SDK v10 - winget install Microsoft.DotNet.SDK.10 --source winget
  • Visual Studio 네이티브 데스크톱 워크로드가 포함된 - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

1단계: 새 Electron 앱 만들기

Electron Forge를 사용하여 Electron 앱을 새로 시작합니다. 기존 앱이 있는 경우 이 단계를 건너뜁니다.

npm create electron-app@latest my-windows-app
cd my-windows-app

앱이 실행되는지 확인합니다.

npm start

2단계: winapp CLI 설치

npm install --save-dev @microsoft/winappcli

3단계: Windows 개발을 위한 project 초기화

npx winapp init

프롬프트가 표시되면

  • 패키지 이름: Enter 키를 눌러 기본값 적용(my-windows-app)
  • Publisher 이름: Enter 키를 눌러 기본값을 적용하거나 이름을 입력합니다.
  • 버전: Enter 키를 눌러 1.0.0.0 허용
  • 진입점: Enter 키를 눌러 기본값(my-windows-app.exe)을 적용합니다.
  • SDK 설정: "안정적인 SDK" 선택

winapp init이란 무엇입니까?

이 명령은 Windows 개발에 필요한 모든 항목을 설정합니다.

  1. Windows SDK 및 Windows App SDK 헤더 및 라이브러리를 포함하는 .winapp/ 폴더 만들기
  2. 생성 appxmanifest.xml - 앱 ID 및 MSIX 패키징에 필요한 앱 매니페스트
  3. 폴더 만들기 Assets/ - 앱 아이콘 및 시각적 자산 포함
  4. 생성winapp.yaml - SDK 버전 및 프로젝트 구성 추적
  5. Windows App SDK 런타임 설치 - 최신 API를 위한 필수 런타임 구성 요소
  6. Windows에서 개발자 모드 사용 - 디버깅에 필요

비고

.winapp/ 폴더는 자동으로 .gitignore에 추가되며 소스 제어에 체크인해서는 안 됩니다.

4단계: 빌드 파이프라인에 복원 추가

postinstall 스크립트를 package.json에 추가하여 다른 개발자가 프로젝트를 복제할 때 Windows SDK를 사용할 수 있도록 합니다.

{
  "scripts": {
    "postinstall": "winapp restore && winapp node add-electron-debug-identity"
  }
}

이 스크립트는 npm install 및 이후에 실행됩니다.

  1. winapp restore - 모든 Windows SDK 패키지 다운로드 및 복원
  2. winapp node add-electron-debug-identity - 디버그 ID를 사용하여 Electron 앱 등록

플랫폼 간 프로젝트의 경우 다음을 만듭니다 scripts/postinstall.js.

if (process.platform === 'win32') {
  const { execSync } = require('child_process');
  try {
    execSync('npx winapp restore && npx winapp cert generate --if-exists skip && npx winapp node add-electron-debug-identity', {
      stdio: 'inherit'
    });
  } catch (error) {
    console.warn('Warning: Windows-specific setup failed.');
  }
} else {
  console.log('Skipping Windows-specific setup on non-Windows platform.');
}

그런 다음 package.json를 업데이트합니다.

{
  "scripts": {
    "postinstall": "node scripts/postinstall.js"
  }
}

5단계: 디버그 ID 이해

winapp node add-electron-debug-identity 명령:

  1. appxmanifest.xml 앱 세부 정보 및 기능을 가져오기 위해 읽습니다.
  2. node_modules를 임시 ID를 사용하여 electron.exe에 등록합니다.
  3. 전체 MSIX 패키지를 만들지 않고 ID 필수 API를 테스트할 수 있습니다.

자산을 수정 appxmanifest.xml 하거나 연결할 때마다 이 명령을 수동으로 실행합니다.

npx winapp node add-electron-debug-identity

설치를 테스트합니다.

npm start

비고

스파스 패키징된 Electron 애플리케이션에서 크래시 또는 빈 창이 발생할 수 있는 것으로 알려진 Windows 버그가 있습니다. 해결 방법으로 "--no-sandbox"를 시작 스크립트에 추가합니다 ""start": "electron-forge start -- --no-sandbox"". 이 문제는 전체 MSIX 패키징에 영향을 주지 않습니다. 디버그 ID를 실행 취소하려면 npx winapp node clear-electron-debug-identity를 실행합니다.

다음 단계

이제 개발 환경이 설정되었으므로 네이티브 추가 기능을 만들고 Windows API를 호출합니다.

  • Last updated on