Electron 로그인 애플리케이션

0. 개요: Electron은 리눅스, 윈도우, 맥에서 모두 사용할 수 있지만 윈도우는 크게 설명이 필요없을 정도로 쉽고 맥은 내가 쓸 일이 없을 것 같아 리눅스 위주로 글을 적을 것이다. 아... 그러고 보니 맥도 쓸 일 있겠는데?;;;

1. 필수조건: Node.js가 설치돼 있어야 한다.

2. 프로젝트 생성

mkdir app && cd app
npm init -y

9. 빌더 설정: package.json

{
  "name": "appname",
  "version": "1.0.0",
  "description": "description",
  "main": "main.js",
  "homepage": "https://yourprojecthomepage.com",
  "author": {
    "name": "yourname",
    "email": "youremail@example.com"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.appname",
    "productName": "appname",
    "directories": {
      "output": "build"
    },
    "files": [
      "**/*"
    ],
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ],
      "maintainer": "yourname <youremail@example.com>"
    },
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    }
  },
  "keywords": [
    "keyword"
  ],
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "^24.1.2",
    "electron-builder": "^23.6.0"
  }
}

3. 디렉토리 구조 구축

my-electron-app/
├─ package.json         # 프로젝트 설정 파일
├─ README.md            # 프로젝트 설명 및 사용법
├─ .env.dev             # 개발환경에서 사용할 환경변수 파일
├─ .env.prod            # 배포환경에서 사용할 환경변수 파일
├─ src/                 # 소스 코드를 저장하는 폴더
│  ├─ main/             # 메인 프로세스 관련 소스 코드
│  │  ├─ main.js        # 메인 프로세스 엔트리 포인트
│  │  ├─ database.js    # 데이터베이스 관련 코드
│  │  └─ ...            # 기타 메인 프로세스 관련 코드
│  ├─ renderer/         # 렌더러 프로세스 관련 소스 코드
│  │  ├─ pages/         # 렌더러 프로세스 HTML 페이지
│  │  │  ├─ index.html  # 첫 번째 페이지
│  │  │  └─ ...         # 기타 페이지
│  │  └─ js/            # 렌더러 프로세스 HTML 페이지
│  │     ├─ renderer.js # 렌더러 프로세스 엔트리 포인트 (JavaScript)
│  │     └─ ...         # 기타 렌더러 프로세스 관련 코드
│  └─ preload/          # 프리로드 스크립트 관련 소스 코드
│     └─ preload.js     # 프리로드 스크립트 엔트리 포인트
│     └─ ...            # 기타 프리로드 스크립트 관련 코드
├─ assets/              # 정적 리소스 (이미지, 폰트 등)
│  ├─ images/           # 이미지 파일
│  └─ fonts/            # 폰트 파일
└─ styles/              # CSS 스타일시트
   └─ main.css          # 메인 CSS 파일

4. 환경 변수 파일 작성: .env

NODE_ENV=development
DB_HOST=
DB_PORT=
DB_USER=
DB_PASSWORD=
DB_DATABASE=
HASH_FUNCTION=
HASH_LENGTH=

  환경 변수를 설정할 때는 문자열이라고 따옴표로 감쌀 필요가 없다.

5. 프로젝트 작성

  1) src/main/db.js

const mariadb = require('mariadb');

const pool = mariadb.createPool({
  host: process.env.DB_HOST,
  port: process.env.DB_PORT,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_DATABASE,
  connectionLimit: 5
});

async function checkConnection() {
  let conn;
  try {
    conn = await pool.getConnection();
    return true;
  } catch (err) {
    return false;
  } finally {
    if (conn) conn.release();
  }
}

async function executeSql(sql) {
  let conn;
  try {
    conn = await pool.getConnection();
    const rows = await conn.query(sql);
    return rows;
  } catch (err) {
    console.log(err);
  } finally {
    if (conn) conn.release();
  }
}

module.exports = {
  checkConnection,
  executeSql
};

  2) src/main/createWindow.js

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

module.exports = async function createWindow(windowWidth, windowHeight, preloadScript, isMenuVisible, htmlFilename) {
  const isDevelopment = process.env.NODE_ENV === 'development';
  const win = new BrowserWindow({
    width: windowWidth,
    height: windowHeight,
    webPreferences: {
      nodeIntegration: true, // 렌더러 프로세스에서 Node.js 통합을 활성화
      contextIsolation: !isDevelopment, // 개발 환경에서만 컨텍스트 격리를 비활성화
      sandbox: true, // Chromium의 내장 샌드박스 기능을 활성화하여 추가 보안 레이어 적용
      devTools: isDevelopment, // 개발 환경에서만 개발자 도구를 활성화
      preload: path.join(__dirname, `../preload/${preloadScript}`),
    },
  });
  win.setMenuBarVisibility(isMenuVisible);
  win.loadFile(path.join(__dirname, `../renderer/pages/${htmlFilename}`));
  return win;
};

  3) src/main/login.js

 

  4) src/main/main.js

const { app, BrowserWindow } = require('electron');
const electronReload = require('electron-reload');
const path = require('path');
require('dotenv').config();
const createWindow = require('./createWindow');
const login = require('./login');

// 개발 중에만 사용하는 코드
if (process.env.NODE_ENV === 'development') {
  // electron-reload 사용하기
  electronReload(path.join(__dirname, '../../'), {
    forceHardReset: true,
    hardResetMethod: 'exit',
    filter: '*.*',
  });
}

// 앱이 준비되면 새 창을 생성
async function main() {
  await app.whenReady();
  await login();
}
main();

// 모든 창이 닫히면 애플리케이션을 종료 (macOS 제외)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// 앱이 활성화될 때 새 창을 생성 (macOS에서만)
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- CSP 설정 추가 -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
    />
    <title>Hello Electron!</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
  </body>
</html>

3. Electron 설치: 패키지를 개발자 의존형으로 설치한다.이렇게 하면 프로덕션 빌드에서 Electron이 제외되어 애플리케이션 크기가 줄어든다.

npm install electron electron-builder electron-reload dotenv --save-dev
npm install mariadb
sudo npm install -g nodemon

10. 빌드

  빌드하는 OS 환경에 맞는 결과물만 빌드된다.

npm run build

11. 설치

sudo dpkg -i appname_1.0.0_amd64.deb

  만약, 종속성 문제가 발생하면,

sudo apt install -f

12. 실행

appname

  혹은 GUI 에서도 실행할 수 있다.

13. 삭제

sudo dpkg -r appname

14. 디렉토리 구조