Code Gear - AI 개발 유튜브 강의

이 글의 동영상 강좌

https://youtu.be/2RcBDgLMXSc

Parent 프로젝트 만들기

• 이클립스를 실행하고 Spring Starter Project(Spring boot)를 생성합니다.
• File-New-Spring Starter Project

• 생성 내용은 다음과 같습니다.
  • Name : Multi
  • Type : Maven
  • Packaging : Jar
  • Group : com.example
  • Artifact : Multi
  • Package : com.example.multi

• 다음 화면에서 다음 Dependency 들을 선택합니다.(검색창에서 조회하시면 됩니다)
  • Spring Boot DevTools
  • Spring Web
  • Rest Repositories
  • 위 세가지 선택 후 Finish 버튼을 클릭합니다.

• 프로젝트의 root에 있는 pom.xml에 아래와 같이 packaging 태그를 추가합니다.

<groupId>com.example</groupId>
<artifactId>Multi</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>Multi</name>
<description>Demo project for Spring Boot</description>
<packaging>pom</packaging>

• pom.xml을 변경하면 프로젝트에서 아래와 같이 오류 메시지가 나옵니다.

• Maven Update Project를 실행하면 프로젝트의 오류가 없어집니다.

공통모듈 프로젝트 만들기

• 공통 모듈 프로젝트를 다음과 같이 만듭니다.
• 메뉴에서 File - New - Project를 선택합니다.

• 팝업창에서 Maven - Maven Module을 선택합니다.

• New Maven Module 창
  • Create a simple project에 Check합니다.
  • Module Name : MultiCommon 으로 입력합니다.
  • Next 버튼을 클릭합니다.

• 다음 설정창에서 아래와 같이 설정합니다.
  • Name에 MultiCommon을 입력합니다.
  • Finish 버튼을 클릭합니다.

• Parent Project인 Multi의 pom.xml이 다음과 같이 변경된것을 확인할 수 있습니다.

• Common 프로젝트인 MultiCommon의 pom.xml에는 다음과 같이 parent가 설정되어있는것을 확인할 수 있습니다.

Child 프로젝트 만들기

• Child 프로젝트인 MultiProject1을 아래와 같이 생성합니다.
• 메뉴에서 File-New-Spring Starter Project를 선택합니다. 
  • 프로젝트명은 MultiProject1으로 입력합니다.

• 다음 Dependency 창에서 아래와 같이 설정합니다.
  • 이전 프로젝트 생성시에 설정했던 내용이 Frequently Used로 보입니다.
  • 해당 항목들을 check하면 이전과 동일하게 선택할 수 있습니다.

• 동일하게 MultiProject2를 만듭니다.
• 생성이 완료된 프로젝트 폴더 구조는 다음과 같습니다.

• Multi 프로젝트의 pom.xml에 MultiProject1,2를 추가합니다.

• MultiPorject1,2의 pom.xml에 있는 parent 부분을 MultiCommon과 동일하게 수정합니다.

• Mave Update
  • Multi 프로젝트에서 마우스 오른쪽 버튼을 클릭합니다.
  • Maven-Update Project를 선택하여 전체프로젝트를 업데이트 합니다.

프로젝트 생성 및 설정이 완료되었습니다.

다음 글에는 테스트 소스를 만들어 정상적으로 작동이 되는지 확인하겠습니다.

이 강좌의 동영상 강의

https://youtu.be/M242qC2TVSM

Maven Multi Module Porject 개념

• 개발시 여러개의 프로젝트에서 같은 공통모듈을 사용할때가 있습니다.
• 이때 같은 공통 모듈을 두 군데서 만들어서 사용하는 것은 비효율적이고 관리상 문제가 발생하기도 합니다.
• 이럴 경우 공통 모듈을 하나만 만들어 여러개 프로젝트에서 같이 사용할 수 있는 방법을 소개합니다.

공통 모듈을 사용하는 방법

• 공통모듈을 사용할때 흔하게 사용하는 방법이 두 가지 있습니다.
• 첫번째는 공통모듈을 별도의 프로젝트로 만들어 jar로 빌드하여 각각의 프로젝트에 import 하는 방법.
• 두번째는 Maven Module로 프로젝트를 만들어 dependency로 추가하여 사용하는 방법.
• 이 중에 우리는 두번째 방법에 대해 알아봅니다.

프로퍼티 설정 방법 1

• 한 개의 프로퍼티 설정을 사용하여 모두 상속 받는 방법입니다.
• 모든 프로젝트가 동일한 환경일 경우에 사용합니다.

프로퍼티 설정 방법 2

• Child 프로젝트에 각각의 프로퍼티를 설정하는 방법입니다.
• 프로젝트별로 다른 환경일 경우에 사용합니다.

실습 프로젝트의 Naming

• 실습 프로젝트의 Naming은 다음과 같습니다.
• Parent Project : MultiProject
• 공통 모듈 : Multi-Common
• Child 모듈1 : Multi-Sub1
• Child 모듈2 : Multi-Sub2

프로젝트 폴더 구성

• 프로젝트 폴더는 아래와 같이 구성합니다.

다음 포스트에서는 프로젝트를 만들어 보겠습니다.

이 글의 동영상 강의

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

앱을 실행하면 메뉴바의 버튼들이 작동하는 것을 확인 할 수 있습니다.

이 글의 동영상 강의

https://youtu.be/eo16edDyau0

일렉트론의 디폴트 타이틀바를 없애고 새로운 타이틀바를 만드는 방법을 배워봅니다.

fontawesome 설치

• 타이틀바에 들어갈 icon은 fontawesome을 설치하여 사용합니다.
• google에서 fontawesome 검색합니다.

• The iconic font and CSS toolkit 선택합니다.

• Get Started를 선택합니다.

• Font Awesome 4를 선택합니다.

• Download를 선택합니다.
• download 받은 파일을 src/font-awesome에 압축 해제합니다.

일렉트론 애플리케이션 화면 상단에 메뉴바를 만들기

• index.html에 fontawesome css를 추가합니다.

<link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">

• 앞에 google에서 조회한 fontawesome의 Free Icons 사이트로 이동합니다.

• icon 검색 창에서 minimize를 검색합니다.

• window-minimize를 선택합니다.

• 다음과 같이 index.html에 아이콘을 추가합니다.

<button id="min">
  <i class="fa fa-window-minimize"></i> 
</button>

• maximize, close 아이콘도 동일한 방법으로 추가합니다.

<button id="min">
  <i class="fa fa-window-minimize"></i> 
</button>
<button id="max">
  <i class="fa fa-window-maximize"></i> 
</button>
<button id="close">
  <i class="fa fa-window-close"></i> 
</button>

• index.html 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
  </head>
  <body>
    <div class="container">
      <div class="title-bar">
        <div class="title prevent-select draggable">Custom Title Bar</div>
        <div class="control prevent-select">
          <button id="min">
            <i class="fa fa-window-minimize"></i>
          </button>
          <button id="max">
            <i class="fa fa-window-maximize"></i>
          </button>
          <button id="close">
            <i class="fa fa-window-close"></i>
          </button>
        </div>
      </div>
    </div>
  </body> 
</html>

• 일렉트론을 실행합니다.

npm start

• index.css를 다음과 같이 수정합니다.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0px;
}

body *{
  box-sizing: border-box;
}

.container{
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.title{
  height: auto;
  padding: 10px;
  display: inline-block;
}

.control{
  float: right;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 5px;
  margin-right: 5px;
  width: 100px;
}

.control button{
  padding: 5px;
  background: #000000;
  color: #ffffff;
  outline: 0;
  border: 0;
}

.control button:hover{
  background: #444444
}

.title-bar{
  background: #000000;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: #ffffff;
  font-size: 15px;
}

.prevent-select{
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.draggable{
  -webkit-app-region: drag;
}

• 일렉트론을 실행합니다.

npm start

Custom Title Bar의 디자인이 완성되었습니다.

동영상 강의

https://youtu.be/vgic4kn1Oko

Electron 화면은 web 제작 기술과 동일합니다.

따라서 html, css, js만으로 개발이 가능합니다.

이번 시간은 codepen 사이트에서 맘에 드는 디자인을 가져와서 화면 디자인을 바꿔봅니다.

우선 일렉트론 App을 만듭니다.

npx create-electron-app electron-app

VSCode로 프로젝트를 불러옵니다.

code .

codepen.io 사이트로 이동합니다.

• https://codepen.io/

검색창에 "intro" 로 검색합니다.

• 맘에 드는 디자인을 선택해서 click하면 editor 창으로 이동합니다.
• 저는 ScrollMagic Wiki Tutorial을 선택했습니다.
• https://codepen.io/grayghostvisuals/pen/EtdwL

• html 내용을 복사해서 index.html에 붙여 넣습니다.
• css 내용을 복사해서 index.css에 붙여 넣습니다.
• src/function.js 파일을 만듭니다.
• js 내용을 복사해서 function.js에 붙여 넣습니다.
• index.html </body>위에 <srcript src='function.js'></script>를 추가합니다.
• yarn start 를 실행합니다.

간단하게 일렉트론 화면을 만들어 봤습니다.

이렇게 codepen을 이용하면 디자이너 없이 약간의 수정만으로 일렉트론 개발이 가능합니다.