Code Gear - AI 개발 유튜브 강의

이글의 동영상 강의

https://youtu.be/u5dwJv6jxWg

NodeJS는 쉽게 설치할 수 있습니다.

설치하기

• https://nodejs.org/ko/download/ 사이트로 이동합니다.

• 자신의 OS에 맞게 선택합니다.
• LTS와 현재버전 둘 중에 하나를 선택하여 다운로드 받을 수 있습니다.
• 우리는 LTS(Long Term Support, 장기 지원) 버전을 선택합니다.
• NPM도 같이 설치가 됩니다.

• 다운로드된 파일을 실행합니다.
• Next를 클릭합니다.

• 라이선스 동의합니다.
  Next를 클릭합니다.

• 설치 위치를 지정합니다.
• 디폴트로 설치를 진행 합니다.
  Next를 클릭합니다.

• Custom Setup을 설정합니다.
• 디폴트로 진행합니다.
  Next를 클릭합니다.

• Tools for Native Module 설치 화면입니다.
• 체크박스를 클릭해서 체크해주고, Next를 클릭합니다.
  필요한 tool들을 설치하겠다는 뜻입니다.
  

  

• Ready to Install Node.js
• 설치 준비가 완료되었습니다.
  Install을 누릅니다.

• 설치가 진행됩니다.

• 설치가 완료되었습니다.

• 추가 Tool들을 설치하는 화면입니다. 아무키나 누릅니다.

설치 확인하기

• cmd를 실행합니다.(windows key 옆 검색창에서 cmd로 검색)
• node -v를 실행합니다.
• 같이설치된 npm -v를 실행합니다.

Nodejs 설치가 완료되었습니다.

수고하셨습니다.

이글의 동영상 강의

https://youtu.be/1iaSSvS64Sw

Nodejs는 Javascript Runtime 플랫폼입니다.

크롬 브라우저의 기반이 된 V8 자바스크립트 엔진으로 빌드되었습니다. 이 말은 V8 엔진의 탄생으로 말미암아 Nodejs가 나오게 되었다는 뜻이기도 합니다.

그렇다면 기존에도 사용하고 있었던 Javascript에 비해 Nodejs는 뭐가 좋은걸까요?

Nodejs의 핵심적인 장점 3가지는 아래와 같습니다.

1. Nodejs는 브라우저 없이도 실행이 가능합니다.

• Javascript는 브라우저에서만 실행이 가능했었습니다.
• 하지만 Nodejs가 나오면서 브라우저를 벗어나 단독으로 실행이 가능해졌습니다.
• 이로인해 Backend 서버의 개발이 가능해졌습니다.
• 현재는 서버개발에서 가장 많이 사용하는 언어 중 하나가 되었습니다.

출처 : https://www.similartech.com/technologies/nodejs

• Nodejs는 서버에서 고성능 IO처리를 위해 만들어졌기 때문에 속도가 빠릅니다.
  아래는 nodejs를 사용하는 website들입니다.
  이중 twitter.com은 traffic rank가 5위로 트래필이 많은 사이트인데도 불구하고,
  nodejs를 사용하여 원할하게 서비스를 하고 있습니다.

2. Nodejs는 Javascript로 만들어졌습니다.

• 요즘 가장 핫한 언어는 누가 뭐래도 Javascript입니다.
• Frontend 개발에서 Javascript를 빼놓을 수 없습니다.
• Angular, React, Vue등이 대표적인 Javascript 기반의 프레임워크입니다.
• 이제 Nodejs를 사용하면 javascript로 Frontend와 Backend 모두를 개발할 수 있습니다.
• 한 가지 언어로 양쪽 개발이 모두 가능하다는 것은 엄청난 메리트입니다.

3. Nodejs는 NPM 오픈소스를 사용합니다.

• NPM은 노드패키지매니저(Node Package Manager)입니다.
• Node 기반으로 패키지를 만들어 https://www.npmjs.com/에 배포할 수 있습니다.
• 이는 엄청난 크기의 오픈 소스 생태계를 만들었습니다.
• 이 라이브러리들을 이용해 빠르게 개발을 할 수 있게 되었습니다.
• 또한 사용이 편리한 이 컴퍼넌트들은 무료로 이용할 수 있습니다.

결론

Nodejs를 이용하면 javascript로 backend+frontend를 모두 개발할 수 있으며, 다양한 패키지들을 무료로 사용할 수 있습니다. 또한 처리속도도 빠르기 때문에 Enterprise 환경에서도 많이 사용되고 있습니다.

그리고, 다른 언어들에 비해 훨씬 적은 코드로 프로그램을 완성할 수 있습니다.

앞으로 한 동안은 nodejs를 많이 사용할 것 같습니다.

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

https://youtu.be/0YsMEPxi_wc

GIT 개념

여러곳에서 다른 컴퓨터로 개발을 하다보면 서로 소스가 맞지 않은 상황이 발생합니다.

이때 GIT을 사용하면 소스를 여러곳에서 동기화 시킬수가 있습니다.

여러사람이 동일한 프로젝트를 개발할 때도 Git을 통해 이런 문제를 해결할 수 있습니다.

github 초보자도 쉽게 사용할 수 있는 github desktop의 사용법을 알아보겠습니다.

Github 가입

우선 Git을 사용하시려면 아래 github 사이트에 가입을 해야합니다.

https://github.com/

회원 로그인 후 Repository를 만들기 위해 Your repositories로 이동합니다.

New 버튼을 클릭하고 새로운 Repository를 만듭니다.

Repository 이름 "test"로 입력하고 하단의 "Create Repository" 버튼을 클릭합니다.

아래와 같이 test repository가 만들어졌습니다.

Github Desktop 설치

아래 사이트에서 github desktop을 download 합니다.

https://desktop.github.com/

다운로드 버튼을 클릭합니다.

설치가 완료되면 아래와 같이 github desktop이 실행됩니다.

소스 clone

github.com의 repository에서 code 버튼을 클릭

clone에서 url을 copy합니다.

github desktop에서 add 버튼을 클릭하고 clone repository를 선택합니다.

URL 탭을 클릭하고, github.com에서 복사한 주소를 붙여넣기 한 후, clone 버튼을 클릭합니다.

이때 local path 변경도 가능합니다.

test repository가 로컬에 clone 되었습니다.

소스를 수정하고 commit 하고 push하기

Open in Visual Studio Code를 선택하면 VSCode가 실행됩니다.

README.md 파일을 수정하고 저장합니다.

github desktop에 가시면 변경된 파일이 아래와 같이 표시됩니다.

중간에 변경내용 요약해서 작성해 주시고 ("update README.md"),

아래 commit 버튼을 클릭합니다.

push origin을 클릭하시면 서버에 소스가 upload 됩니다.

github.com에 가시면 변경된 내용을 확인 할 수 있습니다.

변경 소스 받기

이번에는 다른쪽에서 소스가 수정되었을 경우 테스트를 진행합니다.

github.com에서 파일을 하나 추가하기 위해 Add file 버튼을 클릭합니다.

파일 내용을 입력 후 Commit 버튼을 클릭합니다.

test.txt 파일이 생성된 것을 확인할 수 있습니다.

github desktop에서 fetch origin을 선택합니다.

1개의 파일이 commit 되었음을 표시해줍니다. Pull origin 버튼을 클릭해서 소스를 pull(땡겨옴) 합니다.

VSCode를 열면 새로 추가된 test.txt 파일을 확인할 수 있습니다.

이상으로 github desktop의 기본적인 사용법을 알아보았습니다.

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

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

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

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

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

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

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

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

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

• App.js에서 다음 코드를

<p> Edit <code>src/App.js</code> and save to reload. </p>

• 아래 코드로 변경합니다.

<p> Hello! World. </p>

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

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

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

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

수고하셨습니다.

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