Code Gear - AI 개발 유튜브 강의 :: Code Gear

전체 글

데이터베이스기초-01.MySQL 설치하기 2021.10.23
JSON 기초 (feat. Live Server) 2021.10.16
일렉트론기초-10.일렉트론 사이드 메뉴 만들기 2021.10.09
Maven을 이용한 스프링부트 Multi Module 프로젝트(3/3)-프로그램개발 2021.10.09
Maven을 이용한 스프링부트 Multi Module 프로젝트(2/3)-프로젝트 만들기 2021.10.09

데이터베이스기초-01.MySQL 설치하기

2021. 10. 23. 09:10

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

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

https://youtu.be/yZtub4AbbAo

mysql download

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

검색 결과창에서 "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 접속까지 진행을 해봤습니다.

'Database' 카테고리의 다른 글

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

JSON 기초 (feat. Live Server)

2021. 10. 16. 14:45

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

요즘 가장 많이 사용하는 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의 탐색기에 index.html을 마우스를 우클릭하여 LIve Server를 실행합니다.

브라우저가 실행되며 아래와 같이 실행됩니다.

Live Server가 잘 작동하는지 확인하기 위해 아래와 같이 index.html의 header를 수정합니다.

<header>
    <h1>Heroes!!!</h1>
</header>

다시 브라우저를 확인합니다.
- 아래와 같이 Title이 나오면 정상입니다.

JSON Data 가져오기

JSON Data는 아래 URL에서 가져오도록 합니다.
- https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json
JSON Data를 요청하는 Code를 index.html에 작성합니다.
- </body> 위에 <script>와 </script>사이에 작성하시면 됩니다.

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

일렉트론기초-10.일렉트론 사이드 메뉴 만들기

2021. 10. 9. 20:13

이 글의 동영상 강의

https://youtu.be/_KMmhsVPbk0

완성 화면

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

사이드 메뉴 추가하기

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

Codepen에서 "side menu"로 검색합니다.
Side Sliding Menu CSS를 선택합니다.
https://codepen.io/EduardL/pen/aBGAy

Side Sliding Menu CSS

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

codepen.io

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;
    ...

완료된 화면은 다음과 같습니다.

'일렉트론' 카테고리의 다른 글

일렉트론기초-14.Electron + Vue.js (0)	2022.03.06
일렉트론기초-13.Electron + React로 IPC 통신하기 (0)	2021.11.13
일렉트론기초-12.React + Electron 한방에 띄우기 (7)	2021.11.04
일렉트론기초-11.일렉트론 MySQL 연동 (0)	2021.10.30
일렉트론기초-09.일렉트론 커스텀 타이틀바 만들기-프로그램개발(IPC) (0)	2021.10.04
일렉트론기초-08.일렉트론 커스텀 타이틀바 만들기-화면디자인 (0)	2021.10.04
일렉트론기초-07.일렉트론 화면 개발하기 (0)	2021.10.03
일렉트론기초-06.일렉트론 메뉴 추가하기 (0)	2021.10.01

Maven을 이용한 스프링부트 Multi Module 프로젝트(3/3)-프로그램개발

2021. 10. 9. 16:12

이 글의 동영상 강의

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를 선택합니다.

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

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

브라우저를 열고 SampleRest에서 만든 주소를 입력합니다.

http://localhost:8080/api/msg

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

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 프로젝트를 클릭하여 선택하고 상단 실행 버튼으로 프로젝트를 실행합니다.

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

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

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

감사합니다.

'스프링부트' 카테고리의 다른 글

Maven을 이용한 스프링부트 Multi Module 프로젝트(2/3)-프로젝트 만들기 (0)	2021.10.09
Maven을 이용한 스프링부트 Multi Module 프로젝트(1/3)-프로젝트구조 (0)	2021.10.09
03.Eclipse에 Springboot 환경 설정 (0)	2021.08.01
02.Eclipse(이클립스) 설치 (0)	2021.08.01
01.Java 설치 및 환경설정 (0)	2021.08.01

Maven을 이용한 스프링부트 Multi Module 프로젝트(2/3)-프로젝트 만들기

2021. 10. 9. 11:05

이 글의 동영상 강좌

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를 선택하여 전체프로젝트를 업데이트 합니다.

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

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

'스프링부트' 카테고리의 다른 글

Maven을 이용한 스프링부트 Multi Module 프로젝트(3/3)-프로그램개발 (0)	2021.10.09
Maven을 이용한 스프링부트 Multi Module 프로젝트(1/3)-프로젝트구조 (0)	2021.10.09
03.Eclipse에 Springboot 환경 설정 (0)	2021.08.01
02.Eclipse(이클립스) 설치 (0)	2021.08.01
01.Java 설치 및 환경설정 (0)	2021.08.01

PREV 1 ···22 23 24 25 26 27 28 ···30 NEXT

Code Gear - AI 개발 유튜브 강의

전체 글

데이터베이스기초-01.MySQL 설치하기

mysql download

'Database' 카테고리의 다른 글

JSON 기초 (feat. Live Server)

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

JSON의 특징

JSON의 구조

JSON Data에 접근하는 방법

실습

프로젝트 생성 및 코드 작성

JSON Data 가져오기

최종 실행 화면

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

일렉트론기초-10.일렉트론 사이드 메뉴 만들기

완성 화면

사이드 메뉴 추가하기

'일렉트론' 카테고리의 다른 글

Maven을 이용한 스프링부트 Multi Module 프로젝트(3/3)-프로그램개발

Rest API 작성

공통 Class 생성

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

'스프링부트' 카테고리의 다른 글

Maven을 이용한 스프링부트 Multi Module 프로젝트(2/3)-프로젝트 만들기

Parent 프로젝트 만들기

공통모듈 프로젝트 만들기

Child 프로젝트 만들기

'스프링부트' 카테고리의 다른 글

+ Recent posts

티스토리툴바