반응형

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

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
반응형

title image

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

https://youtu.be/vjgI7MNNxsE

지난 시간에 아래와 같이 모델링한 내용으로 MySQL Workbench를 이용하여 테이블을 만들어봅니다.

모델링

  • 우선  MySQL Workbench를 실행합니다.
  • 상단 메뉴에서 File - New Model을 선택합니다.
    New Model
  • Schema에서 마우스 오른쪽 클릭 후 Edit Schema를 선택합니다.
    Edit Schema
  • Schema name을 변경합니다.
    Schema name 변경
  • Add Diagram을 더블클릭합니다.
    Add Diagram
  • New Table 아이콘을 선택합니다.
    New Table
  • 마우스를 다이어그램 내부에 클릭하면 Table이 생성 되고, 생성된 Table을 더블 클릭하면 Table 설정 창이 하단에 나타납니다.
    Table 설정
  • Table의 컬럼 정보를 아래와 같이 입력하면 다이어그램의 Table 정보가 아래와 같이 변경됩니다.
    Table명 : user
    id, INT
    username, VARCHAR(50)
    icon_url, VARCHAR(200)
    컬럼 정보 입력
  • photo table 정보도 아래와 같이 입력합니다.
    photo table
  • Foreign key 설정을 위해 스포이드 그림이 있는이 있는 1:n 아이콘을 선택합니다.
    1:n
  • 먼저 photo의 user_id 컬럼을 선택 후 user의 id 컬럼을 선택합니다.
    foreign key 선택
  • 아래와 같이 foreign key 가 연결 됩니다.
    foreign key 연결
  • 나머지 테이블도 아래와 같이 만듭니다.
    전체 테이블 다이어그램

다음은 만들어진 모델을 이용해 테이블을 생성합니다.

  • 메뉴에서 Database - Forward Engineer를 선택합니다.
    Forward Engineer
  • connection을 선택합니다.
    connection 선택
  • 첫 페이지 Option은 default로 선택합니다.
    Option setting
  • Select Object에 우리가 만든 table 4개가 선택된것을 확인 후 Next를 클릭합니다.
    Select Object
  • 생성된 SQL문을 확인하고, 전체 선택하여 복사(Ctrl+C)합니다.
    Review SQL
  • 메뉴의 홈아이콘을 클릭합니다.
    Home
  • test connection으로 연결합니다.
    database connection
  • 해당 Script를 붙여넣기 한 후, 실행 아이콘을 클릭합니다.
    script 실행
  • 하단 output에 테이블 생성 스크립트 실행 결과가 다음과 같이 나타납니다.
    스크립트 실행 결과
  • SCHEMA 창에서 test schema에 마우스 오른쪽 버튼을 클릭하여 Refresh All을 선택합니다.
    Refresh All
  • 아래와 같이 4개의 table이 만들어 진것을 확인할 수 있습니다.
    table list

이상으로 MySQL의 Workbench를 이용해서 모델링 실습을 해보았습니다.

 

반응형

'Database' 카테고리의 다른 글

Docker로 MySQL 설치하기  (0) 2022.01.15
데이터베이스기초-03.MySQL 모델링 기초 1  (0) 2021.10.28
데이터베이스기초-02.MySQL-Schema, User, Table 생성하기  (0) 2021.10.24
데이터베이스기초-01.MySQL 설치하기  (0) 2021.10.23
반응형

MySQL 모델링 기초

이번시간은 인스타그램으로 모델링을 같이 진행합니다.

 

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

https://youtu.be/nEW9MsmEKF8

 

인스타그램은 아래와 같이 4개의 구성 요소로 이루어져 있습니다.(더 있을 수 있지만 나머지는 생략합니다.)

  • 작가(사용자)
  • 사진
  • 좋아요
  • 댓글

인스타

각 구성요소는 아래와 같이 데이터를 생성하게 됩니다.

  • 1명의 사용자가 여러개의 사진을 올릴 수 있습니다.
  • 1개의 사진에는 여러명이 좋아요를 누를 수 있습니다.
  • 1개의 사진에는 여러명이 댓글을 달 수 있습니다.

인스타 데이터 생성

실제 데이터가 들어가면 다음과 같은 형태가 됩니다.

  • 작가(사용자) 테이블에는 여러명의 사용자가 들어갑니다.
  • 사진 테이블에는 모든 사용자의 사진 정보가 들어갑니다.
  • 사진 테이블에는 사용자 한명의 여러 사진이 들어갑니다.
  • 좋아요에는 사진 아이디와 좋아요를 누른 사람의 아이디가 들어갑니다.
  • 댓글에는 사진 아이디와 댓글을 작성한 사람의 아이디가 들어갑니다.

데이터 예시

위의 정보를 이용하면 아래와 같이 테이블을 만들 수 있습니다.

테이블 설계

다음 시간에는 MySQL Workbench를 이용하여 모델링을 실습해보도록 하겠습니다.

반응형

'Database' 카테고리의 다른 글

Docker로 MySQL 설치하기  (0) 2022.01.15
데이터베이스기초-04.MySQL 모델링 기초 2 - 실습  (0) 2021.10.30
데이터베이스기초-02.MySQL-Schema, User, Table 생성하기  (0) 2021.10.24
데이터베이스기초-01.MySQL 설치하기  (0) 2021.10.23
반응형

Title

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

https://youtu.be/hOOiqk8Z1gQ

MySQL Workbench를 이용하여 가장 기본적인 Schema와 User를 생성하고, User에게 Schema의 권한을 주는법과, Schema에 Table을 생성하는 법을 알아보겠습니다.

우선 이전글에서 설치한 MySQL Workbench를 실행합니다.

MySQL Workbench

root 계정으로 접속

  • MySQL Connections 아래 Local instance MySQL의 root 계정으로 설정되어 있는 부분을 클릭하여 MySQL에 접속합니다. 
    Local Instance root connection

Schema 생성

  • 상단 아이콘 중 Database Icon을 클릭합니다. 
    Create Schema Icon
  • Schema 이름을 입력하고, Apply 버튼을 클릭합니다.
    Create Schema Info
  • 생성될 Schema의 review 화면이 나오면 확인 후 Apply 버튼을 클릭합니다.
    Schema Review
  • 다음창에서 Finish 버튼을 클릭합니다.
    Create Schema Appling

User 생성 및 Schema 권한 주기

  • 좌측 메뉴 중 Administration tab에서 "Users and Privileges"를 선택합니다.
    Left Administration Menu 
  • Add Account 버튼을 클릭합니다.
    Users and Privileges
     
  • Login Name과 Password를 입력한 후 상단 tab 메뉴 중 Schema Privileges를 클릭합니다.
    Input Login Name & Password


  • Schema Privileges에서 Add Entry를 클릭합니다.
    Click Add Entry
  • 앞에 생성한 test Schema에만 권한을 주기 위해 "Selected Schema"를 선택하고, 목록 중 "test"를 선택합니다.
    Select Schema
  • 해당 Schema의 전체 권한을 주기 위해 "Select All"을 클릭하고 "Apply"를 선택합니다.
    Click Select All

Connection 만들기

  • 홈화면으로 돌아와 MySQL Connections 옆의 +버튼을 클릭하여 Connection을 새로 만듭니다.
    New Connection
  • Connection 정보를 입력한 후 Test Connection을 클릭하여 확인합니다.
    Setup New Connection
  • 다음창에서 패스워드를 입력합니다.
    Enter password
  • "Successfully"라는 메시지가 나오면 연결에 성공하신것입니다. OK 버튼을 클릭합니다.
    Successfully connection
  • 다시 Setup 화면으로 돌아오면 OK 버튼을 클릭합니다.
    Setup OK
  • Home 화면에 새로운 Connection이 나타납니다. 그 부분을 클릭하여 접속합니다.
    Connection created
  • 왼쪽 메뉴 하단의 Schema tab을 클릭하면 default schema가 test로 나오는 걸 확인할 수 있습니다.
    default schema

테이블 만들기

  • test schema 아래 Tables에서 마우스 오른쪽버튼을 클릭한 후 "Create Table"을 클릭합니다.
    Create Table

다음과 같이 테이블 정보를 입력합니다.
Table Name : user
Column : id(INT), username(VARCHAR(45)), password(VARCHAR(45))
입력 후 "Apply" 버튼을 클릭합니다.

create table

  • Table script를 확인 후 Apply 버튼을 클릭합니다.
    confirm create table script
  • test schema의 tables를 확장하면 생성한 table을 확인할 수 있습니다.
    table list
  • 테이블명 "user"에서 마우스 오른쪽 버튼을 클릭한 후 "Select Rows - Limit 1000"을 클릭합니다.
    Select Rows
  • 다음과 같이 수행된 쿼리와 결과를 확인할 수 있습니다.

query & result

 

이상으로 MySQL에서 Schema 생성, User 생성과 권한 설정, Table 생성을 해 보았습니다.

반응형

'Database' 카테고리의 다른 글

Docker로 MySQL 설치하기  (0) 2022.01.15
데이터베이스기초-04.MySQL 모델링 기초 2 - 실습  (0) 2021.10.30
데이터베이스기초-03.MySQL 모델링 기초 1  (0) 2021.10.28
데이터베이스기초-01.MySQL 설치하기  (0) 2021.10.23

+ Recent posts

티스토리툴바