[angular] 데스크톱 앱 구성

26 Dec 2023

angular

Angular는 웹 애플리케이션 개발을 위한 프레임워크로 널리 사용되지만, Electron과 함께 사용하여 데스크톱 애플리케이션도 개발할 수 있습니다. 이 블로그에서는 Angular와 Electron을 통합하여 데스크톱 앱을 구성하는 방법에 대해 알아보겠습니다.

Angular 및 Electron 설치

먼저, Angular CLI를 사용하여 새로운 Angular 프로젝트를 생성합니다.

ng new desktop-app
cd desktop-app

다음으로, Electron을 설치합니다.

npm install electron --save-dev

Electron Main 프로세스 설정

Angular 프로젝트 디렉토리 내에 main.js 파일을 생성하고, Electron의 메인 프로세스를 설정합니다. 예를 들어, 윈도우를 생성하는 간단한 main.js 파일은 다음과 같습니다.

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

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadFile('index.html');
}

app.on('ready', createWindow);

Angular 애플리케이션 통합

Electron의 렌더러 프로세스에서 Angular 애플리케이션을 로드하기 위해, index.html 파일 내에 Angular 앱을 렌더링하는 코드를 포함해야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Desktop App</title>
  <base href="./">
</head>
<body>
  <app-root></app-root>
  <script src="./runtime.js" defer></script>
  <script src="./polyfills.js" defer></script>
  <script src="./styles.js" defer></script>
  <script src="./vendor.js" defer></script>
  <script src="./main.js" defer></script>
</body>
</html>

앱 빌드 및 실행

마지막으로, Angular 애플리케이션과 Electron 애플리케이션을 함께 빌드하고 실행할 수 있습니다.

ng build --base-href ./ --prod
electron .

이제 Angular와 Electron을 함께 사용하여 간단한 데스크톱 앱을 구성하는 방법에 대해 알아보았습니다. 이를 통해 데스크톱 환경에서도 Angular를 활용하여 다양한 애플리케이션을 개발할 수 있습니다.

참고 자료:

더 많은 정보를 원하시거나 궁금한 점이 있으시면 언제든지 질문해주세요!