본문 바로가기

Javascript/Electron.js2

Electron - 상단 메뉴 관리 서론 Electron 프로젝트를 처음 만들면, 상단에 다음과 같이 메뉴가 구성되어 있습니다. 이번에는 main.js에서 메뉴 구성을 입맛대로 해보고, 개발 시 사용할 메뉴와 실제 프로그램 배포 시 사용할 메뉴를 구분해서 추가하는 방법도 알아보겠습니다. 1. "Menu" import 2. MenuTemplate 작성 메뉴템플릿은 Object의 Array로 구성됩니다. 형식은 아래와 같이 직관적으로 이해할 수 있습니다. - label : 대메뉴 명칭 - submenu : 대메뉴의 submenu, Object Array형식 - accelerator : 단축키, macOS에서 사용할 때는 키가 다르기 때문에, 삼항 연산자를 사용하여 단축키를 등록합니다. - click() : 해당 submenu를 클릭했을 때, .. 2021. 4. 12.
Electron.js 개발 시작하기 서론 웹 어플리케이션의 경우, 브라우저를 계속 켜놓고 있어야 한다는 단점이 있습니다. 또한, 브라우저의 탭을 여러 개 켜놓고 사용하다가, 꺼버리는 경우가 존재하며, 가끔씩 제가 만든 도구를 윈도우 우측 하단 트레이에서 실행하고 싶을 때가 있습니다. JS로 크로스플랫폼 응용프로그램을 만들 수 있는 오픈소스 프레임워크인 Electron을 알게 되어, 공부할 겸 기록을 남겨봅니다. 1. 빠르게 개발 시작하기(bootstrapping) Electron 프로젝트를 생성하기 위해서는 다음 두 가지 프로그램이 설치되어 있어야 합니다. 설치 방법은 따로 설명하지 않겠습니다. - git-scm - node.js a. cmd로 적당한 디렉토리에 진입하여, Electron에서 공식적으로 만들어놓은 "electron-quic.. 2021. 4. 11.