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

2021. 10. 30. 22:09

일렉트론에서 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

코드 기어 Code Gear - 개발 강좌