반응형

이 글의 동영상 강의입니다.

https://youtu.be/0w2xmQ8q--s

 

title

최종 소스는 github를 참고하시기 바랍니다.

https://github.com/CodeGearGit/react-electron

 

GitHub - CodeGearGit/react-electron: React + Electron Project - Basic Setting

React + Electron Project - Basic Setting. Contribute to CodeGearGit/react-electron development by creating an account on GitHub.

github.com

 

이전에 진행했던 05.React 프로젝트에 일렉트론을 추가하는 법 에 이어서

 

05.React 프로젝트에 일렉트론을 추가하는 법

동영상 강좌 https://youtu.be/o4ZjkibiD8A 리액트 프로젝트 만들기(create-react-app) npx create-react-app "프로젝트명"을 사용하여 React Application을 만듭니다. npx create-react-app react-electron 리액..

codegear.tistory.com

보다 더 개발이 편리한 형태로 환경 구축을 진행해 봅니다.
이 환경을 기반으로 일렉트론 실전 프로젝트를 진행할 예정입니다.

npx create-react-app을 이용해 react-electron이라는 React 프로젝트를 만듭니다.

npx create-react-app react-electron

프로젝트 폴더로 이동후 vscode(visual studio code)를 실행합니다.

cd react-electron code .

vscode의 터미널을 열고 yarn start로 프로젝트를 실행하여 프로젝트가 잘 작동하는지 확인합니다.

yarn start

프로젝트에 일렉트론 패키지를 추가합니다.

  • electron 패키지는 개발시에만 사용하므로 --dev 옵션을 사용합니다.
yarn add --dev electron

package.json에서 electron 관련 설정을 추가합니다.

  • "main": "src/main.js" --> 일렉트론의 entry point를 main.js로 설정
  • "electron": "electron ." --> 일렉트론 실행 스크립트
{ ... "main": "src/main.js", 
  ... "scripts": { 
       ... "electron": "electron ." 
       } 
  ... 
}

src/main.js를 다음과 같이 만듭니다.

  • 이때 리액트 화면을 일렉트론에서 보여주기 위해서,
  • win.loadFile을 win.loadURL("http://localhost:3000")로 변경합니다.
const { app, BrowserWindow } = require('electron') 
const path = require('path') 
function createWindow () { 
  const win = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: { 
      nodeIntegration: true,
      contextIsolation : false
    } 
  }) 
  win.loadURL("http://localhost:3000")
} 
app.whenReady().then(() => { 
  createWindow() 
}) 
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit() 
})

Electron과 React를 같이 실행하기 위해 다음 패키지를 추가합니다.

  • concurrently : 일렉트론과 리액트 프로세스를 동시에 실행하기 위해 사용합니다.
  • wait-on : 프로세스 동시 수행시 한개의 프로세스가 완료되기를 기다리다 완료된 후 다음 프로세스를 수행하게 만들어 줍니다.
yarn add --dev concurrently wait-on

package.json에 스크립트를 변경합니다.

  • start 스크립트 수행시 concurrently를 이용해 react와 electron을 같이 시작하게 합니다.
  • electron 스크립트는 react가 완료되길 기다린 후 실행하게 합니다.
"scripts": {
    "start": "concurrently \"yarn react-scripts start\" \"yarn electron\" ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "wait-on http://localhost:3000 && electron ."
},

프로젝트를 실행합니다.

yarn start

이때 브라우저가 창이 먼저 뜨고 electron이 실행됩니다. 브라우저 창은 불필요하므로 띄우지 않도록 환경 설정을 합니다.

  • 루트 폴더에 .env 파일을 만들고, 다음 내용을 추가합니다.
BROWSER=none

다시 실행하면 다음과 같이 일렉트론에서 리액트를 실행한 화면이 나옵니다.

Electron with React

소스 코드 변경 후 화면이 바로 변경되는지 확인합니다.

  • App.js에서 다음 코드를
<p> Edit <code>src/App.js</code> and save to reload. </p>
  • 아래 코드로 변경합니다.
<p> Hello! World. </p>

파일을 저장하면 다음과 같은 화면이 보입니다.

  • 소스 변경시 자동 반영되는 것을 "hot deploy"라고 합니다.

hot deploy

변경된 화면은 다음과 같습니다.

Hello! world!

이상으로 일렉트론과 리액트를 이용한 개발환경 구성을 마쳤습니다.
리액트를 좀 아시는 분이라면 이 환경에서 편하게 개발을 하실 수 있습니다.

수고하셨습니다.

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-14.Electron + Vue.js  (0) 2022.03.06
일렉트론기초-13.Electron + React로 IPC 통신하기  (0) 2021.11.13
일렉트론기초-11.일렉트론 MySQL 연동  (0) 2021.10.30
일렉트론기초-10.일렉트론 사이드 메뉴 만들기  (0) 2021.10.09
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
반응형

일렉트론 MySQL 연동

일렉트론에서 MySQL을 연동하여 데이터를 읽어오는 것을 배워봅니다.

 

이 글의 동영상 강의입니다.

https://youtu.be/3EqAud7cBGY

Database와 Data 생성

MySQL Workbench를 실행합니다.

아래 쿼리로 스키마를 생성합니다.

 

CREATE SCHEMA test;

사용자를 생성하고 권한을 설정합니다.

CREATE USER 'test'@'localhost' identified with mysql_native_password by 'test';
GRANT ALL PRIVILEGES ON test.* TO 'test'@'localhost';
flush privileges;

Workbench에서 Connection을 추가합니다.

New Connection

설정한 Connection으로 접속합니다.

Connection

테이블을 생성합니다.

CREATE TABLE IF NOT EXISTS `test`.`user` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `userid` VARCHAR(50) NULL,
  `username` VARCHAR(50) NULL,
  PRIMARY KEY (`id`))
ENGINE = InnoDB;

아래와 같이 생성된 테이블에 데이터를 입력합니다.

insert into test.user(userid, username) values ('codegear', '코드기어');
insert into test.user(userid, username) values ('ironman', '아이언맨');
insert into test.user(userid, username) values ('spiderman', '스파이더맨');

data 확인

일렉트론 Appllication 만들기

다음 스크립트로 일렉트론 Application을 만듭니다.

npx create-electron-app electron-mysql

mysql 사용을 위해 'mysql' 패키지를 설치합니다.

npm i mysql

src/index.html을 다음 코드를 입력합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <input type="button" id="btn" value="connectToMysql"/>
    <div id='users'></div>
    <script src='./function.js'></script>
  </body>
</html>

src/function.js를 만들고 다음 코드를 입력합니다.

const mysql = require('mysql');

function setInnerHTML(text) {
    const element = document.getElementById('users');
    element.innerHTML += '<div>'+text+'</div>';
  } 

document.getElementById("btn").addEventListener("click", ()=>{
    //ipc.send('getUsers');
    var connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'test',
        password : 'test',
        database : 'test'
    });

    connection.connect();

    connection.query('SELECT * from USER', function (error, results, fields) {
        if (error) throw error;
        console.log('users: ', results);
        results.forEach(user => {
            setInnerHTML(user.username);
        });
    });

    connection.end();
})

application을 실행합니다.

npm start

"require is not defined" 오류를 확인할 수 있습니다.

require is not defined

src/index.js의 createWindow에 다음 내용을 추가합니다.

    webPreferences: {
      nodeIntegration: true,
      contextIsolation : false
    }

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation : false
    }
  });

Application을 다시 실행하면 아래와 같은 결과를 확인할 수 있습니다.

Completed!!!

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-14.Electron + Vue.js  (0) 2022.03.06
일렉트론기초-13.Electron + React로 IPC 통신하기  (0) 2021.11.13
일렉트론기초-12.React + Electron 한방에 띄우기  (7) 2021.11.04
일렉트론기초-10.일렉트론 사이드 메뉴 만들기  (0) 2021.10.09
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
반응형

이 글의 동영상 강의

https://youtu.be/_KMmhsVPbk0

완성 화면

  • 아래와 같이 사이드 메뉴가 추가된 화면을 만들어보도록 하겠습니다.

완성 화면

사이드 메뉴 추가하기

이전 시간에 진행했던 타이틀바 프로젝트로 계속 진행합니다.

 

Side Sliding Menu CSS

CSS Sliding menu with scroll, no JS were used...

codepen.io

 

Side Sliding Menu CSS

VSCode로 이전 프로젝트를 불러옵니다.

  • codepen의 html에서 <nav></nav> 부분을 복사해서, index.html의 </container>뒤에 붙여넣습니다.
  • codepen의 css를 전체 복사해 src/css/menu.css를 만들고 붙여 넣습니다.
  • index.css의 body를 제외한 나머지 부분을 src/css/menu.css에 붙여 넣습니다.
  • 아래와 같이 src/css/menu.css를 수정합니다.
.title{
  height: auto;
  padding: 20px;
  display: inline-block;
}
...
@import url(../font-awesome-4.7.0/css/font-awesome.css);
...
  • 프로젝트를 실행합니다.
npm start
  • 실행화면에서 타이틀바의 높이를 확인합니다.
    • DevTools의 선택도구를 이용

  • title-bar이 높이와 동일하게 side-bar의 위치를 맞춥니다.
.main-menu {
    position: absolute;
    margin-top: 58px;
    ...
  • 완료된 화면은 다음과 같습니다.

사이드바 추가화면

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-14.Electron + Vue.js  (0) 2022.03.06
일렉트론기초-13.Electron + React로 IPC 통신하기  (0) 2021.11.13
일렉트론기초-12.React + Electron 한방에 띄우기  (7) 2021.11.04
일렉트론기초-11.일렉트론 MySQL 연동  (0) 2021.10.30
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
반응형

이 글의 동영상 강의

https://youtu.be/si9l7uXKeq8

일렉트론에서 이벤트 처리 개념

IPC Communication

  • 일렉트론이 실행되면 main과 renderer 두개의 프로세스가 실행됩니다.
  • main은 native 기능을, renderer는 web 개발 모듈의 화면 처리를 담당합니다.
  • main과 rederer 사이의 통신은 IPC(Inter Process Communication)가 담당합니다.
  • 일렉트론 IPC는 ipcMain과 ipcRenderer 두가지가 있습니다.
  • ipcMain 은 main 프로세스에서 ipcRenderer는 renderer 프로세스에서 사용되며 상호간 communication에 사용됩니다.

일렉트론 디폴트 타이틀바 제거

  • index.js의 createWindow에서 frame: false 를 추가합니다.
const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation : false
    }
  });
  
  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};


버튼의 기능 추가하기

  • src/function.js 파일을 추가합니다.
  • function.js에 다음 코드를 추가합니다.
  • ipcRender의 send를 이용하여 main 프로세스로 이벤트를 요청합니다.
const { ipcRenderer } = require('electron');
const ipc = ipcRenderer;

var btnMin = document.getElementById("min");
var btnMax = document.getElementById("max");
var btnClose = document.getElementById("close");

btnMin.addEventListener("click", ()=>{
    ipc.send('minimizeApp');
});
btnMax.addEventListener("click", ()=>{
    ipc.send('maximizeApp');
});
btnClose.addEventListener("click", ()=>{
    ipc.send('closeApp');
});
  • index.html의 body 마지막에 function.js를 추가합니다.
<script src='./function.js'></script>


Main 프로세스에서 이벤트 처리하기

  • index.js에 ipcMain을 추가합니다.
const { app, BrowserWindow, ipcMain } = require('electron');
const ipc = ipcMain;
  • index.js의 createWindow function에 callback function을 추가합니다.
  ipc.on('minimizeApp', ()=>{
    mainWindow.minimize();
  })

  ipc.on('maximizeApp', ()=>{
    if(mainWindow.isMaximized()){
      mainWindow.restore();
    } else {
      mainWindow.maximize();
    }
  })

  ipc.on('closeApp', ()=>{
    mainWindow.close();
  })

앱을 실행합니다.

npm start

앱을 실행하면 메뉴바의 버튼들이 작동하는 것을 확인 할 수 있습니다.

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-13.Electron + React로 IPC 통신하기  (0) 2021.11.13
일렉트론기초-12.React + Electron 한방에 띄우기  (7) 2021.11.04
일렉트론기초-11.일렉트론 MySQL 연동  (0) 2021.10.30
일렉트론기초-10.일렉트론 사이드 메뉴 만들기  (0) 2021.10.09
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
반응형

이 글의 동영상 강의

https://youtu.be/eo16edDyau0

일렉트론의 디폴트 타이틀바를 없애고 새로운 타이틀바를 만드는 방법을 배워봅니다.

 

fontawesome 설치

  • 타이틀바에 들어갈 icon은 fontawesome을 설치하여 사용합니다.
  • google에서 fontawesome 검색합니다.

fontawesome

  • The iconic font and CSS toolkit 선택합니다.

Get Started

  • Get Started를 선택합니다.

Font Awesome 4

  • Font Awesome 4를 선택합니다.

Download

  • Download를 선택합니다.
  • download 받은 파일을 src/font-awesome에 압축 해제합니다.

일렉트론 애플리케이션 화면 상단에 메뉴바를 만들기

  • index.html에 fontawesome css를 추가합니다.
<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
  • 앞에 google에서 조회한 fontawesome의 Free Icons 사이트로 이동합니다.

Free Icons

  • icon 검색 창에서 minimize를 검색합니다.

minimize

  • window-minimize를 선택합니다.

window-minimize icon

  • 다음과 같이 index.html에 아이콘을 추가합니다.
<button id="min">
  <i class="fa fa-window-minimize"></i> 
</button>
  • maximize, close 아이콘도 동일한 방법으로 추가합니다.
<button id="min">
  <i class="fa fa-window-minimize"></i> 
</button>
<button id="max">
  <i class="fa fa-window-maximize"></i> 
</button>
<button id="close">
  <i class="fa fa-window-close"></i> 
</button>
  • index.html 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container">
      <div class="title-bar">
        <div class="title prevent-select draggable">Custom Title Bar</div>
        <div class="control prevent-select">
          <button id="min">
            <i class="fa fa-window-minimize"></i>
          </button>
          <button id="max">
            <i class="fa fa-window-maximize"></i>
          </button>
          <button id="close">
            <i class="fa fa-window-close"></i>
          </button>
        </div>
      </div>
    </div>
  </body> 
</html>
  • 일렉트론을 실행합니다.
npm start

실행화면

  • index.css를 다음과 같이 수정합니다.
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0px;
}

body *{
  box-sizing: border-box;
}

.container{
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.title{
  height: auto;
  padding: 10px;
  display: inline-block;
}

.control{
  float: right;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 5px;
  margin-right: 5px;
  width: 100px;
}

.control button{
  padding: 5px;
  background: #000000;
  color: #ffffff;
  outline: 0;
  border: 0;
}

.control button:hover{
  background: #444444
}

.title-bar{
  background: #000000;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #ffffff;
  font-size: 15px;
}

.prevent-select{
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.draggable{
  -webkit-app-region: drag;
}
  • 일렉트론을 실행합니다.
npm start

디자인 완성화면

Custom Title Bar의 디자인이 완성되었습니다.

 

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-12.React + Electron 한방에 띄우기  (7) 2021.11.04
일렉트론기초-11.일렉트론 MySQL 연동  (0) 2021.10.30
일렉트론기초-10.일렉트론 사이드 메뉴 만들기  (0) 2021.10.09
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
일렉트론기초-04.일렉트론 프로젝트 쉽게 만들고 쉽게 실행하기  (0) 2021.09.28
반응형

동영상 강의

https://youtu.be/vgic4kn1Oko

Electron 화면은 web 제작 기술과 동일합니다.

따라서 html, css, js만으로 개발이 가능합니다.

 

이번 시간은 codepen 사이트에서 맘에 드는 디자인을 가져와서 화면 디자인을 바꿔봅니다.

 

우선 일렉트론 App을 만듭니다.

npx create-electron-app electron-app

VSCode로 프로젝트를 불러옵니다.

code .

codepen.io 사이트로 이동합니다.

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

검색창에 "intro" 로 검색합니다.

 

ScrollMagic Wiki Tutorial : Anchor Navigation

Demo for the ScrollMagic Anchor Navigation Effect. Read the WIKI tutorial: https://github.com/janpaepke/ScrollMagic/wiki/Tutorial-:-Anchor-Navigation...

codepen.io

  • html 내용을 복사해서 index.html에 붙여 넣습니다.
  • css 내용을 복사해서 index.css에 붙여 넣습니다.
  • src/function.js 파일을 만듭니다.
  • js 내용을 복사해서 function.js에 붙여 넣습니다.
  • index.html </body>위에 <srcript src='function.js'></script>를 추가합니다.
  • yarn start 를 실행합니다.

실행화면

간단하게 일렉트론 화면을 만들어 봤습니다.

이렇게 codepen을 이용하면 디자이너 없이 약간의 수정만으로 일렉트론 개발이 가능합니다.

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-11.일렉트론 MySQL 연동  (0) 2021.10.30
일렉트론기초-10.일렉트론 사이드 메뉴 만들기  (0) 2021.10.09
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
일렉트론기초-04.일렉트론 프로젝트 쉽게 만들고 쉽게 실행하기  (0) 2021.09.28
일렉트론기초-03.일렉트론 프로젝트에 React 추가하기  (0) 2021.09.22
반응형

동영상 강좌

https://youtu.be/ojDfxv_EU1k

일렉트론의 메뉴는 다음 API 문서를 참조하시면 됩니다.

https://www.electronjs.org/docs/latest/api/menu

 

Menu | Electron

Menu Class: Menu# Create native application menus and context menus. Process: Main new Menu()# Creates a new menu. Static Methods# The Menu class has the following static methods: Menu.setApplicationMenu(menu)# Sets menu as the application menu on macOS. O

www.electronjs.org

소스는 지난시간에 만든 react-electron을 계속 사용합니다.

  • src/main.js

가장 먼저 menu를 사용하기 위해서 electron의 menu를 선언 합니다.

const { app, BrowserWindow, Menu } = require('electron');

다음과 같이 template을 이용하여 menu를 setting 합니다.

  • createWindow function 다음에 아래 코드를 작성합니다.
const template = []; 
const menu = Menu.buildFromTemplate(template); 
Menu.setApplicationMenu(menu);
  • 현재는 template에 값이 없기 때문에 메뉴가 나타나지 않는 것을 볼 수 있습니다.

menu가 없이 실행됨.

  • template에 다음과 같이 메뉴를 추가합니다.
const template = [
  { 
    label: "File",
  }
]

File 메뉴 추가

  • submenu는 다음과 같이 추가합니다.
  { 
    label: "File", 
    submenu: [ 
      { 
        label: "Open" 
      }
    ] 
  }

submenu 추가

Role 메뉴

 

MenuItem | Electron

Add items to native application menus and context menus.

www.electronjs.org

  • 개발자 화면을 toggle 하는 'toggleDevTools' role을 다음과 같이 추가합니다.
{ 
    role: 'toggleDevTools', 
}

role 추가

메뉴 클릭시 이벤트 처리하기

  • 다음과 같이 Open 메뉴를 클릭했을때 console 로그를 출력하는 이벤트를 추가합니다.
{ 
    label: "Open" , 
    click: function(){ 
      console.log('Clicked Menu Open!!!');
    }
},

Type 메뉴

  • 일렉트론에서는 여러가지 type의 메뉴를 제공합니다.
  • 그 중 가장 많이 사용하는 separator를 추가해 봅니다.
{ type: 'separator' },

separator 추가

  • 'checkbox' type을 추가합니다.
{ label: 'Menu Item 2', type: 'checkbox', checked: true },

checkbox type 추가

외부 사이트 열기

  • 메뉴를 클릭했을 때 기본브라우저로 외부 URL을 호출하는 예제입니다.
  • 우선 electron의 shell을 선언 합니다.
const { app, BrowserWindow, Menu, shell } = require('electron')
  • shell.openExternal을 사용해 사이트를 호출합니다.
click: function(){
  shell.openExternal("https://www.electronjs.org/docs/api") 
}

외부 url 호출

이상으로 일렉트론의 메뉴 사용법을 알아보았습니다.

보다 자세한 사항들은 API 문서를 참조하시기 바랍니다.

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-10.일렉트론 사이드 메뉴 만들기  (0) 2021.10.09
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
일렉트론기초-04.일렉트론 프로젝트 쉽게 만들고 쉽게 실행하기  (0) 2021.09.28
일렉트론기초-03.일렉트론 프로젝트에 React 추가하기  (0) 2021.09.22
일렉트론기초-02.일렉트론 퀵스타트  (0) 2021.09.20
반응형

동영상 강의

https://youtu.be/g71mHJVbEzY

보일러플레이트를 사용하면 이전에 만들었던 일렉트론 프로젝트를 보다 쉽게 만들 수 있습니다.

사용법은 다음과 같습니다.

npx create-electron-app "프로젝트명"

npx create-electron-app electron-app
cd electron-app

VS Code를 실행합니다.

code .

npm 패키지를 설치합니다.

  • 메뉴에서 터미널 - 새터미널을 선택합니다.
  • npm install 스크립트를 실행합니다.
npm install

프로젝트 폴더 구조는 다음과 같습니다.

폴더 구조

다음 스크립트로 프로젝트를 실행합니다.

yarn start or npm start

실행 화면은 다음과 같습니다.

실행화면

VSCode에 npm을 설치하면 보다 보다 쉽게 프로젝트를 실행할 수 있습니다.

  • 왼쪽 메뉴바에서 확장을 선택합니다.

메뉴바-확장

  • 검색창에 "npm"을 입력합니다.

마켓플레이스

  • egamma의 npm을 설치합니다.
  • 보기 - 명령팔레트 메뉴를 선택합니다.
  • 입력창에 "npm"을 입력합니다.

명령팔레트

  • "Npm 스크립트 보기에 포커스"를 선택합니다.
  • 탐색기 하단에 "NPM 스크립트"라는 메뉴가 추가되었습니다.

NPM 스크립트

  • start 스크립트 옆에 마우스를 가져가면 실행 버튼이 나타납니다.
  • 실행버튼을 클릭하면 스크립트가 실행됩니다.

이제 일렉트론 프로젝트를 쉽고 빠르게 만들고 실행할 수 있게 되었습니다.

남는 시간은 잠시 쉬었다 하시길 바랍니다.^^

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
일렉트론기초-03.일렉트론 프로젝트에 React 추가하기  (0) 2021.09.22
일렉트론기초-02.일렉트론 퀵스타트  (0) 2021.09.20
일렉트론기초-01.일렉트론이란?  (0) 2021.09.19
반응형

이 포스트의 동영상 강의

https://youtu.be/7hzH4B6xLIE

 

Electron

이번 글은 일렉트론 공식 홈페이지에 있는 퀵스타트를 요약한 것입니다.

https://www.electronjs.org/docs/latest/tutorial/quick-start

 

Quick Start | Electron

This guide will step you through the process of creating a barebones Hello World app in Electron, similar to electron/electron-quick-start.

www.electronjs.org

nodejs

Nodejs 설치 및 업데이트

  • Electron을 개발하기 위해서는 우선 nodejs가 설치 되어 있어야 합니다.
  • nodejs 홈페이지에서 nodejs를 설치합니다.
  • https://nodejs.org/ko/
  • 설치 후 다음 명령을 사용하여 설치 버전을 확인합니다.

 

node -v
npm -v​

 프로젝트 폴더 생성

  • mkdir my-electron-app 
  • cd my-electron-app

프로젝트 생성

  • npm init

Package.json 파일 확인

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": “First electron app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
  • "main": "index.js" : entry point로 프로그램의 시작점입니다.
  • 파일명은 index.js 또는 main.js를 일반적으로 사용합니다.

Electron Package 추가

  • 프로젝트에서 electron을 사용하기 위해서는 "electron" 패키지를 반드시 추가해야 합니다.
npm install --save-dev electron

Package.json에 script 추가

  • 실행 스크립트를 다음과 같이 추가합니다.
  • npm start로 스크립트를 실행할 수 있습니다.
    "scripts": { 
        "start": "electron ." 
    }

index.html 생성

  • root 폴더에 index.html을 만들고 다음과 같이 작성합니다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

index.js 생성

  • root 폴더에 index.js를 만들고 다음과 같이 작성합니다.
const { app, BrowserWindow } = require('electron')
// include the Node.js 'path' module at the top of your file
const path = require('path')


// modify your existing createWindow() function
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

preload.js 생성

  • root 폴더에 preload.js를 생성 합니다.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

프로젝트 실행

npm start

실행 화면

Electron 실행

패키징과 배포

  • 패키징과 배포를 위한 가장 빠른 방법은 Electron Forge를 사용하는 것입니다.
  • Electron Forge 패키지를 추가합니다.
npm install --save-dev @electron-forge/cli
npx electron-forge import
  • Forge의 "make"를 이용하여 빌드합니다.
npm run make
  • 실행 파일의 위치는 다음과 같습니다.
\out\my-electron-app-win32-x64\my-electron-app.exe

이상으로 Electron Quick Start를 마칩니다.

반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
일렉트론기초-04.일렉트론 프로젝트 쉽게 만들고 쉽게 실행하기  (0) 2021.09.28
일렉트론기초-03.일렉트론 프로젝트에 React 추가하기  (0) 2021.09.22
일렉트론기초-01.일렉트론이란?  (0) 2021.09.19
반응형

이 포스트의 동영상 강의

https://youtu.be/Krc4mHkGLqM

 

 

 

일렉트론

일렉트론은 Javascript, HTML, CSS를 이용하여 Desktop Application을 만드는 프레임워크입니다.

따라서 자바스크립트와 웹개발 지식을 가지고 있다면 쉽게 데스크톱 애플리케이션을 만들 수 있습니다.

그리고, 일렉트론은 1개의 코드만으로 Cross-Platform에서 작동하는 애플리케이션을 빌드할 수 있습니다.

 

일렉트론은 

  • 2013.4 Atom Editor를 만들기 위해 시작한 Atom Shell에서 시작
  • 2014.5 MIT라이선스 오픈소스로 전환
  • 2015.4 Atom Shell에서 Electron으로 명칭 변경
  • 2016.5 Electron V1.0 출시

일렉트론 아키텍처

  • Backend - Nodejs 런타임
  • Frontend -Chromium(크로미엄, 오픈소스 웹브라우저 프로젝트이며 구글 크롬이 이것을 사용함)

Electron Architecture

일렉트론을 사용하여 만들어진 Application

  • 일렉트론을 이용해 개발된 앱은 https://www.electronjs.org/apps 에서 확인할 수 있습니다.
  • 굉장히 많은 앱 리스트가 있고, 그 중 우리가 잘 아는 앱들은 다음과 같은 것들이 있습니다.

Electron으로 개발된 Application

일렉트론 Application의 File 구조

Electron Application Files

일렉트론의 장점

  • 웹기술을 이용해 Desktop Application 개발이 가능.
  • 한개의 코드로 Cross platform에서 작동하는 애플리케이션을 만들 수 있음.
  • NPM을 이용해 node package들을 사용할 수 있음.
반응형

'일렉트론' 카테고리의 다른 글

일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)  (0) 2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인  (0) 2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기  (0) 2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기  (0) 2021.10.01
일렉트론기초-05.React 프로젝트에 일렉트론을 추가하는 법  (0) 2021.09.29
일렉트론기초-04.일렉트론 프로젝트 쉽게 만들고 쉽게 실행하기  (0) 2021.09.28
일렉트론기초-03.일렉트론 프로젝트에 React 추가하기  (0) 2021.09.22
일렉트론기초-02.일렉트론 퀵스타트  (0) 2021.09.20

+ Recent posts

티스토리툴바