일렉트론 기초
https://deahan.tistory.com/483
일렉트론 퀵 스타트 하는법
https://deahan.tistory.com/484
일렉트론 + 리엑트(vite + typescript) 한방에 띄우는법
https://deahan.tistory.com/485
위에글 아무거나에서 일렉트론 설치를 하고 온다. 뭐를 선택하든 상관은 없다
본인기준으로는 일렉트론 + 리엑트 한방에 띄우는법에 이어서 글을 작성한다.
이렇게 기본 설치방법에 대해 알아봤는데 이번에는 메뉴 설정방법에 대해 알아보도록 하자.
아래 공식홈페이지에 가보면 사용방법을 친절하게 설명해 주고 있다.
https://www.electronjs.org/docs/latest/tutorial/context-menu
1.상단 메뉴바 초기화 밑 커스텀 메뉴 추가하기
menu를 사용하기 위해 eelctron의 menu를 가져온다
const { app, BrowserWindow, Menu } = require('electron')
아래와 같이 Menu .buildFromTemplate();에 [] 빈 배열을 세팅한다.
Menu.setApplicationMenu(menu) 로 세팅을 마친다
//main.js
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation : false
}
})
const menu = Menu.buildFromTemplate([])
Menu.setApplicationMenu(menu)
win.loadURL("http://localhost:5173/")
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', function () {
app.quit()
})
그리고 다시 실행해보면
#일렉트론만 실행(간단하게 메뉴만 볼거라 일렉트론만 실행해본다)
npx electron .
#react + 일렉트론 실행
npm start
이렇게 Menu.buildFromTemplate([]) 에 빈배열로 초기화가 되어 화면 메뉴가 사라져있는것을 볼 수 있다.
이제 menu에 아래처럼 설정하고
const menu = Menu.buildFromTemplate([
{
label: '메뉴'
}
])
일렉트론을 재시작 해보자
2. submenu 추가하기
지금 여기까지는 메뉴버튼을 누르면 아무일도 일어나지 않는데
메뉴 밑에 submenu를 추가하고
const menu = Menu.buildFromTemplate([
{
label: '메뉴',
submenu:[
{
label : 'Minux'
},
]
}
])
electron 재실행
3. Role 메뉴 추가하기 (menultem)
Role 메뉴란? Electon에서 기본적으로 기능들을 만들어 메뉴로 제공하는 그것을 role메뉴라 한다. 예를들면 커스텀 메뉴를 만들기 전 화면에 기본적으로 있던 메뉴들을 말한다.
role 메뉴는 아래 공식 홈페이지에 들어가면 너무나도 많은 기본 기능들을 제공한다.
https://www.electronjs.org/docs/latest/api/menu-item#roles
MenuItem | Electron
Add items to native application menus and context menus.
www.electronjs.org
이중에 개발자 도구를 열 수 있는 'toggleDevTools' role을 추가하고 재시작 해보자
const menu = Menu.buildFromTemplate([
{
label: '메뉴',
submenu:[
{
label : 'Minux'
},
{
role: 'toggleDevTools',
}
]
}
])
4. 클릭 이벤트 추가하기
일렉트론만 실행시켜 로그를 확인하면 한글이 깨짐현상이 있어
npm start로 리액스도 같이 실행시켜 확인하겠다.
const menu = Menu.buildFromTemplate([
{
label: '메뉴',
submenu:[
{
label : 'Minux',
click: (menuItem, window, event) => {
console.log('서브 메뉴 클릭 이벤트')
console.log(menuItem.label)
console.log(window)
console.log(event)
}
},
{
role: 'toggleDevTools',
}
]
}
])
5. type 메뉴 설정하기
일렉트론에서는 여러가지 type의 메뉴를 제공한다.
type메뉴들중에서 가장 많이 사용하는 separateor를 추가해 보자.
separateor type
const menu = Menu.buildFromTemplate([
{
label: '메뉴',
submenu:[
{
label : 'Minux',
click: (menuItem, window, event) => {
console.log('서브 메뉴 클릭 이벤트')
console.log(menuItem.label)
console.log(window)
console.log(event)
}
},
{
type: 'separator'
},
{
role: 'toggleDevTools',
}
]
}
])
이번에는 서브메뉴를 하나 더 추가해
type들중 check type을 사용해보자
checkbox type
const menu = Menu.buildFromTemplate([
{
label: '메뉴',
submenu:[
{
label : 'Minux',
click: (menuItem, window, event) => {
console.log('서브 메뉴 클릭 이벤트')
console.log(menuItem.label)
console.log(window)
console.log(event)
},
},
{
type: 'separator'
},
{
label : '체크박스 메뉴',
type:'checkbox',
checked: true,
},
{
role: 'toggleDevTools',
}
]
}
])
6. 외부 사이트 열기
메뉴를 클릭했을 떄 기본브라우저로 외부 URL을 호출한는 예제다
우선 electron의 shell을 선언한다.
const { app, BrowserWindow, Menu, shell } = require('electron')
shell.openExternal을 사용해 URL을 호출한다.
main.js 전체 코드
//main.js
const { app, BrowserWindow, Menu, shell } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation : false
}
})
const menu = Menu.buildFromTemplate([
{
label: '메뉴',
submenu:[
{
label : 'Minux',
click: (menuItem, window, event) => {
console.log('서브 메뉴 클릭 이벤트')
console.log(menuItem.label)
console.log(window)
console.log(event)
},
},
{
type: 'separator'
},
{
label : '체크박스 메뉴',
type:'checkbox',
checked: true,
},
{
role: 'toggleDevTools',
},
{
label: '일렉트론API 참고사이트',
click: () => {
}
}
]
}
])
Menu.setApplicationMenu(menu)
win.loadURL("http://localhost:5173/")
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', function () {
app.quit()
})
이렇게 사이트가 잘 뜨는것을 확인할 수 있다
더욱 자세한 내용은 API사이트를 참고하도록 하자..
