[Electron] 004. Electron 환경 설정하기, 기본 프로젝트 구조 설명

004. Electron 환경 설정하기, 기본 프로젝트 구조 설명

Electron은 웹 기술을 활용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있게 해주는 오픈 소스 프레임워크입니다. 이 글에서는 Electron 개발을 시작하기 위한 환경 설정 방법과 기본 프로젝트 구조를 자세히 설명하겠습니다.

1. Electron 설치 준비

Electron은 Node.js 위에서 작동하므로 먼저 Node.js를 설치해야 합니다. Node.js는 자바스크립트 런타임으로, 서버 사이드 개발과 데스크톱 애플리케이션 개발을 위한 필수 도구입니다. Node.js를 설치하려면, 아래 링크에서 최신 버전을 다운로드하여 설치하세요:

Node.js를 설치하고 난 후, 아래의 명령어를 사용하여 npm( Node Package Manager )을 통해 Electron을 설치할 수 있습니다:

npm install electron -g

위 명령어는 Electron을 전역(global)으로 설치합니다. 하지만 특정 프로젝트에서만 사용하고 싶다면 해당 프로젝트 폴더에서 다음 명령어로 로컬 설치를 진행할 수 있습니다:

npm init -y
npm install electron --save-dev

2. 프로젝트 구조

Electron 프로젝트를 초기화하면 기본적으로 다음과 같은 파일과 폴더 구조가 생성됩니다:


my-electron-app/
├── package.json
├── main.js
└── index.html

2.1 package.json

이 파일은 Node.js 및 npm의 설정을 담고 있는 파일로, 프로젝트에 대한 메타 정보를 포함합니다. 기본적으로 다음과 같은 속성들을 가집니다:

  • name: 프로젝트의 이름
  • version: 프로젝트 버전
  • main: Electron 애플리케이션의 진입점 파일
  • scripts: npm 명령어 단축어

기본적인 package.json은 이러한 형식을 가집니다:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

2.2 main.js

main.js는 Electron 애플리케이션의 메인 프로세스를 정의하는 파일입니다. 이 파일은 기본 창의 생성과 이벤트 처리, 다양한 기능을 설정하는 역할을 합니다. 아래는 간단한 main.js의 예제입니다:

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

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

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

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

2.3 index.html

index.html은 전면에 나타나는 사용자 인터페이스(UI)를 정의하는 HTML 파일입니다. 기본적인 HTML 구조에 Electron의 기능을 만들어가는 여러 UI 요소들을 포함할 수 있습니다. 아래는 간단한 index.html의 예제입니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Electron App</title>
</head>
<body>
    <h1>Welcome to my Electron App!</h1>
    <p>This is a simple Electron application.</p>
</body>
</html>

3. 프로젝트 실행하기

모든 설정이 완료되었다면 이제 Electron 애플리케이션을 실행할 차례입니다. 아래의 명령어를 프로젝트 루트 디렉토리에서 실행하여 애플리케이션을 시작할 수 있습니다:

npm start

위 명령어를 실행하면 Electron 애플리케이션이 살아나고 브라우저 창이 열릴 것입니다. 당신이 작성한 index.html 파일의 내용이 표시될 것입니다.

4. Electron의 기능 이해하기

4.1. 주요 프로세스와 렌더러 프로세스

Electron 애플리케이션은 메인 프로세스와 렌더러 프로세스로 구성되어 있습니다. 메인 프로세스는 애플리케이션의 모든 창과 이벤트를 관리하며, 렌더러 프로세스는 사용자 인터페이스를 개별적으로 처리합니다. 메인 프로세스는 하나만 존재하지만 렌더러 프로세스는 여러 개 생성될 수 있습니다.

4.2. Electron의 주요 객체

  • app: 애플리케이션의 생명 주기를 제어합니다.
  • BrowserWindow: 새 창을 생성하고 조작하는 객체입니다.
  • ipcMain: 메인 프로세스와 렌더러 프로세스 간의 통신을 처리합니다.
  • ipcRenderer: 렌더러 프로세스에서 메인 프로세스와 통신할 수 있게 해 줍니다.

5. 예제: 간단한 메모장 애플리케이션

위에서 설명한 내용으로 간단한 메모장 애플리케이션을 만들어 봅시다. 새로 만든 index.html 파일과 함께 사용할 main.js와 기본 UI를 설정해 보겠습니다.

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

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

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

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

이제 index.html 파일을 아래와 같이 업데이트하여 메모장을 구현합니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Notepad</title>
<style>
    body { font-family: Arial, sans-serif; }
    textarea { width: 100%; height: 90%; }
</style>
</head>
<body>
    <h1>Simple Notepad</h1>
    <textarea id="notepad" placeholder="Write something here..."></textarea>
    <script>
        const { ipcRenderer } = require('electron');
        const fs = require('fs');
        const filePath = 'notes.txt';

        document.getElementById('notepad').addEventListener('input', (event) => {
            fs.writeFileSync(filePath, event.target.value);
        });

        window.onload = () => {
            if (fs.existsSync(filePath)) {
                document.getElementById('notepad').value = fs.readFileSync(filePath, 'utf-8');
            }
        };
    </script>
</body>
</html>

위의 코드는 사용자가 메모를 작성할 수 있는 간단한 메모장입니다. 사용자가 타이핑할 때마다 notes.txt 파일에 내용을 저장하고, 애플리케이션이 시작될 때 파일의 내용을 불러옵니다.

6. 결론

이 글에서는 Electron의 환경 설정 방법과 기본 프로젝트 구조를 살펴보았습니다. Electron은 강력한 기능을 제공하여 웹 개발자들이 쉽게 데스크톱 어플리케이션을 만들 수 있는 플랫폼입니다. 다양한 예제를 통해 Electron의 기능을 더 깊이 이해하고, 복잡한 애플리케이션 개발로 나아가 보시기 바랍니다.

다음 글에서는 추가적인 Electron의 기능 및 고급 설정 방법에 대해 다루도록 하겠습니다. 감사합니다!