반응형

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

반응형
반응형

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를 이용해서 모델링 실습을 해보았습니다.

 

반응형
반응형

MySQL 모델링 기초

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

 

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

https://youtu.be/nEW9MsmEKF8

 

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

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

인스타

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

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

인스타 데이터 생성

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

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

데이터 예시

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

테이블 설계

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

반응형
반응형

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 생성을 해 보았습니다.

반응형
반응형

Windows에 MySQL을 설치하는 방법입니다.

 

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

https://youtu.be/yZtub4AbbAo

 

mysql download

  • 구글에서 mysql download for windows로 검색합니다.

google 검색

  • 검색 결과창에서 "Download MySQL Community Server"를 선택합니다.
    download mysql
     
  • 다운로드 페이지에서 "Go to Download Page" 버튼을 클릭합니다.
  • "Download" 버튼을 클릭합니다.
    Installer Download
  • 로그인 창에서 "No Thanks, just start my download."를 클릭합니다.
  • download 된 파일을 클릭하시면 설치가 시작 됩니다.
    \Installer start
  • "Developer Default" 선택 후 "Next" 버튼을 클릭합니다.
    Setup Type 선택
  • Visual Studio Library 설치가 필요합니다. 설치가 안되어 있다면 설치 안내에 따라 진행하면 됩니다.
    Visual Studio Library 설치
  • Download 화면에서 "Excute"를 클릭합니다.
    Download
  • 다운로드가 진행됩니다.
    Status에 Error가 나올 경우 옆의 "Try again"을 클릭하여 다시 다운로드를 진행합니다.
    downloading
  • Download 완료 후 "Next" 버튼을 클릭하면 Install이 진행됩니다.
    Installation
  • Install이 완료되면 "Next" 버튼을 클릭하고 포트를 설정합니다.
    내용 변경없이 default로 설치하면 됩니다.
    port 설정
  • root 계정의 패스워드를 입력합니다.
    root password 입력
  • Windows Service 명을 확인합니다.
    변경없이 그대로 사용하면 됩니다.
    Windows Service Name
  • 다음화면에서는 환경 설정 내용이 적용됩니다.
    Apply Configuration
  • "Finish" 버튼을 클릭합니다.
    Router Configuration
  • Connect To Server에서 root password를 입력하고 "Next" 버튼을 클릭합니다.
    Connect to Server
  • 설치가 완료되고 MySQL Workbench가 실행됩니다.
    "Local instance MySQL57"을 클릭합니다.
    Workbench


  • 패스워드를 입력하고 "OK" 버튼을 클릭합니다.
    password 입력
  • Local instance에 접속이 되면 다음과 같이 화면이 나타납니다.
    Local instance 접속

    이상으로 MySQL 설치 및 Workbench 접속까지 진행을 해봤습니다.
반응형
반응형

이 글의 동영상 강의입니다.
https://youtu.be/7mpiKHkkVD4

 

JSON 기초 이론과 실습

 
요즘 가장 많이 사용하는 Data Type인 JSON에 대해 알아보고 실습을 진행합니다.
* 이 문서는 Mozilla의 MDN 사이트의 내용을 참고하여 작성하였습니다.
  https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
 

JSON은 JavaScript Object Notation 의 약어입니다.

JSON의 특징

  • JSON은 문자열 형태로 만들어집니다.
  • 따라서 네트워크로 전송할 때 유용합니다. (객체 직렬화가 가능하기 때문)
  • JSON의 데이터에 Access하기 위해서는 문자열 형태를 JSON 객체로 변환해야 합니다.
  • Javascript에서는 기본적으로 JSON과 문자열의 상호 변환을 지원합니다.

JSON의 구조

  • JSON은 {} 로 감싸여 있는 구조를 갖고 있습니다.
  • 내부 데이터는 "Key : Value"의 형태로 구성되어 있습니다.
  • Key는 "name"로 만들어진 문자열을 사용함. 예) "id", "password"등
  • Value는 Javascript의 type 즉, 문자열, 숫자, 배열, Boolean등을 사용할 수 있습니다.
  • 아래는 예제 프로그램에서 사용할 샘플 JSON입니다.
{ 
  "squadName": "Super hero squad", 
  "homeTown": "Metro City", 
  "formed": 2016, 
  "secretBase": "Super tower", 
  "active": true, 
  "members": [ 
    { 
      "name": "Molecule Man", 
      "age": 29, 
      "secretIdentity": "Dan Jukes", 
      "powers": [ 
        "Radiation resistance", 
        "Turning tiny", 
        "Radiation blast" 
      ] 
    }, 
    { 
      "name": "Madame Uppercut", 
      "age": 39, 
      "secretIdentity": "Jane Wilson", 
      "powers": [ 
        "Million tonne punch", 
        "Damage resistance", 
        "Superhuman reflexes" 
      ] 
    }, 
    { 
      "name": "Eternal Flame", 
      "age": 1000000, 
      "secretIdentity": "Unknown", 
      "powers": [ 
        "Immortality", 
        "Heat Immunity", 
        "Inferno", 
        "Teleportation", 
        "Interdimensional travel" 
      ] 
    } 
  ] 
}

JSON Data에 접근하는 방법

  • Javascript에서는 아래와 같이 JSON 객체로 선언하면 사용이 가능합니다.
    (실무에서는 RESTAPI등을 호출하여 JSON 데이터를 가져오는 형태로 많이 사용합니다.)
const superHeroes = { 
      "squadName" : "Super hero squad",
      ...
}
  • 위 JSON을 다음과 같이 호출하여 사용합니다.
superHeroes.homeTown 
superHeroes['active']
  • 배열일 경우에는 "[index]"의 형식으로 사용 가능합니다.
    (index로 사용하는 숫자는 첫 번째가 0부터 시작됩니다)
superHeroes['members'][1]['powers'][2]

 

실습

프로젝트 생성 및 코드 작성

  • hero라는 이름의 폴더를 생성합니다.
mkdir hero
cd hero
  • VSCode에서 폴더를 오픈합니다.
  • 아래와 같이 index.html을 만듭니다.
<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>Our superheroes</title> 
    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css"> 
  </head> 
  <body> 
      <header> 
      </header> 
      <section> 
      </section> 
    <script> 
    const header = document.querySelector('header'); 
    const section = document.querySelector('section'); 
    </script> 
  </body> 
</html>
  • 아래와 같이 style.css를 만듭니다.
/* || general styles */ 
html { 
  font-family: 'helvetica neue', helvetica, arial, sans-serif; 
} 
body { 
  width: 800px; 
  margin: 0 auto; 
} 
h1, h2 { 
  font-family: 'Faster One', cursive; 
} 
/* header styles */ 
h1 { 
  font-size: 4rem; 
  text-align: center; 
} 
header p { 
  font-size: 1.3rem; 
  font-weight: bold; 
  text-align: center; 
} 
/* section styles */ 
section article { 
  width: 33%; 
  float: left; 
} 
section p { 
  margin: 5px 0; 
} 
section ul { 
  margin-top: 0; 
} 
h2 { 
  font-size: 2.5rem; 
  letter-spacing: -5px; 
  margin-bottom: 10px; 
}

프로젝트 실행

  • 우리는 프로그램 실행을 편하게 하기 위해서 VSCode의 확장 프로그램인 Live Server를 사용합니다.
    • VSCode의 extention에서 Live Server를 검색하여 설치합니다.
VSCode Extention LIve Server
  • VSCode의 탐색기에 index.html을 마우스를 우클릭하여 LIve Server를 실행합니다.
  • 브라우저가 실행되며 아래와 같이 실행됩니다.
Live Server Run
  • Live Server가 잘 작동하는지 확인하기 위해 아래와 같이 index.html의 header를 수정합니다.
<header>
    <h1>Heroes!!!</h1>
</header>
  • 다시 브라우저를 확인합니다.
    • 아래와 같이 Title이 나오면 정상입니다.
Live Server Test

JSON Data 가져오기

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json'; 
request.send();
  • Response가 왔을때 처리하는 코드를 아래와 같이 작성합니다.
request.onload = function() { 
  var superHeroes = request.response; 
  populateHeader(superHeroes); 
  showHeroes(superHeroes); 
}
  • 위의 populateHeader function의 Code를 아래와 같이 작성합니다.
function populateHeader(jsonObj) { 
  var myH1 = document.createElement('h1'); 
  myH1.textContent = jsonObj['squadName']; 
  header.appendChild(myH1); 
  var myPara = document.createElement('p'); 
  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; 
  header.appendChild(myPara); 
}
  • 위의showHeroes function의 Code를 아래와 같이 작성합니다.
function showHeroes(jsonObj) { 
  var heroes = jsonObj['members']; 
  for (var i = 0; i < heroes.length; i++) { 
    var myArticle = document.createElement('article'); 
    var myH2 = document.createElement('h2'); 
    var myPara1 = document.createElement('p'); 
    var myPara2 = document.createElement('p'); 
    var myPara3 = document.createElement('p'); 
    var myList = document.createElement('ul'); 
    myH2.textContent = heroes[i].name; 
    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; 
    myPara2.textContent = 'Age: ' + heroes[i].age; 
    myPara3.textContent = 'Superpowers:'; 
    var superPowers = heroes[i].powers; 
    for (var j = 0; j < superPowers.length; j++) { 
      var listItem = document.createElement('li'); 
      listItem.textContent = superPowers[j]; 
      myList.appendChild(listItem); 
    } 
    myArticle.appendChild(myH2); 
    myArticle.appendChild(myPara1); 
    myArticle.appendChild(myPara2); 
    myArticle.appendChild(myPara3); 
    myArticle.appendChild(myList); 
    section.appendChild(myArticle); 
  } 
}
  • index.html의 최종 소스는 아래와 같습니다.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Our superheroes</title>
    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
    </header>
    <section>
    </section>

    <script>
      const header = document.querySelector('header');
      const section = document.querySelector('section');

      let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
      let request = new XMLHttpRequest();
      request.open('GET', requestURL);
      request.responseType = 'json';
      request.send();

      request.onload = function() {
        const superHeroes = request.response;
        populateHeader(superHeroes);
        showHeroes(superHeroes);
      }

      function populateHeader(obj) {
        const myH1 = document.createElement('h1');
        myH1.textContent = obj['squadName'];
        header.appendChild(myH1);

        const myPara = document.createElement('p');
        myPara.textContent = 'Hometown: ' + obj['homeTown'] + ' // Formed: ' + obj['formed'];
        header.appendChild(myPara);
      }

      function showHeroes(obj) {
        const heroes = obj['members'];

        for(let i = 0; i < heroes.length; i++) {
          const myArticle = document.createElement('article');
          const myH2 = document.createElement('h2');
          const myPara1 = document.createElement('p');
          const myPara2 = document.createElement('p');
          const myPara3 = document.createElement('p');
          const myList = document.createElement('ul');

          myH2.textContent = heroes[i].name;
          myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
          myPara2.textContent = 'Age: ' + heroes[i].age;
          myPara3.textContent = 'Superpowers:';

          const superPowers = heroes[i].powers;
          for(let j = 0; j < superPowers.length; j++) {
            const listItem = document.createElement('li');
            listItem.textContent = superPowers[j];
            myList.appendChild(listItem);
          }

          myArticle.appendChild(myH2);
          myArticle.appendChild(myPara1);
          myArticle.appendChild(myPara2);
          myArticle.appendChild(myPara3);
          myArticle.appendChild(myList);

          section.appendChild(myArticle);
        }
      }
    </script>
  </body>
</html>

 

최종 실행 화면

  • 문제 없이 실행 되었을 경우 아래와 같은 화면을 보실 수 있습니다.
최종 화면

 
이상으로 JSON에 대해서 알아보고 간단한 실습을 수행하여 보았습니다.
JSON은 어려운 문법이 아니고 많이 사용하고 있습니다.
사용법을 잘 익혀 두시면 프로그램 개발시 많은 도움이 될것입니다.

반응형

'자바스크립트' 카테고리의 다른 글

Javascript 기초 문법  (0) 2021.12.12
반응형

이 글의 동영상 강의

https://youtu.be/_KMmhsVPbk0

완성 화면

  • 아래와 같이 사이드 메뉴가 추가된 화면을 만들어보도록 하겠습니다.

완성 화면

사이드 메뉴 추가하기

이전 시간에 진행했던 타이틀바 프로젝트로 계속 진행합니다.

 

Side Sliding Menu CSS

CSS Sliding menu with scroll, no JS were used...

codepen.io

 

Side Sliding Menu CSS

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

  • codepen의 html에서 <nav></nav> 부분을 복사해서, index.html의 </container>뒤에 붙여넣습니다.
  • codepen의 css를 전체 복사해 src/css/menu.css를 만들고 붙여 넣습니다.
  • index.css의 body를 제외한 나머지 부분을 src/css/menu.css에 붙여 넣습니다.
  • 아래와 같이 src/css/menu.css를 수정합니다.
.title{
  height: auto;
  padding: 20px;
  display: inline-block;
}
...
@import url(../font-awesome-4.7.0/css/font-awesome.css);
...
  • 프로젝트를 실행합니다.
npm start
  • 실행화면에서 타이틀바의 높이를 확인합니다.
    • DevTools의 선택도구를 이용

  • title-bar이 높이와 동일하게 side-bar의 위치를 맞춥니다.
.main-menu {
    position: absolute;
    margin-top: 58px;
    ...
  • 완료된 화면은 다음과 같습니다.

사이드바 추가화면

반응형
반응형

이 글의 동영상 강의

https://youtu.be/YmvtzYgE184

 

이번 글은 이전 글에서 만든 프로젝트에 프로그램을 만들어 테스트해봅니다.

Rest API 작성

  • MultiProject1 프로젝트에 SampleRest를 생성
    • 패키지 : com.example.multi.rest
    • 클래스명 : SampleRest
  • SampleRest에 다음 코드를 입력합니다.
package com.example.multi.rest;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class SampleRest {
	@GetMapping("/msg")
	public ResponseEntity<String> getMessage(){
		return new ResponseEntity<String>("TestOK!", HttpStatus.OK);
	}
}

Boot Dashboard 실행

  • 메뉴에서 Window-Show View-Other를 선택합니다.

Window-Show View-Other

  • 검색창에 "boot"를 입력하고, 아래 Boot Dashboard를 더블클릭합니다.

Boot Dashboard 메뉴선택

  • Boot Dashboard에서 MultiProject1을 클릭하여 선택합니다.
  • 상단의 Start Button을 클릭해서 서버를 Start 시킵니다.
    Boot Dashboard Server Start
  • 정상적으로 Start 되면 Console 창에 아래와 같은 로그가 나옵니다.
    • Tomcat이 8080 포트로 Start 된 것을 확인할 수 있습니다.

Console 로그

  • 브라우저를 열고 SampleRest에서 만든 주소를 입력합니다.
http://localhost:8080/api/msg

Rest 호출

  • Rest API 테스트가 완료되었습니다.

 

공통 Class 생성

  • MultiCommon 프로젝트에 CommonService class 생성
    • 패키지 : com.example.multi.service
    • 클래스명 : CommonService
  • CommonService에 다음 코드를 입력합니다.
package com.example.multi.service;

public class CommonService {
	public String getMessage(String msg) {
		return "This is a " + msg;
	}
}

 

공통 Class를 Child 프로젝트에서 사용하기

  • 공통 모듈을 참조하기 위해서는 Child 프로젝트에 공통모듈의 dependency를 추가해야 합니다.
  • MultiPorject1의 pom.xml에 아래와 같이 dependency를 추가합니다.
    • MultiCommon의 pom.xml에 있는 값으 복사해서 넣어주면 됩니다.
<dependency>
	<groupId>com.example</groupId>
    <artifactId>MultiCommon</artifactId>
</dependency

version missing

  • MultiCommon의 version이 없다는 오류 메시지가 나오면 version을 추가합니다.
    • MultiCommon의 pom.xml에 version을 추가합니다.
<parent>
  <groupId>com.example</groupId>
  <artifactId>Multi</artifactId>
  <version>0.0.1-SNAPSHOT</version>
</parent>
<artifactId>MultiCommon</artifactId>
<name>MultiCommon</name>
<version>0.1</version>
  • MultiProject1의 pom.xml에 version을 추가합니다.
<dependency>
  <groupId>com.example</groupId>
  <artifactId>MultiCommon</artifactId>
  <version>0.1</version>
</dependency>
  • Maven Update를 실행합니다.
  • MultiProject1의 SampleRest에서 MultiCommon의 CommonService 모듈을 호출하는 코드를 작성합니다.
    • SampleRest 코드를 아래와 같이 수정합니다.
package com.example.multi.rest;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.multi.service.CommonService;

@RestController
@RequestMapping("/api")
public class SampleRest {
	@GetMapping("/msg")
	public ResponseEntity<String> getMessage(){
		CommonService commonService = new CommonService();
		String msg = commonService.getMessage("TestOK!");
		return new ResponseEntity<String>(msg, HttpStatus.OK);
	}
}
  • MultiProject1 프로젝트를 클릭하여 선택하고 상단 실행 버튼으로 프로젝트를 실행합니다.

Boot Start

  • 웹브라우저에서 동일하게 테스트를 수행합니다.

  • CommonService의 모듈이 정상적으로 작동함을 확인할 수 있습니다.

이상으로 3회에 걸친 Maven을 이용한 스프링부트 Multi Module 프로젝트 개발 과정을 마쳤습니다.

감사합니다.

반응형
반응형

이 글의 동영상 강좌

https://youtu.be/2RcBDgLMXSc

Parent 프로젝트 만들기

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

Create 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 버튼을 클릭합니다.

Dependency 설정

  • 프로젝트의 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>

packaging

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

Maven Problems

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

Maven Update

공통모듈 프로젝트 만들기

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

File - New - Project

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

Maven Module

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

MultiCommon Maven Module

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

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

Multi 프로젝트의 pom.xml

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

Common 프로젝트의 pom.xml

Child 프로젝트 만들기

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

MultiProject1

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

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

폴더 구조

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

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

Child 프로젝트의 pom.xml 수정

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

Maven Update

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

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

반응형
반응형

이 강좌의 동영상 강의

https://youtu.be/M242qC2TVSM

Maven Multi Module Porject 개념

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

Maven Multi Module Project 개념

공통 모듈을 사용하는 방법

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

 

프로퍼티 설정 방법 1

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

프로퍼티 설정 방법 1

프로퍼티 설정 방법 2

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

프로퍼티 설정 방법 2

실습 프로젝트의 Naming

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

프로젝트 Naming

프로젝트 폴더 구성

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

프로젝트 폴더 구성

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

반응형

+ Recent posts