Electron BrowserWindow 생성자 옵션 모음집, BrowserWindow 중앙배치 하는 방법

BrowserWindow 생성자 옵션

기본 창 설정

width (number): 창의 초기 너비 (기본값: 800)
height (number): 창의 초기 높이 (기본값: 600)
x (number): 창의 초기 x 좌표.
y (number): 창의 초기 y 좌표.
useContentSize (boolean): true로 설정하면 창의 크기가 콘텐츠 영역 크기에 맞춰 조정됩니다(기본값: false).

창 스타일

title (string): 창의 제목 (기본값: 'Electron').
icon (NativeImage | string): 창의 아이콘.
frame (boolean): false로 설정하면 창의 기본 프레임(제목 표시줄 및 테두리)이 비활성화됩니다 (기본값: true).
transparent (boolean): 창 배경을 투명하게 설정 (MacOS 및 일부 플랫폼만 지원).
resizable (boolean): 창 크기 조정 가능 여부 (기본값: true).
movable (boolean): 창 이동 가능 여부 (MacOS에서만 지원, 기본값: true).
minWidth, minHeight (number): 창의 최소 크기.
maxWidth, maxHeight (number): 창의 최대 크기.

웹 콘텐츠

webPreferences (object): 웹 콘텐츠의 동작을 제어합니다.
nodeIntegration (boolean): Node.js 통합 여부 (기본값: false).

nodeIntegration :true로 설정하면 렌더러 프로세스에서 Node.js API를 사용할 수 있지만,
보안상 문제 발생 가능성이 높아짐. 외부에서 로드된 악성 코드가 Node.js를 통해 시스템 접근 권한을 가질 수 있기 때문
 * 이 경우 preload 스크립트 설정을 하지 않는 것이 일반적
nodeIntegration :false로 설정하면 렌더러 프로세스에서 Node.js API를 사용할 수 없으므로 보안이 강화
 * 이 경우 preload 스크립트를 설정하여 Node.js 기능이 필요한 경우 특정 기능만 안전하게 노출하는 방식을 권장

contextIsolation (boolean): 렌더러 프로세스와 메인 프로세스의 컨텍스트를 격리 (기본값: true).
enableRemoteModule (boolean): remote 모듈 사용 여부 (기본값: false, Electron 14 이후로 비추천).
preload (string): 렌더러가 로드되기 전에 실행할 스크립트 파일 경로.
sandbox (boolean): 샌드박스 모드 활성화 여부.
devTools (boolean): 개발자 도구 활성화 여부 (기본값: true).
기타 유용한 옵션
alwaysOnTop (boolean): 창을 항상 맨 위에 표시 (기본값: false).
fullscreen (boolean): 창을 전체 화면으로 설정 (기본값: false).
fullscreenable (boolean): 전체 화면으로 전환 가능 여부 (기본값: true).
skipTaskbar (boolean): 창을 작업 표시줄에서 숨길지 여부 (기본값: false).
opacity (number): 창의 불투명도 (0.0 ~ 1.0).
kiosk (boolean): 키오스크 모드 활성화 여부 (기본값: false).

Window를 모니터 중앙에 띄우고 싶은 경우 샘플

  // 선택한 디스플레이의 bounds 정보
  const { bounds } = getDisplay();
  const windowWidth = 800;
  const windowHeight = 600;

  // 창을 화면 중앙에 배치하기 위한 좌표 계산
  const x = Math.round(bounds.x + (bounds.width - windowWidth) / 2);
  const y = Math.round(bounds.y + (bounds.height - windowHeight) / 2);

  let main = new BrowserWindow({
    x,
    y,
    width: windowWidth,
    height: windowHeight,
    show: false,
    frame: false,
    webPreferences: {
      preload: app.isPackaged //preload에 대한 자세한 개념은 다음 포스트에서 소개할 예정
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
    fullscreen: false,
  });
  main.show();
  main.loadURL(resolveHtmlPath(`main.html`));

//import electron, { ...생략 } from 'electron';

function getDisplay(): Display {
  // 모든 디스플레이 정보 가져오기 및 정렬
  const displays: Display[] = electron.screen
    .getAllDisplays()
    .sort(
      (a: Display, b: Display) =>
        a.bounds.x + a.bounds.y - b.bounds.x - b.bounds.y,
    );
  
  // 주 디스플레이 (bounds.x === 0, bounds.y === 0) 찾기
  const main = displays.find(
    (display: Display) => display.bounds.x === 0 && display.bounds.y === 0,
  );
  if (!main) {
    throw new Error('Primary display not found');
  }
  return main;
}