'electron' 태그의 글 목록

Vue.js를 사용해서 일렉트론 앱을 만드는 법에 대해 알아봅니다.

Vue CLI 설치

우선 Vue cli를 전역으로 설치합니다.

기존 vue/cli가 @vue/cli로 변경되었습니다.
이전버전이 설치되어 있다면 삭제 후에 설치해 주세요(npm uninstall vue/cli)

npm i -g @vue/cli

설치가 완료되면 다음 명령으로 설치 버전을 확인합니다.

vue --version

Vue 프로젝트 생성

이제 vue 프로젝트를 만듭니다.

프로젝트명 : elec-vue

vue create elec-vue

Vue 버전 선택 : 최신 버전인 Vue 3를 선택합니다.

아래와 같이 설치가 진행됩니다.

잠시 후 설치가 완료됩니다.

다음 명령어로 프로젝트를 실행합니다.

yarn serve

http://localhost:8080으로 접속하면 다음과 같은 화면이 나옵니다.

ctrl + C를 눌러 실행을 종료합니다.

프로젝트에 Electron Builder 추가

Electron Builder는 기존 프로젝트를 Electron으로 바꿔주고 쉽게 build를 할 수 있게 돕습니다.

Vue CLI Plugin으로 제공하는 Electron을 사용하면 쉽게 설치가 가능합니다.

https://nklayman.github.io/vue-cli-plugin-electron-builder/

Vue CLI Plugin Electron Builder

nklayman.github.io

다음 명령으로 Electron Builder를 추가합니다.

vue add electron-builder

Electron 버전 선택 : 13.0.0

설치가 완료되면 package.json에 다음과 같이 스크립트가 추가됩니다.'

Electron 실행

이제 Electron이 추가된 프로젝트를 실행합니다.(package.json 참고)

yarn electron:serve

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

Electron Build

다음 명령으로 App을 Build 할 수 있습니다.

yarn electron:build

빌드가 완료되면 다음과 같이 dist_electron 폴더에 실행 파일이 생성됩니다.
- 맥의 경우 dmg 파일로, 윈도우의 경우는 exe 파일로 생성됩니다.

생성된 실행파일을 더블클릭하면 다음과 같이 Application이 실행됩니다.

이렇게 vue 프로젝트에 electron builder를 추가하면 쉽게 electron+vue 프로젝트를 만들 수 있습니다.

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

일렉트론기초-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
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC) (0)	2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인 (0)	2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기 (0)	2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기 (0)	2021.10.01

일렉트론에서 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을 추가합니다.

설정한 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', '스파이더맨');

일렉트론 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" 오류를 확인할 수 있습니다.

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을 다시 실행하면 아래와 같은 결과를 확인할 수 있습니다.

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

일렉트론기초-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

완성 화면

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

사이드 메뉴 추가하기

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

Codepen에서 "side menu"로 검색합니다.
Side Sliding Menu CSS를 선택합니다.
https://codepen.io/EduardL/pen/aBGAy

Side Sliding Menu CSS

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

codepen.io

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

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

일렉트론이 실행되면 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/JvSdzyoaRhg

이전 포스트 일렉트론 퀵스타트에서 만든 프로젝트에 React를 추가하는 방법을 설명합니다.

리액트 패키지를 추가

npm install --save react react-dom

리액트 소스 폴더 만들기

mkdir src/js

index.html에 root id 생성

<div id="root"></div>

src/js/index.js 파일 만들기

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>Hello React App</h1>, document.getElementById('root'));

웹팩용 패키치 추가

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader sass-loader sass webpack webpack-cli

webpack.common.js 추가 (root 폴더)

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

package.json에 webpack 스크립트 추가

"watch": "webpack --config webpack.common.js --watch",

스크립트 실행
- 스크립트가 실행되면 build/js/app.js가 생성됨.

npm run watch

index.html에 app.js 추가

<div id="root"></div>
<script src="./build/js/app.js"></script>

실행

npm start

React Component 만들기

src/js/App.js 추가

import React from 'react';

export default function App() {
    return(
        <h1>I am App Component</h1>
    )
}

src/js/index.js 수정

import App from './App';

ReactDom.render(<App/>, document.getElementById('root'));

저장(Ctrl+s)
실행화면 창에서 Reload(Ctrl+r)

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

일렉트론기초-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
일렉트론기초-02.일렉트론 퀵스타트 (0)	2021.09.20
일렉트론기초-01.일렉트론이란? (0)	2021.09.19

이 포스트의 동영상 강의

https://youtu.be/7hzH4B6xLIE

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

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 설치 및 업데이트

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 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(크로미엄, 오픈소스 웹브라우저 프로젝트이며 구글 크롬이 이것을 사용함)

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

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

일렉트론 Application의 File 구조

일렉트론의 장점

웹기술을 이용해 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

코드 기어 Code Gear - 개발 강좌

electron

일렉트론기초-14.Electron + Vue.js

Vue CLI 설치

Vue 프로젝트 생성

프로젝트에 Electron Builder 추가

Electron 실행

Electron Build

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

일렉트론기초-11.일렉트론 MySQL 연동

Database와 Data 생성

일렉트론 Appllication 만들기

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

일렉트론기초-10.일렉트론 사이드 메뉴 만들기

완성 화면

사이드 메뉴 추가하기

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

일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC)

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

일렉트론기초-03.일렉트론 프로젝트에 React 추가하기

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

일렉트론기초-02.일렉트론 퀵스타트

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

일렉트론기초-01.일렉트론이란?

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

+ Recent posts

티스토리툴바