electron 프로젝트 구조 잡기

개요 폴더구조 Main Process src/main/main.ts src/main/windows.ts Renderer Process 참고

개요

electron js 프로젝트 개발 구조 잡기 및 정리

폴더구조

보기

main

main.ts
windows.ts

renderer
utill

Main Process

런타임 환경의 nodejs코드를 사용함

브라우저에서 보완등의 이유로 사용할수 없었던 fs등과 같은 시스템 작업에 관한 프로세스

src/main/main.ts

electron의 로드 스크립트파일

package.json의 “main” 값을 변경할수있다


// package.json
{
	"main": "src/main/main.ts",
}

app과 관련된 로직을 작성할것 앱이 실행되면 브라우저를 띄우는 작업등..

코드보기


import { BrowserWindow, app, ipcMain } from "electron";
import { getOrCreateMainWindow } from './windows';

/**
 *  Handle the app "ready" event.
 *  takes care of booting the app
 */
const onReady = async () => {
  const mainWindow: BrowserWindow = getOrCreateMainWindow();

  if (mainWindow === null) getOrCreateMainWindow();
};

/**
 *
 * @param _argv_in
 */
function main() {
  // eslint-disable-next-line promise/catch-or-return
  app.whenReady().then(onReady).catch(console.log);
  app.on('window-all-closed', () => {
    // Respect the OSX convention of having the application in memory even
    // after all windows have been closed
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });
}

main();

src/main/windows.ts

electron 에서 가장 중요한 BrowserWindows 클래스이다

이 클래스가 없으면 GUI는 만들수가 없다, 크로미움을 실행해주고 renderer 프로세스에 크로미움을 실행시켜주기때문

electron 에서 브라우저는 하나만 띄울수 있는게 아니다 main에서 바로 실행하지 말고 분리해서 확장성을 고려했다

methods

createMainWindow
getMainWindowOptions
getOrCreateMainWindow

코드보기


import {
  BrowserWindow,
  BrowserWindowConstructorOptions,
  app,
  shell,
} from 'electron';
import path from 'path';
import { getAssetPath, resolveHtmlPath } from './util';

// eslint-disable-next-line import/no-mutable-exports
export let browserWindows: Array<BrowserWindow | null> = [];

/**
 * get main window options
 *
 * @returns {BrowserWindowConstructorOptions}
 */
export const getMainWindowOptions = (): BrowserWindowConstructorOptions => {
  return {
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      preload: app.isPackaged
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
  };
};

/**
 * create main window
 * takes window event
 *
 * @returns {BrowserWindow}
 */
export const createMainWindow = (): BrowserWindow => {
  // eslint-disable-next-line @typescript-eslint/no-shadow
  let browserWindow: BrowserWindow | null;
  // eslint-disable-next-line prefer-const
  browserWindow = new BrowserWindow(getMainWindowOptions());

  browserWindow.loadURL(resolveHtmlPath('index.html'));

  browserWindow.on('closed', () => {
    browserWindows = browserWindows.filter(
      (bw: BrowserWindow | null) => browserWindow !== bw
    );

    browserWindow = null;
  });

  browserWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url);
    return { action: 'deny' };
  });

  browserWindow.on('ready-to-show', () => {
    if (!browserWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    browserWindow.show();
  });

  browserWindow.webContents.on('will-navigate', (event, url) => {
    event.preventDefault();

    event.preventDefault();
    shell.openExternal(url);
  });

  browserWindows.push(browserWindow);

  return browserWindow;
};

/**
 * get focuse window or create main window
 *
 * @returns {BrowserWindow}
 */
export const getOrCreateMainWindow = (): BrowserWindow => {
  return (
    BrowserWindow.getFocusedWindow() || browserWindows[0] || createMainWindow()
  );
};

Renderer Process

참고

https://github.com/electron/fiddle/blob/main/src/renderer/app.tsx#L128