반응형 Javascript/electron3 [electron]chrome extension사용하기 electron 개발을 하면서 chrome에서 사용하는 개발자도구 확장 프로그램의 사용이 필요해졌다. 현재는 knockoutjs를 사용하기에 일단 그것에 초점을 맞추며, 나머지는 응용해서 하면 해결될 것이다. 사용 방법 1. electron-devtools-installer 패키지 설치 - npm install electron-devtools-installer --save-dev 2. main process 코드에 import 하기 const { default: installExtension, KNOCKOUTJS_DEVTOOLS} = require('electron-devtools-installer') ... ... //앱 준비 되었을 시 화면 출력 담당 app.whenReady().then(async .. 2023. 1. 19. [electron] BrowserWindow의 frame 옵션(상단바 없애기 + 클릭) electron에서 윈도우를 생성할때 BrowserWindow의 옵션중에 frame을 false로 주게 되면 기본 윈도우에 존재하는 최소화, 최대화, 종료 버튼을 없앨 수 있다. https://www.electronjs.org/docs/latest/api/browser-window BrowserWindow | Electron Create and control browser windows. www.electronjs.org 그런데 이렇게 하면 문제가 drag가 불가능 해지는 문제가 있다. 그래서 드래그가 가능하게 할 영역을 html로 만들고 css style에 "-webkit-app-region: drag"을 추가해주면 드래그가 가능해진다. 그런데 이렇게 하고 상단바를 커스텀하여 만들었지만 클릭이 불가능 .. 2023. 1. 18. [electron] 기본 개념 electron의 학습을 진행중인데 현재 느끼기에 가장 중요한 개념은 프로세스(Process) 이다. electron에는 두 종류의 프로세스가 있다. main이라는 불리는것과 renderer로 불리는 것이다. 일단 renderer 부터 알고 가면 main은 조금 더 쉽게 이해가 될듯 하다. renderer 사용자가 보는 화면을 renderer라고 이해하면 된다 main 웹 서버 개발을 할시 백엔드에 해당하는 부분이라고 이해하면 된다. 실제 코드는 로컬에 있지만 renderer와 통신을 하는 녀석이다. (틀렸으면 말해주세요!!!) 이렇게 두가지로 나뉘어지며, renderer와 main이 통신을 하기 위해서는 IPC통신 이라는 방법을 써야한다. 자세한 공식 문서는 아래와 같다. https://www.elec.. 2023. 1. 17. 이전 1 다음 728x90