로컬 단축키
애플리케이션이 포커스를 가질 때만 동작하는 단축키입니다. Menu와 MenuItem의 accelerator 속성으로 정의할 수 있습니다.
// main.js
const { app, BrowserWindow, Menu } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 600, height: 400 });
win.loadFile('index.html');
}
// macOS: ⌘+I, Win/Linux: Ctrl+I
const template = [
{
label: '도움말',
submenu: [{
label: 'Electron 소개',
accelerator: process.platform === 'darwin' ? 'Cmd+I' : 'Ctrl+I',
click: () => { console.log('Electron 최고!'); }
}]
}
];
app.whenReady().then(() => {
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
createWindow();
});글로벌 단축키
globalShortcut 모듈을 사용해 앱 포커스 여부와 상관없이 단축키를 등록할 수 있습니다.
// main.js
const { app, BrowserWindow, globalShortcut } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 600, height: 400 });
win.loadFile('index.html');
}
app.whenReady().then(() => {
// mac: ⌘+Shift+G, win/linux: Ctrl+Shift+G
globalShortcut.register('CommandOrControl+Shift+G', () => {
console.log('글로벌 단축키 작동!');
});
createWindow();
});
// 앱 종료 시 단축키 해제
app.on('will-quit', () => globalShortcut.unregisterAll());렌더러 내 DOM 이벤트 사용
HTML 페이지 자체에서 keydown/keyup을 직접 처리하는 방법입니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>단축키 데모</title></head>
<body>
<h1>마지막 입력 키: <span id="key">없음</span></h1>
<script>
window.addEventListener('keydown', (e) => {
document.getElementById('key').innerText = e.key;
console.log(`키 눌림: ${e.key}`);
}, true);
</script>
</body>
</html>메인 프로세스에서 키 입력 가로채기
before-input-event로 렌더러에 전달되기 전 키 입력을 가로채서 커스텀 동작을 구현할 수 있습니다. 메인 프로세스에서 차단·처리한 뒤 렌더러로 전달되지 않습니다.
// main.js
const { app, BrowserWindow } = require('electron');
app.whenReady().then(() => {
const win = new BrowserWindow({ width: 600, height: 400 });
win.loadFile('index.html');
win.webContents.on('before-input-event', (event, input) => {
// Ctrl+Shift+L를 눌렀을 때
if (input.control && input.shift && input.key.toLowerCase() === 'l') {
console.log('메인에서 단축키 가로채기: Ctrl+Shift+L');
event.preventDefault();
}
});
});'Electron' 카테고리의 다른 글
| [Electron] 보안 강화 (0) | 2025.04.07 |
|---|---|
| [Electron] 성능 최적화: 리소스 효율성과 반응성을 높이는 전략 (0) | 2025.04.07 |
| [Electron] MessagePorts: 메시지 채널을 통한 프로세스 간 직접 통신 (0) | 2025.03.24 |
| [Electron] 프로세스 샌드박싱: 보안을 위한 실행 격리 (0) | 2025.03.24 |
| [Electron] IPC: 프로세스 간 통신으로 앱 기능 확장하기 (0) | 2025.03.24 |