01 · BrowserWindow의 해부

// main.js — Electron Main 프로세스에서만 가능
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
 
function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    show: false,                  // ← 핵심: 깜빡임 방지
    backgroundColor: '#1e1e1e',   // ← show:false 동안 보일 배경
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,     // 보안 디폴트 (v12+ 기본 true)
      sandbox: true,              // 디폴트로 켜는 게 모범
      nodeIntegration: false,     // 절대 true로 두지 말 것
      webSecurity: true,
    },
  });
 
  win.once('ready-to-show', () => win.show()); // ← 흰 깜빡임 제거
  win.loadFile('index.html');
  return win;
}
 
app.whenReady().then(createWindow);

new BrowserWindow({
  // 모양
  frame: false,              // 타이틀바 제거 (커스텀 타이틀바)
  titleBarStyle: 'hiddenInset', // macOS — 신호등은 남기고 타이틀만 숨김
  transparent: true,         // 투명 창 (성능 비용)
  hasShadow: false,
  vibrancy: 'sidebar',       // macOS 블러 효과
 
  // 동작
  alwaysOnTop: false,
  fullscreenable: true,
  resizable: true,
  minimizable: true,
 
  // 위치
  x: 100, y: 100,            // 없으면 OS가 배치
  center: true,
  minWidth: 800, minHeight: 600,
 
  // 부모-자식
  parent: mainWindow,        // 모달 다이얼로그용
  modal: true,
});

// ❌ 나쁜 코드 — 전형적 누수
let win;
function createWindow() {
  win = new BrowserWindow({...});
  win.loadFile('index.html');
}
// win.on('closed', ...) 없음 → 창은 닫혀도 win 참조가 남음
// → 다음 createWindow() 호출하면 또 하나 생김

// ✅ 올바른 코드
let win;
function createWindow() {
  win = new BrowserWindow({...});
  win.loadFile('index.html');
  win.on('closed', () => { win = null; }); // ← 필수
}

const windows = new Set();
function createWindow() {
  const win = new BrowserWindow({...});
  windows.add(win);
  win.on('closed', () => windows.delete(win));
  return win;
}

const child = new BrowserWindow({
  parent: mainWindow,
  modal: true,
  width: 400, height: 200,
});
child.loadFile('confirm.html');

const { BrowserWindow, WebContentsView } = require('electron');
const win = new BrowserWindow({ width: 1200, height: 800 });
 
const view = new WebContentsView();
win.contentView.addChildView(view);
view.setBounds({ x: 0, y: 80, width: 1200, height: 720 });
view.webContents.loadURL('https://example.com');

const { nativeTheme } = require('electron');
nativeTheme.themeSource = 'system';  // 'light' | 'dark' | 'system'
 
nativeTheme.on('updated', () => {
  console.log('OS theme is now:', nativeTheme.shouldUseDarkColors ? 'dark' : 'light');
});

const { screen } = require('electron');
const displays = screen.getAllDisplays();
const cursorPoint = screen.getCursorScreenPoint();
const targetDisplay = screen.getDisplayNearestPoint(cursorPoint);
 
new BrowserWindow({
  x: targetDisplay.workArea.x + 100,
  y: targetDisplay.workArea.y + 100,
  ...
});

const { dialog } = require('electron');
const result = await dialog.showOpenDialog(mainWindow, {
  properties: ['openFile', 'multiSelections'],
  filters: [{ name: 'Images', extensions: ['png','jpg'] }],
});
// result.canceled, result.filePaths