방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com Node.js/Electron8 일렉트론으로 만든 단순 알림 프로그램(윈도우 알림) 일렉트론을 활용하여 윈도우 알림프로그램을 만들어 보았습니다. 기능 자체는 어렵지 않으며, 매우 간단하게 구현하였습니다. 사용자가 시간을 입력하고, 입력된 시간에 맞추어 alert 메시지가 뜨는 프로그램 입니다. 먼저 메인 파일 입니다. * 파일이름 : main.js const {app, BrowserWindow} = require('electron'); function createWindow() { // 브라우저 창을 생성 let win = new BrowserWindow({ fullscreen: false, width: 385, height: 280, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule:.. 2021. 7. 2. 일렉트론 시작 - 7 (윈도우 인스톨러, electron window installer) 이번 포스팅은 일렉트론에서 윈도우 인스톨러를 만드는 방법 입니다. 해당 내용은 일렉트론을 실행하는 환경구성, 빌드하는 환경구성이 완료 된 이후의 내용입니다. 만약 일렉트론을 빌드(build)하는 방법을 모른다면 빌드(build)하는 내용부터 확인하여 주세요. lts0606.tistory.com/348 일렉트론(electron)에서 제공되는 인스톨러(installer)를 만들 때 대표적인 모듈(라이브러리) 목록입니다. 1. electron-winstaller 2. electron-installer-windows 3. electron-wix-msi 물론 저 위의 3개말고도 검색을 해 보면 다양하게 나옵니다. 먼저 1번 electron-winstaller를 사용하는 방법 입니다. 먼저 모듈을 설치하여 줍니다... 2021. 3. 16. 일렉트론 시작 - 6 (윈도우 tray 아이콘, 윈도우 트레이 아이콘) 일렉트론에서 트레이아이콘 기능을 구현하는 것은 매우 간단합니다. 기본 패키지에 있는 기능에서의 특정 함수를 통해 구현 할 수 있습니다. 먼저 기본 윈도우창을 띄우는 소스코드입니다. const { app, BrowserWindow } = require('electron'); // 브라우저 창을 생성하는 함수 function createWindow () { let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true //require같은 기능 사용 가능하도록 } }); win.loadFile('./html/index.html'); } app.on('ready', createWindow); 위 함수를 .. 2020. 6. 3. 일렉트론 시작 - 5 (Electron study, dialog, 알림창 띄우기) 일렉트론을 하다보면 간단하게 alert 또는 confirm 기능을 사용해야되는 경우가 생깁니다. 이럴때는 javascript에서 하는 것 처럼 html에 코딩하게되면...input type text 부분이 먹통이 되어버리는 경우가 발생 합니다. 아래 샘플코드를 예를들어 설명 하면, 요런코드가 있다고 가정하여보자. 전혀 어렵지 않는 코드 입니다. 단순하게 input type text에 있는 값을 저장하는 모습 입니다. 그런데..이런식으로 confirm이나 alert을 사용하게 되면 input type text가 읽기전용(readonly)처럼 변해 버립니다. 다시 말해 클릭도 안되고 입력도 안되는 현상이 되어 버립니다. 그래서 이러한 confirm이나 alert을 자바스크립트의 UI로 구성하지 않고 시스템에.. 2020. 1. 14. 일렉트론 시작 - 4 (Electron study, 샘플코드) 어느정도 조회, 등록, 수정, 삭제 기능을 만들어 놓구선 빌드를 해 보았습니다. 그런데 예상치 못한 문제가 발생 하였는데..바로 경.로.문.제... sqlite의 기반이므로 db파일이 없으면 만들어야하는데..자꾸 appData에 만들거나 tmp 디렉토리에 만드는 것 이었습니다. 내가 실행되는 현 상태의 경로를 찾으려면 여러방법이 있지만 가장쉬운건.. npm install electron-root-path 해당 모듈을 설치하는 것 입니다. 사용법은 매우 직관적입니다. const rootPath = require('electron-root-path').rootPath; 저거 한줄이 끝입니다. 저렇게 하면 실행중인 일렉트론 파일의 현 위치가 보여지게 됩니다. 물론!! 다른 방법도 있지만 해당 방법들은 개발환경.. 2020. 1. 3. 일렉트론 시작 - 3 (Electron study, Sqlite와의 연동) 어느정도 기초틀이 이루어진 상태에서 sqlite를 활용해서 데이터를 한번 넣어보고 가져오기위한 작업을 진행 하였습니다. 데이터베이스 접속하는 커넥션 함수, 저장함수, 가져오기 함수 등 총 3가지로 나누었고, 해당 기능을 순차적으로 동작 시켜 보았습니다. main.js에다가 해당 함수를 호출하는 방식으로 사용 하였습니다. const sqlite3 = require('sqlite3').verbose(); //데이터베이스 관련된 초기 기능 let isConn = false; let db = new sqlite3.Database('./db/my.db', sqlite3.OPEN_READWRITE, (err) => { if (err) { console.error(err.message); } else { consol.. 2020. 1. 2. 이전 1 2 다음
