Electron 기본 사항: Angular Electron 앱을 구성하고 실행하는 방법

Electron은 Angular로 생성한 애플리케이션을 포함하여 크로스 플랫폼 애플리케이션에 웹의 강력한 기능을 제공합니다.

Electron을 사용하면 Windows, Mac, Linux용 데스크톱 애플리케이션을 구축할 수 있습니다. Electron을 사용하여 앱을 빌드하면 데스크톱 애플리케이션 창을 통해 앱을 미리 보고 실행할 수 있습니다.

Electron을 사용하면 일반적인 웹 브라우저 대신 데스크톱 창에서 실행되도록 Angular 앱을 구성할 수 있습니다. 앱 자체 내에서 JavaScript 파일을 사용하여 이 작업을 수행할 수 있습니다.

Electron을 구성하고 나면 일반 Angular 앱에서와 마찬가지로 개발을 계속할 수 있습니다. 애플리케이션의 주요 부분은 여전히 동일한 표준 Angular 구조를 따릅니다.

애플리케이션의 일부로 Electron을 설치하는 방법

Electron을 사용하려면 node.js를 다운로드하여 설치하고 npm install을 사용하여 앱에 Electron을 추가해야 합니다.

node.js를 다운로드하고 설치합니다. 버전을 확인하여 올바르게 설치되었는지 확인할 수 있습니다.
```
node -v
```
```
npm -v
```
ng new 명령을 사용하여 새로운 Angular 애플리케이션을 만듭니다. 이렇게 하면 Angular 프로젝트가 작동하는 데 필요한 모든 파일이 포함된 폴더가 생성됩니다.
```
ng new electron-app
```
애플리케이션의 루트 폴더에서 npm을 사용하여 Electron을 설치합니다.
```
npm install --save-dev electron
```
그러면 앱의 node_modules 폴더에 Electron을 위한 새 폴더가 생성됩니다.
컴퓨터에 전역적으로 Electron을 설치할 수도 있습니다.
```
npm install -g electron
```

Angular Electron 애플리케이션의 파일 구조

Electron은 데스크톱 창을 생성하고 관리하기 위해 기본 JavaScript 파일이 필요합니다. 이 창에는 앱의 콘텐츠가 표시됩니다. JavaScript 파일에는 사용자가 창을 닫는 경우와 같이 발생할 수 있는 다른 이벤트도 포함됩니다.

런타임 시 표시되는 콘텐츠는 index.html 파일에서 가져옵니다. 기본적으로 src 폴더 내에서 index.html 파일을 찾을 수 있으며, 런타임 시 해당 파일의 빌드된 복사본이 dist 폴더 내에 자동으로 생성됩니다.

index.html 파일은 일반적으로 다음과 같습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> ElectronApp </title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root> </app-root>
</body>
</html>

body 태그 내부에는 태그가 있습니다. 그러면 Angular 애플리케이션의 기본 앱 구성 요소가 표시됩니다. src/app 폴더에서 기본 앱 구성요소를 찾을 수 있습니다.

Electron을 사용하여 데스크탑 창에서 Angular 애플리케이션을 여는 방법

main.js 파일을 생성하고 데스크톱 창 내에서 애플리케이션의 콘텐츠를 열도록 구성합니다.

프로젝트 루트에 main.js라는 파일을 만듭니다. 이 파일에서 Electron을 초기화하여 애플리케이션 창을 생성하는 데 사용할 수 있습니다.
```
const { app, BrowserWindow } = require('electron');
```
특정 너비와 높이의 새 데스크탑 창을 만듭니다. 창에 표시할 내용으로 인덱스 파일을 로드합니다. 인덱스 파일의 경로가 앱 이름과 일치하는지 확인하세요. 예를 들어 앱 이름을 "electron-app"으로 지정한 경우 경로는 "dist/electron-app/index.html"이 됩니다.
```
function createWindow() {
  win = new BrowserWindow({width: 800, height: 800});
  win.loadFile('dist/electron-app/index.html');
}
```
앱이 준비되면 createWindow() 함수를 호출합니다. 그러면 앱에 대한 애플리케이션 창이 생성됩니다.
```
app.whenReady().then(() => {
  createWindow()
})
```
src/index.html 파일의 base 태그에서 href 속성을 "./"로 변경합니다.
```
<base href="./">
```
package.json에서 main 필드를 추가하고 main.js 파일을 값으로 포함합니다. 이는 앱의 진입점이 되어 애플리케이션이 앱을 시작할 때 main.js 파일을 실행합니다.
```
{
  "name": "electron-app",
  "version": "0.0.0",
  "main" : "main.js",
  ....
}
```
.browserslistrc 파일에서 목록을 수정하여 iOS Safari 버전 15.2-15.3을 제거합니다. 이렇게 하면 컴파일할 때 호환성 오류가 콘솔에 표시되는 것을 방지할 수 있습니다.
```
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3 
```

src/app/app.comComponent.html 파일에서 기본 콘텐츠를 삭제합니다. 새로운 콘텐츠로 교체하세요.

<div class="content">
  <div class="card">
    <h2> Home </h2>
    <p>
      Welcome to my Angular Electron application!
    </p>
  </div>
</div>

src/app/app.comComponent.css 파일의 콘텐츠에 대한 일부 스타일을 추가합니다.

.content {
  line-height: 2rem;
  font-size: 1.2em;
  margin: 48px 10%;
  font-family: Arial, sans-serif
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 85%;
  padding: 16px 48px;
  margin: 24px 0px;
  background-color: whitesmoke;
  font-family: sans-serif;
}

src/styles.css 파일에 전반적인 스타일을 추가하여 기본 여백과 패딩을 제거합니다.
```
html {
  margin: 0;
  padding: 0;
}
```

전자 애플리케이션을 실행하는 방법

창에서 애플리케이션을 실행하려면 package.json의 스크립트 배열에 명령을 구성하세요. 그런 다음 터미널에서 명령을 사용하여 앱을 실행합니다.

package.json의 스크립트 배열 내부에 Angular 앱을 빌드하고 Electron을 실행하는 명령을 추가합니다. Scripts 배열의 이전 항목 뒤에 쉼표를 추가했는지 확인하세요.
```
"scripts": {
  ...
  "electron": "ng build && electron ."
},
```
데스크톱 창에서 새 Angular 애플리케이션을 실행하려면 프로젝트 루트 폴더의 명령줄에서 다음을 실행하세요.
```
npm run electron
```
애플리케이션이 컴파일될 때까지 기다립니다. 완료되면 웹 브라우저에서 Angular 앱이 열리는 대신 데스크톱 창이 대신 열립니다. 데스크톱 창에 Angular 앱의 콘텐츠가 표시됩니다.
웹 브라우저에서 애플리케이션을 계속 보려면 ng Serve 명령을 실행할 수 있습니다.
```
ng serve
```
ngserve 명령을 사용하는 경우 앱의 콘텐츠는 localhost:4200의 웹 브라우저에 계속 표시됩니다.

Electron을 사용하여 데스크탑 애플리케이션 구축

Electron을 사용하여 Windows, Mac, Linux에서 데스크톱 애플리케이션을 구축할 수 있습니다. 기본적으로 ngserve 명령을 통해 웹 브라우저를 사용하여 Angular 애플리케이션을 테스트할 수 있습니다. 웹 브라우저 대신 데스크톱 창에서도 열리도록 Angular 애플리케이션을 구성할 수 있습니다.

JavaScript 파일을 사용하여 이 작업을 수행할 수 있습니다. index.html 및 package.json 파일도 구성해야 합니다. 전체 애플리케이션은 여전히 일반 Angular 애플리케이션과 동일한 구조를 따릅니다.