nextron

https://blog.logrocket.com/building-app-next-js-electron/

새 창 만들기

(여기선 모달 같음)

이것을 사용하는 것은 매우 드물지만 프로그래밍 방식으로 새 창을 만드는 것도 가능
일반적으로 Electron에서 BrowserWindow를 사용하여 이를 수행했지만
Nextron은 이미 호출된 도우미 메서드인 createWindow를 내보낸다
대신 사용할 수 있습니다.

이전에 만든 /sample 페이지를 새 창에서 열고 싶다고 가정하고
이 새 창에 대한 지원을 통합 하려면 먼저 main/background.js를 업데이트해야 합니다

import { app, ipcMain } from "electron";
. . .

  const mainWindow = createWindow("main", {
    width: 1000,
    height: 600,
  });
  const sampleWindow = createWindow("sample", {
    width: 700,
    height: 400,
    show: false,
  });

  if (isProd) {
    await mainWindow.loadURL("app://./home.html");
    await sampleWindow.loadURL("app://./sample.html");
  } else {
    const port = process.argv[2];
    await mainWindow.loadURL(`http://localhost:${port}/home`);
    await sampleWindow.loadURL(`http://localhost:${port}/sample`);
  }

  ipcMain.on("show-sample", () => {
    sampleWindow.show();
  });
. . .

위에 제공된 코드에서, 생성 직후 mainWindow와 또 다른 창( sampleWindow)을 만들어
초기 너비와 높이를 700×400으로 설정하고
기본적으로 이 창이 표시되지 않도록 표시 값을 false로 설정
그리고 Electron의 ipcMain event emitter를 사용하여 show-sample 이벤트를 수신하고 있으므로 이 이벤트가 발생하면 새로운 sampleWindow 창을 띄운다

다음 단계는 이 이벤트를 프로그래밍 방식으로 내보내는 것
페이지의 ipc를 사용하여 쉽게 수행할 수도 있다
예 :render/home.jsx

import electron from "electron";
const ipcRenderer = electron.ipcRenderer || false;

const Home = () => {
  const openWindow = () => {
    ipcRenderer.send("show-sample");
  };

  return (
    <>
      <h1>Hello World</h1>
      <p>Welcome to my Nextron desktop app</p>
      <button onClick={openWindow}>Open sample page</button>
    </>
  );
};

export default Home;

실행 화면

또한 속성을 추가하거나 JavaScript 메서드를 사용하여 대상 URL을 열면 새 창에서 외부 URL을 열 수도 있다

target=_blankwindow.open()