electron

Electron에서 HTML 안에 다른 HTML을 삽입(Include)하여 부분별로 HTML을 나눠 관리하기 쉽도록 하기 위해 찾아보니, AngulerJS 같은 프레임워크를 쓰면 된다고 하지만, 사용할 줄 모르기에..... 더 검색해 보니 Electron 전용(?!) ejs를 사용하게 되었다. * ejs-electron 아래는 HTML에 다른 HTML을 추가하여 사용하는 방법 예시이다. - 완성된 파일 구조(결과) 메인인 index.js 파일 ejs-electron 을 추가하여 사용 할 수 있다. ejse.data("key", "value") 또는 ejse.data({key: "value"}) 형식으로 ejs 파일에 값을 전달 할 수 있다. const electron = require('electron'..

[Electron] 탐색기 여는 방법 shell을 이용해서 탐색기를 열 수 있다. const electron = require('electron'); const { shell } = electron; const app = electron.app || electron.remote.app; const appDir = app.getPath('userData'); // AppData 폴더 // 탐색기 열기 function openDir(url) { shell.showItemInFolder(appDir); } shell을 이용하면, 탐색기 열기 뿐만 아니라, 파일 열기 shell.openItem(fullPath), 선택한 아이템을 휴지통으로 보내는 기능 shell.moveItemToTrash(fullPath) 등..

[Electron] database 연결하기 Database(Mysql) 에 정상적으로 연결되었는지 Main 프로세스에서 체크한 후 결과를 화면(renderer)에 표시하려고 한다. 파일 구조는 아래와 같이 구성했다. - main.js : 메인 프로세스 - database └ db_info.js : database 정보 └ db_conn.js : database 연결 함수 정의 - app └ main.html └ renderer.js 간략히 설명하면 내가 구성한 코드의 작동 순서는 다음과 같다. 1) renderer.js 에서 main으로 database 가 연결되었는지 확인 요청함 2) main.js 에서 database 연결을 db_conn.js 의 open 함수를 통해 체크한 후 open 함수에서 ..

[Electron] contextmenu 만드는 방법 Contextmenu? 마우스 오른쪽 버튼 눌렀을 때 생성되는 메뉴. 먼저, menu 관련 electron api 추가한다. const electron = require('electron'); const { remote } = electron; const { Menu, MenuItem } = remote; 사용할 메뉴를 정의한다. ex. 마우스 오른쪽 클릭할 경우 표시될 menu를 만들 예정이기 때문에 menu 이름을 `rcMenu`라 정의했다. // 메뉴 생성 const rcMenu = new Menu(); append 함수를 이용하여 메뉴에 아이템(옵션)들을 추가한다. // 일반 메뉴 아이템 rcMenu.append(new MenuItem({ la..

[electron] 특정 위치에서만 메뉴(context-menu) 보이도록 설정하는 방법 예) 아이디(id)값이 imageDiv 인 곳에서만 마우스 오른쪽 클릭 메뉴가 보이도록 설정하기 const { Menu, MenuItem } = remote; // 메뉴 생성 const menu = new Menu(); menu.append(new MenuItem({ label: 'Download', click() { // 메뉴 선택에 따른 동작(이벤트) 정의 console.log('Download!') } })) // 이벤트 리스너 생성 window.addEventListener('contextmenu', (e) => { e.preventDefault() // 마우스 오른쪽 버튼 클릭한 위치(target)의 아이디..

[Electron] Dialog 메인(Main) 프로세스 const { dialog } = require('electron') 렌더러(Renderer) 프로세스 const { dialog } = require('electron').remote dialog.showOpenDialog([browserWindow, ]options[, callback])파일 열기 다이얼로그 dialog.showSaveDialog([browserWindow, ]options[, callback])파일 저장 다이얼로그 dialog.showMessageBox([browserWindow, ]options[, callback])메세지 박스 dialog.showErrorBox(title, content)에러 메세지 박스 -> alert을..