[Electron] 기초 설정

1. 메뉴 바 삭제

 

electron을 처음에 설치하면 상단 메뉴바가 자동으로 생성된다.

 mainWindow.setMenuBarVisibility를 false로 변경한다.

function createWindow() {
  mainWindow = new BrowserWindow({ 
    width: 900, 
    height: 680,
    webPreferences: {
      nodeIntegration: true,
      //enableRemoteModule: true,
      devTools: isDev,
    },
  });
  
  mainWindow.setMenuBarVisibility(false) <-----------------------------------
  
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  
  if (isDev) {
    mainWindow.webContents.openDevTools({ mode: 'detach' });
  }
  
  mainWindow.setResizable(true);
  mainWindow.on('closed', () => (mainWindow = null));
  mainWindow.focus();
}

삭제 완료 !

 

 

 

2. 앱 아이콘 변경

우선 사용하고 싶은 아이콘을 다운받고 폴더 구조에 맞게 넣은 뒤 다음을 입력한다.

function createWindow() {
  mainWindow = new BrowserWindow({ 
    width: 900, 
    height: 680,
    icon: path.join(__dirname, 'piggy-bank.png'), <----------------------------------
    webPreferences: {
      nodeIntegration: true,
      //enableRemoteModule: true,
      devTools: isDev,
    },
  });

작업표시줄에는 잘 보이는데 app에는 잘 안보여서 다른것으로 변경하려한다.

작업표시줄

app

색칠된건 잘 안보여서 얘로 변경!