Code Gear - AI 개발 유튜브 강의

nodejs와 mysql을 연동하는 법을 알아보겠습니다.

이글의 동영상 강의는 아래 링크를 클릭해주세요.

https://youtu.be/QssKt2efX40

MySQL Data 준비

• Dababase 정보는 다음과 같습니다.
  • Schema : test
  • 사용자명 : test
  • 패스워드 : test
  • 테이블명 : user
• 생성 쿼리는 다음과 같습니다.

# 스키마 생성
CREATE SCHEMA test;

# 사용자 생성 및 권한 추가
CREATE USER 'test'@'localhost' identified with mysql_native_password by 'test';
GRANT ALL PRIVILEGES ON test.* TO 'test'@'localhost';
flush privileges;

# 테이블 생성
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', '스파이더맨');

MySQL 설치와 스키마, 사용자, 테이블 생성은 아래 글을 참고하세요.

• mysql 설치 : MySQL 설치하기

• 테이블 생성 : MySQL-Schema, User, Table 생성하기

• workbench를 실행하고 다음 쿼리를 실행합니다.

select * from user;

• 실행 결과는 다음과 같습니다.

Nodejs 프로젝트 만들기

• 프로젝트 폴더를 생성합니다.

• VSCode를 실행하고 메뉴-폴더열기에서 프로젝트 폴더를 선택합니다.

• 메뉴-터미널을 실행하고 다음 명령을 실행합니다.

npm init -y

MySQL 패키지 설치

• www.npmjs.com에서 mysql을 검색합니다.

• 검색된 결과중 mysql exact match를 선택합니다.
• 설치 방법과 사용법을 확인합니다.

• npm i mysql을 실행합니다.

NodeJS + MySQL 연동 하기

• index.js 파일을 만들고 다음 indroduction의 내용을 복사하여 붙여넣습니다.

var mysql      = require('mysql');
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);
});
 
connection.end();

• 터미널에서 다음 명령으로 프로젝트를 실행합니다.

node index

• 실행 결과는 다음과 같습니다.

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

https://youtu.be/sD7-xrF7XR4

A프로젝트는 노드 버전 12.13.0을 사용한다.
B프로젝트는 노드 버전 16.13.0을 사용한다.

즉, NodeJS 버전을 바꿔가면서 작업을 해야 하는 상황이 생기는 것입니다.

프로젝트를 변경할 때마다 NodeJS를 매번 새롭게 설치하기는 어렵습니다.

이때 NodeJS 버전을 쉽게 변경할 수 있는 툴이 NVM입니다.

NVM 설치하기

검색 사이트에서 NVM 또는 NVM windows를 검색하여 설치합니다.

https://github.com/coreybutler/nvm-windows

설치가 완료되면 cmd 또는 powershell에서 다음 명령을 실행할 수 있습니다.

• 설치된 NodeJS 목록 확인하기

nvm ls

• nvm install을 사용해서 새로운 버전의 NodeJS 추가할 수 있습니다.
  nvm install {버전번호} (nodejs의 특정 버전 설치)
  nvm install latest (최신버전의 nodejs 설치)
  nvm install lts (nodejs LTS 버전 설치)

nvm install 12.13.0
nvm install 16.13.0
nvm install latest
nvm install lts

• NodeJS 버전 변경하기

nvm use 12.13.0

윈도우용 NVM 오류 해결 방법

윈도우용 NVM을 사용하면 "Exit 5..." 라는 오류가 종종 나옵니다.

이때 cmd나 파워쉘을 관리자 권한으로 실행해서 nvm use를 사용하시면 됩니다.

그래도 안될때는 다음 방법을 사용하면 오류를 해결하실 수 있습니다.

• NVM 위치 변경하기

nvm root D:\nodejs-root\nvm

• NVM 기본 설치 위치에서 다음 파일들을 복사해서 새로운 NVM 폴더에 넣어줍니다.
  기본 설치 위치 = C:\사용자\{사용자ID}\AppData\Roaming\nvm

elevate.cmd
elevate.vbs

• CMD 또는 PowerShell을 관리자 권한으로 실행하고, nvm을 사용합니다.

nvm use 12.13.0

NVM을 사용하면 NodeJS의 버전을 손쉽게 변경하여 사용할 수 있습니다.

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

https://youtu.be/oHXHOzg9oxQ

이 글은 module에 대해 잘 정리되어 있는 아래 사이트를 참고해서 작성되었습니다.

nodejs의 module은 굉장히 중요한 개념입니다.

개발시에 module을 모르면 개발이 불가능하므로, 개념을 잘 이해하여야 합니다.

nodejs는 모듈 단위로 기능을 분리할 수 있습니다.

또한 분리된 기능을 조립하여 사용이 가능합니다.

nodejs module의 특징

nodejs의 module은

• 업계표준인 CommonJS의 module 방식을 따르고 있습니다.
• 파일과 1:1 대응 관계를 갖습니다.
• 별도 scope을 갖기 때문에 전역 변수의 중복이 발생하지 않습니다.
• module.exports 또는 exports를 통해 외부로 공개할 수 있습니다.
• module.exports = exports 와 동일합니다.
• require를 사용하여 외부에서 module을 사용 할 수 있습니다.
• 변수(variable), 객체(object), 함수(function), 폴더(folder)를 module로 만들 수 있습니다.

변수를 사용한 예제

• constants.js

module.exports = { 
    SEND_MAIN_PING: 'send_main_ping', 
};

• index.js

const { SEND_MAIN_PING } =require('./constants')

console.log(SEND_MAIN_PING);

함수를 사용한 예제

• sum.js

var sum = function(a,b){
    return a + ' + ' + b + ' = ' + a+b;
}

module.exports = sum;

• index.js

const sum = require('./sum');

console.log(sum(1,10));

폴더를 사용한 예제

• 폴더 구조는 다음과 같습니다.

• module/index.js

module.exports = {
    sum: require('./sum'),
    minus: require('./minus')
}

• index.js

const myModule = require('./module');

console.log(myModule.sum(1,10));

Core Module

nodejs에 기본적으로 포함되어 있는 module을 core module이라고 합니다.

core module은 require를 이용해 바로 사용할 수 있습니다.

const http = require('http');

외부 Module (NPM)

nodejs는 npm으로 설치한 외부 모듈을 사용할 수 있습니다.

따라서 npmjs.com에 배포되어 있는 모든 모듈을 자유롭게 이용할 수 있다는 장점이 있습니다.

• npmjs.com에서 검색
  다음은 npmjs.com에서 nodejs의 서버 개발을 쉽게 해주는 express를 검색한 내용입니다.
  붉은색 박스에 보시면 설치법이 나와 있습니다.

• npm으로 설치한 모듈도 동일하게 require를 통해 사용할 수 있습니다.

const express= require('express');

이상으로 nodejs의 module 사용법에 대해 알아보았습니다.

이 글의 동영상 강의

https://youtu.be/ZKSEA7DZ5x8

Nodejs를 설치하고 나면,
Nodejs를 실행할 수 있는 여러가지 방법이 있습니다.

1. Command Line에서 실행하기

2. Browser 개발자 도구에서 실행하기

3. 파일을 만들어 실행하기

하나씩 실행하는 법을 알아보겠습니다.

1. Command Line에서 실행하기

• 윈도우 검색창에 CMD를 입력하고 실행합니다.

• 명령프롬프트에서 node를 입력 후 실행(Enter)합니다.

• 다음 내용을 입력합니다.

var msg = "Hello World!!!"
console.log(msg)

• 실행 결과는 다음과 같습니다.

2. Browser 개발자 도구에서 실행하기

• 크롬브라우저를 실행합니다.
• F12키를 눌러 개발자 도구를 실행합니다.
• 콘솔 탭을 클릭하고 다음 내용을 입력합니다.

var msg = "Hello World!!!"
console.log(msg)

• 실행 결과는 다음과 같습니다.

3. Javascript 파일을 만들어 실행하기

• 앞에서 설명한 2가지 방법은 간단한 입력은 가능하지만, 복잡한 프로그램은 구현하기 어렵습니다.
• Nodejs로 제대로 된 프로그램을 만들려면 Javascript 파일을 만들어 실행해야 합니다.
• 편집기를 이용해 test.js 파일을 만듭니다. 저는 Visual Studio Code(VSCode)를 이용했습니다.
• test.js에 다음 내용을 입력합니다.

function plus(a,b) {
    return a + b;
}

function minus(a,b) {
    return a - b;
}

console.log(plus(2,3));
console.log(minus(10,6));

• VSCode의 메뉴에서 터미널-새터미널을 실행합니다.
• node test를 입력하고 실행합니다.
• 실행 결과는 다음과 같습니다.

이상으로 Nodejs를 실행하는 방법 3가지를 알아보았습니다.

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

https://youtu.be/ytB0vOdZaJc

이전 12번 강좌에 이어서 진행합니다.

이번 강좌는 일렉트론과 React로 만들어진 프로젝트에서 IPC 통신을 하는 코드를 만들어봅니다.

실무 프로그램에서 사용되는 중요한 항목입니다.

기존 소스 클론하기

우선 이전 강좌에서 만든 Electron과React를 결합하여 한번에 실행하는 프로젝트의 소스를 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

• github 사이트의 repository에서 react-electron의 code를 클릭하여 URL을 Copy합니다.

• 로컬 workspace 폴더에서 git clone 실행합니다.
  프로젝트명은 "electron-react-ipc"로 합니다.
  Visual Studio Code를 실행해 프로젝트를 만들 상위폴더를 엽니다.
  터미널에 아래 명령을 실행합니다.

git clone https://github.com/CodeGearGit/react-electron.git react-electron-ipc

• 프로젝트의 패키지들을 설치합니다.

npm install

• 프로젝트를 실행합니다.

npm start

• 오류없이 실행이 완료되면 아래와 같은 화면이 나옵니다.

IPC 통신하기

일렉트론과 리액트간의 IPC 통신을 위한 코드를 작성합니다.

• 일렉트론 소스와 리액트에서 동일한 코드를 사용하기 위해 상수를 정의합니다.
  src/constants.js를 추가하고 다음 코드를 추가합니다.

module.exports = { 
    SEND_MAIN_PING: 'send_main_ping', 
};

• 일렉트론에서 요청을 받는 코드를 추가합니다.
  src/main.js를 아래와 같이 수정합니다.
  1. ipcMain 선언
  2. 상수 정의 추가
  3. ipc callback function의 코드 추가 - ipcMain.on

const { app, BrowserWindow, ipcMain } = require('electron')  
const path = require('path')  
const { 
  SEND_MAIN_PING 
} = require('./constants'); 
function createWindow () {  
  const win = new BrowserWindow({  
    width: 800,  
    height: 600,  
    webPreferences: {  
      nodeIntegration: true, 
      contextIsolation : false, 
    }  
  })  
  win.loadURL("http://localhost:3000") 
}  
ipcMain.on(SEND_MAIN_PING, (event, arg)=>{ 
  console.log('Main received a ping!!!'); 
}) 
app.whenReady().then(() => {  
  createWindow()  
})  
app.on('window-all-closed', function () {  
  if (process.platform !== 'darwin') app.quit()  
})

• 리액트에서 ipc send 코드를 추가합니다.
  1. constants 추가
  2. ipcRenderer 추가
  3. ipc send function 추가
  4. ipc send function을 호출하는 버튼 추가

import logo from './logo.svg'; 
import './App.css'; 
import { SEND_MAIN_PING } from './constants'; 
function App() { 
  const { ipcRenderer } = window.require("electron"); 
  const sendMail = () => { 
    ipcRenderer.send(SEND_MAIN_PING, 'send'); 
  } 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <img src={logo} className="App-logo" alt="logo" /> 
        <p> 
          Hello world!!! 
        </p> 
        <a 
          className="App-link" 
          href="https://reactjs.org" 
          target="_blank" 
          rel="noopener noreferrer" 
        > 
          Learn React 
        </a> 
        <button onClick={ sendMail }>Send Mail</button> 
      </header> 
    </div> 
  ); 
} 
export default App;

• 프로그램을 실행합니다.

npm start

• 화면에서 버튼을 클릭합니다.
  터미널 창에서 ipc callback function의 로그를 확인합니다.

이상으로 react+electron 프로젝트에서 IPC 통신하는 법을 알아보았습니다.

소스코드는 다음에서 확인하실 수 있습니다.

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