IT일타강사

jetbrains - IntelliJ IDEA Ultimate 30% 할인된 금액으로 구매

goodsaem — Sun, 29 Aug 2021 00:24:45 +0900

jetbrains - IntelliJ IDEA Ultimate 30% 할인된 금액으로 구매

21년 8월30일까지 한국어언어팩 출시기념으로 30% 할인된 금액으로 판매하여 구매를 했습니다.

구매한 시점 버전으로 영구 사용할수 있는 라이선스 입니다

또한 IntelliJ IDEA Ultimate 에 vue.js 플러그인을 설치하면 vue.js 프로그램을 사용할수 있습니다. webstorm 구매할 필요없이

IntelliJ IDEA Ultimate 하나로 java와 vue.js 모두 개발 가능합니다.

[vue.js] vue-echarts 설치

goodsaem — Sat, 21 Aug 2021 15:27:26 +0900

설치방법

 yarn add echarts vue-echarts

오류 발생하여 아래 내용을 추가함

yarn add @vue/composition-api

[vue.js] 서비스 포트 변경

goodsaem — Fri, 20 Aug 2021 12:56:49 +0900

[vue.js] 서비스 포트 변경

Vue.js 를 시작하면 8080 포트로 서비스가 시작 됩니다. 8080 말고 다른 포트를 변경하고 싶을때는 package.json 파일을 아래와 같이 수정합니다.

--port 8077 : 포트를 8077로 변경했습니다.

{
  "name": "tistory",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8077",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.5",
    "vue": "^2.6.11",
    "vue-clipboard2": "^0.3.1",
    "vue-router": "^3.5.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[vue.js] Font Awesome 색상 사이즈 변경방법

goodsaem — Fri, 20 Aug 2021 08:40:44 +0900

vue.js 기반 환경에서 폰트어썸 설정하는 방법은 아래 내용을 참고하세요.

2021.08.19 - [Language/Vue.js] - vuejs에 폰트어썸 사용

vuejs에 폰트어썸 사용

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마

goodsaem.tistory.com

폰트어썸은 svg vector 를 이용하므로 아이콘의 색상 및 사이즈 변경이 가능합니다.

소스코드

<template>
  <div>
    <ul>
      <li>
        아이콘을 출력해 봅니다. <i class="fa fa-bus"></i>
      </li>
      <li>
        아이콘의 색상을 변경해 봅니다. <i class="fa fa-bus" style="color:blue"></i>
      </li>
      <li>
        아이콘의 크기를 변경해 봅니다.
        <i class="fa fa-bus"></i>
        <i class="fa fa-bus fa-lg"></i>
        <i class="fa fa-bus fa-2x"></i>
        <i class="fa fa-bus fa-3x"></i>
        <i class="fa fa-bus fa-4x"></i>
        <i class="fa fa-bus fa-5x"></i>
        <i class="fa fa-bus fa-6x"></i>
      </li>
      <li>
        아이콘의 테두리를 적용합니다. <i class="fa fa-bus fa-border"></i>
      </li>
      <li>
        아이콘의 방향을 변경합니다.
        <i class="fa fa-bus"></i>
        <i class="fa fa-bus fa-rotate-90"></i>
        <i class="fa fa-bus fa-rotate-90"></i>
        <i class="fa fa-bus fa-rotate-180"></i>
        <i class="fa fa-bus fa-rotate-270"></i>
        <i class="fa fa-bus fa-flip-horizontal"></i>
        <i class="fa fa-bus fa-flip-vertical"></i>
      </li>
      <li>
        아이콘을 회전합니다.
        <i class="fa fa-bus fa-spin fa-lg"></i>
      </li>
      <li>
        아이콘을 중첩합니다.
        <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-bus fa-stack-1x fa-inverse"></i>
        </span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "FontAwesome2"
}
</script>
 
<style>
li {
  text-align: left;
}
</style>

실행결과

[vue.js] 프로젝트에 axios 적용하기

goodsaem — Thu, 19 Aug 2021 13:44:08 +0900

소개

Axios는 브라우저 및 node.js를 위한 간단한 비동기 통신 HTTP 클라이언트입니다. Axios는 매우 확장 가능한 인터페이스를 가진 작은 패키지로 사용하기 쉬운 라이브러리를 제공합니다.

브라우저에 내장되어 있는 fetch 와 비교한 표입니다.

axios vs fetch

Axios	Fetch
요청 객체에 url이 있습니다.	요청 객체에 url이 없습니다.
써드파티 라이브러리로 설치가 필요합니다.	현대 브라우저에 기본 탑재되어 별도 설치가 필요 없습니다.
XSRF(크로사 사이트 위조) 보호 기능이 있습니다.	별도 보호 기능이 없습니다.
data 속성을 사용합니다.	body 속성을 사용합니다.
data는 object를 포함 합니다.	body는 문자열화 되어있습니다.
status가 200이고 statusText가 ‘OK’이면 성공 입니다.	응답객체가 ok 속성을 포함하면 성공 입니다.
자동으로 JSON데이터 형식으로 변환됩니다.	.json()메서드를 사용해야 합니다.
요청을 취소할 수 있고 타임아웃을 걸 수 있습니다.	해당 기능 존재 하지않습니다.
HTTP 요청을 가로챌수 있습니다.	기본적으로 제공하지 않습니다.
download진행에 대해 기본적인 지원을 합니다.	지원하지 않습니다.
많은 브라우저를 지원합니다.	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원합니다.

axios가 좀더 많은 기능을 제공해 줍니다. 그래서 인지 가장 많이 사용합니다.

설치

yarn add axios

main.js 파일 수정

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import axios from "axios";
import App from './App.vue'
 
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

예제 (행정코드)

법정 행정 코드를 다운로드 받아서 csv 파일을 만들고 이를 axios로 불러와서 행정동을 선택하는 예제를 만들어 보겠습니다.

components/LawCode.vue 파일을 생성하고 아래와 같이 코딩합니다.

<template>
  <div>
    <el-row style="width:800px">
      <el-col :span="6">
        <el-select v-model="cate1" @change="chgCate1" placeholder="시/도">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cate2" @change="chgCate2" placeholder="시/군/구">
          <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cate3" @change="chgCate3" placeholder="읍/면/동">
          <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cate4" @change="chgCate4" placeholder="리">
          <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
const URL = "https://onehit9.github.io/";
 
export default {
  name: "LawCode",
  created() {
    this.getData();
  },
  data() {
    return {
      rows: [],
      options: [],
      options2: [],
      options3: [],
      options4: [],
      cate1: "",
      cate2: "",
      cate3: "",
      cate4: "",
      lastCate: "",
    }
  },
  methods: {
    resetCate(level) {
      if (level < 3) {
        this.cate2 = "";
        this.options2 = [];
      }
      if (level < 4) {
        this.cate3 = "";
        this.options3 = [];
      }
      if (level < 5) {
        this.cate4 = "";
        this.options4 = [];
      }
    },
 
    chgCate(cateNm,idx) {
      this.resetCate(idx - 1);
      let options = [];
      let cate = this.rows.filter(
          row => row.split(",")[idx] == "" &&
              (cateNm == "" ? true : row.split(",")[idx-1] != "" && row.split(",")[idx-2] == cateNm)
      );
      cate.map(cate => options.push({
        value: cate.split(",")[0],
        label: cate.split(",")[idx - 1]
      }))
      return options;
    },
 
    getData() {
      this.$axios.get(URL + 'apt/' + 'law_code.csv', {params: {}})
          .then((response) => {
            this.rows = response.data.replace(/["]+/g, "").split("\n");
            this.options = this.chgCate("",2);
          });
    },
    chgCate1() {
      this.lastCate = this.cate1;
      let cateNm = this.options[this.options.findIndex(e => e.value === this.cate1)].label;
      this.options2 = this.chgCate(cateNm,3);
    },
    chgCate2() {
      this.lastCate = this.cate2;
      let cateNm = this.options2[this.options2.findIndex(e => e.value === this.cate2)].label;
      this.options3 = this.chgCate(cateNm,4);
    },
    chgCate3() {
      this.lastCate = this.cate3;
      let cateNm = this.options3[this.options3.findIndex(e => e.value === this.cate3)].label;
      this.options4 = this.chgCate(cateNm,5);
    },
    chgCate4() {
      this.lastCate = this.cate4;
    },
  }
}
</script>
<style scoped></style>

위코드에서 중요한 부부은 104~110라인의 getData() 부분으로 axios를 이용해서 law_code.csv를 가져오는 부분입니다.

실행결과

[vue.js][App] FontAwesome 아이콘 종류 검색

goodsaem — Thu, 19 Aug 2021 13:19:47 +0900

https://fontawesome.com/cheatsheet에 접속하시면 무료로 사용할수 있는 아이콘들을 확인할수 있습니다.

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

조금더 쉽게 아이콘 검색을 위한 app을 만들어 보았습니다.

먼저 클립보드 복사 붙여 넣기를 쉽게 하기 위해 vue-clipboard2 를 설치합니다.

yarn add vue-clipboard2

main.js 파일을 아래와 같이 수정합니다. (클립보드를 사용할수 있게 변경합니다.)

import Vue from 'vue'
import locale from 'element-ui/lib/locale/lang/ko'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import axios from "axios";
import VueClipboard from 'vue-clipboard2'
import App from './App.vue'
 
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
Vue.use(Element, {locale},{ size: 'small', zIndex: 3000 });
Vue.use(VueClipboard);
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

components/IconSearch.vue 파일을 아래와 같이 작성합니다.

<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24">
          <h3>아이콘 검색</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="아이콘 이름을 입력하세요 ex) hotel" v-model="searchStr" @input="iconSearch"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <ul v-if="searchIcon.length > 0">
            <li v-for="item in searchIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer">
              <i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b>
              <span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>아이콘 색인</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <ul v-if="alphabet.length > 0">
            <li v-for="item in alphabet" :key="item">
              <button @click="iconIndex(item)">{{item}}</button>
            </li>
          </ul>
        </el-col>
        <el-col :span="22">
          <ul v-if="indexIcon.length > 0">
            <li v-for="item in indexIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer">
              <i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b>
              <span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
 
<script>
const URL = "https://onehit9.github.io/";
export default {
  name: "IconSearch",
  created() {
    this.alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
    this.$axios.get(URL + 'apt/' + 'font.csv', {params: {}})
        .then((response) => {
          this.icons = response.data.split(",");
          this.iconIndex('a');
        });
  },
  data() {
    return {
      searchStr: '',
      message: '',
      alphabet : [],
      indexIcon: [],
      searchIcon: [],
      icons: [],
    }
  },
  methods: {
    iconIndex(idx) {
      this.indexIcon = this.icons.filter(item => item.charAt(0) === idx);
    },
    iconSearch(str) {
      if(str.length <2 ) {
        this.searchIcon = [];
        return;
      }
      this.searchIcon = this.icons.filter(item => item.indexOf(str) > -1);
    },
    copyClipboard(item) {
      const text = '<i class="fas fa-' + item+'"></i>';
      this.$copyText(text);
      this.$message(text + ' 클립보드에 복사되었습니다. 붙여넣기(ctrl + v) 하여 사용하실수 있습니다.');
    },
  }
}
</script>

코드설명

1. font.csv 파일을 만들어서 사용할수 있는 아이콘의 문자열을 , 로 분리시켜 저장합니다.

2.axios로 csv 파일을 불러와서 icons array에 추가합니다.

3. 해당 검색어 및 인덱스에 맞는 아이콘만 필터하여 보여 줍니다.

4. 클릭시 클립보드에 복사되도록 copyText 를 실행합니다.

실행결과

[vue.js] FontAwesome 폰트어썸 사용

goodsaem — Thu, 19 Aug 2021 11:57:54 +0900

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마다 디자이너에게 요청하면 상당히 눈치가 보일것 같네요. 그렇다고 포토샵을 열어서 아이콘을 만들수도 없고 이때 사용할수 있는 유용한 웹 아이콘 폰트 라이브러리가 있습니다. Font Awesome 이라는 라이브러리 인데요 웹 아이콘 폰트 시장에서 가장 인기있는 라이브러리 입니다. 이번 시간에는 Vue.js 에서 Font Awesome 을 사용하는 방법에 대해서 알아 보겠습니다.

설치

Vue.js 프로젝트를 생성했다고 가정하고 font awesome 을 추가 설치 하는 방법입니다. yarn 또는 npm 둘중 하나의 방법을 이용해 라이브러리를 추가해 주세요

yarn을 이용한 설치

yarn 을 이용한 설치 방법입니다.

yarn add @fortawesome/fontawesome-free

npm 설치 방법

npm을 이용한 설치 방법 입니다.

npm install --save @fortawesome/fontawesome-free

main.js 수정

main.js 에 import '@fortawesome/fontawesome-free/js/all.js' 코드를 추가합니다.

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import App from './App.vue'
 
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

사용법

vue.js template 부분에 아래와 같이 코드를 작성하시면 아이콘이 출력됩니다.

<i class="fa fa-bus"></i>
<i class="fas fa-ambulance"></i>
<i class="fas fa-hotel"></i>

실습

componets 에 FontAwesome.vue파일을 생성하고 아래와 같이 입력합니다.

<template>
  <div style="margin-top:40px">
    <i class="fa fa-bus fa-lg"></i>
    <i class="fas fa-ambulance fa-2x"></i>
    <i class="fas fa-hotel fa-4x"></i>
  </div>
</template>
 
<script>
export default {
  name: "FontAwesome"
}
</script>
 
<style scoped>
 
</style>

router/basic.js 파일에 추가한 컴포넌트의 path를 지정합니다. (page2 라고 지정함)

import HelloWorld from "@/components/HelloWorld";
import Page1 from "@/components/Page1";
import FontAwesome from "@/components/FontAwesome";
 
const basic = [
    {path: '/', name: 'index', component: HelloWorld},
    {path: '/hello-world', name: 'HelloWorld', component: HelloWorld},
    {path: '/page1', name: 'Page1', component: Page1},
    {path: '/page2', name: 'FontAwesome', component: FontAwesome},
];
 
export default basic;

App.vue에 추가한 페이지 page2에 대한 라우터 링크를 추가합니다.

<template>
  <div id="app">
    <router-link to="/hello-world">hello</router-link> |
    <router-link to="/page1">page1</router-link> |
    <router-link to="/page2">page2</router-link> |
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
</style>

실행결과

[Mac] Intellij 에서 코드 자동 정렬하기

goodsaem — Wed, 18 Aug 2021 09:57:19 +0900

[Mac] Intellij 에서 코드 자동 정렬하기

option + command + L

Intellij 대소문자 변환 방법

goodsaem — Mon, 16 Aug 2021 21:23:29 +0900

Intellij 대소문자 변환 단축키 입니다.

Command + shift + U

Postgresql split 하는방법

goodsaem — Mon, 16 Aug 2021 12:44:00 +0900

특정 문자열을 기준으로 split할때 split_part 함수를 사용합니다.

select split_part(dong,' ',1),split_part(dong,' ',2),split_part(dong,' ',3),dong from trade

Postgresql 칼럼 추가 방법

goodsaem — Mon, 16 Aug 2021 11:52:51 +0900

apt_info 테이블에 acode 칼럼을 추가하는 방법 입니다.

alter table apt_info add column acode varchar(13);

Postgresql db 버전확인

goodsaem — Mon, 16 Aug 2021 11:23:19 +0900

아래와 같은 명령어를 입력합니다.

select version()

실행결과

version
PostgreSQL 13.3 on x86_64-apple-darwin20.4.0, compiled by Apple clang version 12.0.5 (clang-1205.0.22.9), 64-bit

Postgresql rownum 사용하기

goodsaem — Mon, 16 Aug 2021 09:50:28 +0900

오라클의 rownum을 Postgresql 에서 사용하기 위해서는 아래와 같이 사용하시면 됩니다.

select *
    , 100 + (row_number () over()) as rownum
 from apt_info
 where lcode = '4785025623'

[실행결과]

행정코드	행정코드5자리	아파트명	동1	동2	rownum
4785025623	47850	칠곡남율효성해링턴플레이스1단지	석적읍	남율리	101
4785025623	47850	효성해링턴 플레이스	석적읍	남율리	102
4785025623	47850	효성해링턴플레이스2단지	석적읍	남율리	103
4785025623	47850	남율2지구 효성해링턴플레이스2차	석적읍	남율리	104
4785025623	47850	남광하우스토리	석적읍	남율리	105
4785025623	47850	동화공단타운	석적읍	남율리	106
4785025623	47850	효성해링턴플레이스(3단지)	석적읍	남율리	107
4785025623	47850	한솔 솔파크 강변	석적읍	남율리	108
4785025623	47850	우방신천지	석적읍	남율리	109
4785025623	47850	효성해밍턴플레이스3차	석적읍	남율리	110
4785025623	47850	한솔솔파크강변	석적읍	남율리	111

PostgreSQL Drop column

goodsaem — Sun, 15 Aug 2021 17:54:34 +0900

테이블에서 칼럼을 삭제하는 방법 입니다.

ALTER TABLE table_name 
DROP COLUMN column_name;

칼럼이 존재하는지 확인한후 삭제하는 방법 입니다.

ALTER TABLE table_name 
DROP COLUMN IF EXISTS column_name;

[mac] postgresql 외부접속 가능하게 변경

goodsaem — Sun, 15 Aug 2021 11:31:18 +0900

[mac] postgresql 외부접속 가능하게 변경

설정파일이 있는 디렉토리로 이동합니다.

cd /usr/local/var/postgres

vi editor로 설정파일을 오픈합니다.

vi postgresql.conf

listen_addresses = '*' 외부에서 접속 가능하도록 설정을 변경합니다.

... 중략 ...
# - Connection Settings -

listen_addresses = '*'          # what IP address(es) to listen on;
... 중략 ...

ssl off 설정을 추가합니다.

vi pg_hba.conf

가장 마지막 줄에 아래 내용을 입력합니다.

host  all  all 0.0.0.0/0 md5

위와 같이 설정하지 않으면 아래와 유사한 오류가 발생합니다.
[1342] FATAL: no pg_hba.conf entry for host "x.x.x.x", user "aptdb", database "postgres", SSL off

[mac] postgresql 서비스 시작/종료

goodsaem — Sun, 15 Aug 2021 11:21:26 +0900

[mac] postgresql 서비스 시작

pg_ctl -D /usr/local/var/postgres start

[mac] postgresql 서비스 종료

pg_ctl -D /usr/local/var/postgres stop

windows 에 PostgreSQL 설치

goodsaem — Thu, 5 Aug 2021 18:46:57 +0900

windows 에 PostgreSQL 설치

아래 사이트에서 윈도우용 PostgreSQL을 다운로드 받습니다.

https://www.postgresql.org/download/windows/

PostgreSQL: Windows installers

Windows installers Interactive installer by EDB Download the installer certified by EDB for all supported PostgreSQL versions. This installer includes the PostgreSQL server, pgAdmin; a graphical tool for managing and developing your databases, and StackBui

www.postgresql.org

다운로드 받은 파일을 클릭하여 설치를 진행합니다.

설치시 로케일 부분을 Korean,Korea로 지정해 줍니다.

전아래와 같은 설정으로 설치를 진행했습니다.

Installation Directory: C:\Program Files\PostgreSQL\12
Server Installation Directory: C:\Program Files\PostgreSQL\12
Data Directory: C:\Program Files\PostgreSQL\12\data
Database Port: 5432
Database Superuser: postgres
Operating System Account: NT AUTHORITY\NetworkService
Database Service: postgresql-x64-12
Command Line Tools Installation Directory: C:\Program Files\PostgreSQL\12
pgAdmin4 Installation Directory: C:\Program Files\PostgreSQL\12\pgAdmin 4
Stack Builder Installation Directory: C:\Program Files\PostgreSQL\12

PostgreSQL 테이블 생성

goodsaem — Wed, 4 Aug 2021 23:56:18 +0900

PostgreSQL 테이블 생성

먼저 유저로 로그인

postgres=# \c aptdb aptdb

테이블 생성

aptdb=# CREATE TABLE test (
id integer,
name character varying(255));
CREATE TABLE

생성된 테이블 확인

aptdb=# \dt
       List of relations
 Schema | Name | Type  | Owner 
--------+------+-------+-------
 public | test | table | aptdb
(1 row)

PostgreSQL 사용자 권한 생성 및 사용자 생성

goodsaem — Wed, 4 Aug 2021 23:31:50 +0900

PostgreSQL 사용자 권한 생성 및 사용자 생성

postgreSQL 접속

psql postgres

\du 명령어를 입력합니다.

postgres=# \du

실행결과

                                   List of roles
 Role name |                         Attributes                         | Member of 
-----------+------------------------------------------------------------+-----------
 goodsaem  | Superuser, Create role, Create DB, Replication, Bypass RLS | {}

goodsaem 유저의 패스워드를 변경합니다.

postgres=# \password goodsaem
Enter new password: 
Enter it again:

신규 유저 생성

CREATE USER aptdb PASSWORD 'aptdb' SUPERUSER;

신규 유저로 로그인

psql postgres -U aptdb

데이터베이스 생성

CREATE DATABASE aptdb;

생성된 DB 확인

postgres=# \l

실행결과

postgres=# \l
                             List of databases
   Name    |  Owner   | Encoding | Collate | Ctype |   Access privileges   
-----------+----------+----------+---------+-------+-----------------------
 aptdb     | aptdb    | UTF8     | C       | C     | 
 postgres  | goodsaem | UTF8     | C       | C     | 
 template0 | goodsaem | UTF8     | C       | C     | =c/goodsaem          +
           |          |          |         |       | goodsaem=CTc/goodsaem
 template1 | goodsaem | UTF8     | C       | C     | =c/goodsaem          +
           |          |          |         |       | goodsaem=CTc/goodsaem
(4 rows)

Mac 맥에 PostgresSQL 설치하기

goodsaem — Wed, 4 Aug 2021 23:26:50 +0900

Mac 맥에 PostgresSQL 설치하기

아래 명령어를 입력하여 설치를 시작합니다.

brew install postgresql

필요한 파일들을 자동으로 다운로드 하여 설치가 진행 됩니다.

설치후 아래 명령어를 실행하여 서비스를 시작합니다.

pg_ctl -D /usr/local/var/postgres start && brew services start postgresql

아래 명령어를 입력하여 서비스가 정상동상중인지 확인합니다.

postgres -V

postgres (PostgreSQL) 13.3

[vue.js] vue-router 사용하기

goodsaem — Sun, 1 Aug 2021 10:06:54 +0900

vue-router 설치 및 활용방법 입니다.

설치하기

npm install vue-router

package.json 파일 14라인에 vue-router가 추가 되었습니다.

{
  "name": "vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.3",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

아래와 같이 디렉토리 (src/router)를 구성하고 basic.js , index.js 파일을 생성합니다.

├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── Page1.vue
│   ├── main.js
│   └── router
│       ├── basic.js
│       └── index.js

router/index.js : 여러개의 router를 import 하는 역할을 담당합니다.

/* eslint-disable */
import Vue from 'vue'
import Router from 'vue-router'
import basic from "@/router/basic";
Vue.use(Router)
 
export default new Router({
    mode: 'hash',
    routes: [
        ...basic
    ]
})

router/basic.js : 기본 router 입니다. 내용이 추가될때 마다 이곳에 컴포넌트를 추가하여 path에 사용하는 컴포넌트를 정의합니다.

import HelloWorld from "@/components/HelloWorld";
import Page1 from "@/components/Page1";
 
const basic = [
    {path: '/', name: 'index', component: HelloWorld},
    {path: '/hello-world', name: 'HelloWorld', component: HelloWorld},
    {path: '/page1', name: 'Page1', component: Page1},
];
 
export default basic;

Page1.vue 파일을 생성합니다.

<template>
  <div id="app">
    {{ page1 }}
  </div>
</template>
 
<script>
export default {
  name: 'Page1',
  data() {
    return {
      page1 : "test router",
    }
  }
}
</script>
 
<style scoped></style>

main.js 파일을 아래와 같이 수정합니다.

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import App from './App.vue'
 
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

그리고 나서 build 하여 실행해보면 아래와 같은 페이지를 확인할수 있습니다.

hello-world

page1

[vue.js] BASE_URL public_path 변경하기

goodsaem — Sun, 1 Aug 2021 09:52:02 +0900

vue.js BASE_URL public_path 변경하기

BASE_URL public_path 변경하는 방법입니다.

package.json 파일이 있는 위치에 "vue.config.js" 파일을 생성합니다.

vue.config.js 파일에 아래와 같이 입력합니다.

module.exports = {
    publicPath: '/dist/',
}

npm run deploy 합니다.

그럼 아래와 같이 base_url이 변경되었음을 확인할수 있습니다.

기존

... 중략 ...
<link href="/css/app.dba1af84.css">
... 중략 ...

변경후

... 중략 ...

<link href="/dist/css/app.dba1af84.css">


... 중략 ...

[vue.js] vue element-ui(ui 컴포넌트) 설치 및 사용

goodsaem — Sat, 31 Jul 2021 11:15:49 +0900

vue용 대표 ui 컴포넌트인 element-ui 설치 방법 입니다.

vue project 에서 아래 명령어를 실행합니다.

npm i element-ui -S

실행이 끝나고 나서 package.json 파일을 확인하면 11 라인 처럼 "element-ui": "^2.15.3" 가 추가된걸 확인할수

있습니다.

{
  "name": "vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

진입점 파일 main.js 파일에 3,4 라인과 같이 element-ui 관련 내용을 추가합니다.

그리고 나서 8번 라인에 element ui 사용하겠다고 선언합니다.

Vue.use(Element, { size: 'small', zIndex: 3000 });

import Vue from 'vue'

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue 파일을 아래와 같이 수정합니다.

<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

실행결과

HEXO 검색엔진최적화(Search Engine Optimization,SEO)

goodsaem — Wed, 28 Jul 2021 00:08:45 +0900

검색엔진 최적화(Search Engine Optimization,SEO)

내가 작성한 글이 검색엔진에게 잘 노출되기 위해서는 내 블로그가 검색엔진에 노출이 잘되도록 최적화 시켜야 됩니다. 가장 중요한건 블로그에 작성한 Post가 검색하는 사람들에게 가치를 줄수 있어야 합니다. 두번째는 구글,네이버,다음 검색엔진에게 내 블로그를 알려야 합니다. 내가 이렇게 정성스럽게 글을 잘 작성했으니 글을 읽어가서 사용자가 검색을 하면 내 블로그를 소개시켜 달라고 부탁하는 거죠. 내가 쓴글을 검색엔진이 읽어가기 쉽게 최적화하는걸 SEO라고 합니다. 오늘은 codingsarang 블로그를 최적화 시켜 보겠습니다.

hexo에서 제공해주는 플러그인 설치하기

hexo 에서는 SEO와 관련된 플러그인들이 다양하게 있습니다. https://hexo.io/plugins/ 접속하신후 seo라고 입력하고 검색을 수행하면 아래와 같은 다양한 plugin을 확인할수 있습니다. 그중 일반적으로 많이 사용하는 플러그인들을 설치해 보겠습니다.

hexo-auto-canonical
hexo-generator-robotstxt
hexo-autonofollow
hexo-generator-feed
hexo-generator-seo-friendly-sitemap

hexo-auto-canonical 설치 및 적용

표준링크를 자동으로 생성해주는 플러그인입니다. 아래 명령어를 입력하여 설치를 진행합니다.

npm install --save hexo-auto-canonical

설치가 완료되면 themes > hueman > layout > common > head.ejs 에 아래에 코드를 입력합니다.

...
<%- meta(page) %>
<%- autoCanonical(config, page) %>
...

블로그에서 소스보기를 하고 아래와 같은 내용을 확인할수 있다면 이제부터 검색엔진은 이글의 표준링크에 대해서 인식을 하게 됩니다.

<link rel="canonical" href="https://open.github.io/2020/07/06/hello-world/">

hexo-generator-robotstxt 설치 및 적용

robots.txt 의 상세 내용은 https://support.google.com/webmasters/answer/6062608?hl=ko&ref_topic=6061961 여기에서 확인 가능합니다.

robots.txt 파일이란 무엇인가요? robots.txt 파일은 검색엔진 크롤러에서 사이트에 요청할 수 있거나 요청할 수 없는 페이지 또는 파일을 크롤러에 지시하는 파일입니다. 이 파일은 요청으로 인해 사이트가 오버로드되지 않도록 하는 데 주로 사용되며, Google로부터 웹페이지를 숨기는 데 사용하는 메커니즘이 아닙니다. 웹페이지가 Google에 표시되지 않도록 하려면 noindex 명령어를 사용하거나 페이지를 비밀번호로 보호해야 합니다.

robots.txt의 용도는?
robots.txt는 주로 사이트의 크롤러 트래픽을 관리하는 데 사용되며 보통 다음과 같이 파일 형식에 따라 Google에서 페이지를 숨기는 데 사용됩니다.

blog 홈디렉토리에서 아래 명령어를 입력합니다.

npm install hexo-generator-robotstxt --save

blog 홈디렉토리에 있는 _config.yml에 아래와 같이 입력합니다. 여기에서 *가 의미하는 내용은 모든 사용자 에이전트(robot)가 전체 사이트에 액세스할 수 있습니다.

robotstxt:
  useragent: "*"
  allow:
    - /
  sitemap: https://yourblogsite.github.io/sitemap.xml

hexo-autonofollow 설치및 적용

외부 링크에 아래 처럼 nofollow 속성을 추가하는 플러그인 입니다.

<meta name="robots" content="nofollow" />

특정 페이지의 링크를 추적하지 않도록 하거나 특정 링크의 추적을 막을때 nofollow 속성값을 사용 할 수 있습니다. 검색엔진마다 nofollow 속성을 처리하는 방식이 다를 수 있습니다.

이 페이지의 링크를 추적하지 않도록 설정할때 :

<meta name="robots" content="nofollow" />

특정 링크의 추적을 하지 않도록 설정할때 :

<a href="http://www.test.com/" rel="nofollow">링크</a>

보통 신뢰할 수 없는 콘텐츠나 유료 링크의 경우 다른 사용자의 검색에 노출되지 않아야 하므로 nofollow 속성을 사용하는 것이 좋습니다. 해당 플러그인을 enable 해놓으면 모든 외부 링크에 rel=”external nofollow” 속성을 자동으로 추가합니다. 외부링크에만 동작하기 때문에 본인 사이트의 도메인 링크는 제외됩니다. 외부 링크에 target=”_blank” 속성을 넣어서 클릭할 경우 새로운 탭 또는 윈도우에서 열리게 합니다.

아래 명령어를 입력하여 설치 할수 있습니다.

npm install hexo-autonofollow --save

_config.yml 에 아래와 같이 입력합니다.

nofollow:
    enable: true
    exclude:
    - exclude1.com
    - exclude2.com

hexo-generator-feed

자동으로 RSS feed를 생성해주는 플러그인 입니다.

어떤 사이트가 있을 때, 그 사이트를 매일 방문해서 재미있는 새로운 기사가 있는지 확인하는 것은 번거롭습니다. 특히 새 기사가 매일 또는 정기적으로 올라오는 것이 아니라 불규칙할 때는 더욱 그렇습니다. 그 사이트를 직접 방문하지 않고, 새 기사들만 자신의 컴퓨터로 “배달”이 된다면 편리할 것입니다. RSS(Really Simple Syndication 의 약자) 같은 “사이트 피드”란, 새 기사들의 제목만, 또는 새 기사들 전체를 뽑아서 하나의 파일로 만들어 놓은 것입니다. 이제 각 사이트들에서 제공하는 RSS파일 주소만 수집하여 확인하면, 자신의 취향에 맞는 새로운 읽을거리를 쉽게 찾아서 읽을 수 있습니다. 그러나 모든 사이트에서 RSS피드를 제공하는 것은 아닙니다. 1년 내내 새로운 내용이 없는 정적인 사이트에서는 제공하지 않는 것이 보통입니다. 새로운 읽을거리가 자주 올라오는 “뉴스형”, “블로그형” 사이트에서 주로 제공됩니다.
RSS Feed

아래 명령어를 입력하여 설치 할수 있습니다.

npm install hexo-generator-feed --save

_config.yml 에 아래와 같이 입력합니다.

feed:
  type: rss2
  path: rss2.xml
  limit: 20

type은 feed의 종류입니다. (atom/rss2) - * 네이버는 atom을 지원하지 않으므로 rss2로 지정합니다.
path는 feed가 생성될 경로 입니다.(default : atom.xml, rss2.xml)
limit는 최신 포스트 수 설정 (0 또는 false - 전체 포스트)

hexo-generator-seo-friendly-sitemap

크롤러가 블로그를 더욱 효율적으로 클롤링 할 수 있도록 사이트맵 xml 파일을 자동으로 생성해 줍니다. 이렇게 생성된 사이트맵을 robot이 가져가서 색인을 진행합니다.

아래 명령어를 입력하여 설치 할수 있습니다.

npm install hexo-generator-seo-friendly-sitemap --save

_config.yml 에 아래와 같이 입력합니다.

sitemap:
  path: sitemap.xml
  tag: false
  category: false

path 는 sitemap이 생성될 경로를 말하며 tag 및 category 포함 여부를 지정할수 있습니다. 전 제외 시켰습니다.

검색엔진 등록하기

아래 url을 클릭하여 구글 애널리틱스에 회의 가입후 추적 아이디를 발급받습니다.
구글 애널리틱스

발급받은 아이디는 themes의 _config.yml 내 google_analytics에 넣어 줍니다.

_config.yml 파일을 아래와 같이 수정하세요.

plugins:
    google-analytics:
        # Google Analytics tracking id
        tracking_id: UA-*********-1

아래 url에 접속하여 사이트 맵을 제출합니다.
google search console

가입 후 사이트를 추가 합니다. 생성된 html파일을 루트에 올린 후 확인 하는 방법과 애널리스틱 가입을 확인하는 방법으로 인증을 진행할수 있습니다.
Sitemaps 메뉴에 위에서 생성한 sitemap.xml과 rss2.xml을 추가해 주세요. sitemap을 등록하고 일정시간 지나면 내 사이트에 등록된 글을 구글
검색을 통해 확인할수 있습니다.

아래 사이트를 클릭하여 네이버에 등록을 진행하겠습니다.

NAVER 웹마스터도구

먼저 사이트 소유확인 부터 진행해 주세요 저는 meta태그정보를 블로그에 head.ejs에 추가하였습니다.

네이버 웹마스터 도구 페이지에서 사이트 간단 체크하기 메뉴를 통해 현재 블로그의 최적화 상태를 알아볼 수 있습니다.

연동 사이트 목록 페이지 내 사이트 추가에 블로그 주소를 추가해 줍니다.

다음 검색 등록에서 신규등록을 진행합니다.등록한 이메일 접수완료 메일을 받을 수 있습니다.
[다음 검색 등록](https://register.search.daum.net/index.daum,"다음 검색 등록”)

HEXO와 Github page를 이용한 무료 정적 웹사이트(Blog) 만들기

goodsaem — Tue, 27 Jul 2021 23:53:35 +0900

개요

정적 웹사이트 생성기 hexo를 이용해서 블로그를 만든후 github page까지 반영하는 방법에 대해서 알아보겠습니다. 코딩사랑 블로그를 만들면서 아래 내용되로 설치를 했구요 차근차근 따라오시다 보면 github.io도메인을 가지는 블로그를 만들수 있습니다.

정적 웹사이트 ?

정적 웹사이트는 컨텐츠 내용이 변하지 않는 정적인 컨텐츠를 사용하는 웹사이트 입니다. 정적인 컨텐츠는 html,css,javascript,image 와 같은 컨텐츠로써 클라이언트 웹브라우저가 서버에 내용을 요청하면 서버에 등록되어 있는 파일 그대로를 서비스 하기에 모든 클라이언트에게 동일한 결과를 리턴합니다. 동적인 컨텐츠는 jsp,servelt,php,nodejs 같은 컨텐츠로써 요청에 따라 다른 결과 내용을 보여줍니다. 예를 들어 로그인 하기전에는 내용이 보이지 않았다가 로그인하면 내용을 보여주고 사용자에 따라 다른 내용을 보여주는 것들도 모두 동적인 컨텐츠입니다.

정적인 웹사이트는 동적인 웹사이트보다 속도가 빠릅니다. 일반적인 블로그를 한번 살펴볼까요? 블로그에서 글을 쓰면 내가쓴글은 db에 저장이 됩니다. 글 읽기에 관련 된 사용자 요청이 오면 db에서 데이터를 읽어서 html로 변환해서 사용자의 웹브라우저에 보여주는 구조 입니다. 하지만 정적인 웹사이트는 이미 html이 다 만들어져 있기에 페이지를 만들기 위해 이루어 지는 일련의 과정이 없어서 속도가 빠릅니다.

하지만 단점도 있습니다. 반복되는 부분의 코드를 작성해야 된다는 거죠. 보통의 웹사이트나 블로그를 보면 상단부분의 메뉴와 하단 부분은 변하지 않습니다. 그래서 php에서는 header.php footer.php 이런 공통 파일들을 만들어서 include해서 사용 하죠 그리고 메뉴 부분은 상단 부분을 클릭할때 마다 다르기에 db에서 내용을 가져와서 만들거나 코드를 작성해서 메뉴를 만듭니다. 그런 부분을 정적웹사이트에서 구현할려면 한페이지마다 상단,좌측,하단 내용을 모두 중복해서 코딩해야됩니다. 생산성도 좋지않고 유지보수도 하기 힘듭니다. 속도는 빠르게 하고 중복되는 코드들은 줄이고 유지보수를 편하게 하기 위해서는 어떻게 해야 되나 사람들은 고민하게되고 이를 해결하기 위해 hexo 나 jekyll 같은 정적 웹사이트 생성기를 사용합니다.

아래 코드는 지금 보시고 있는 blog에서 사용하는 head.ejs 입니다. 가장 상단에 공통으로 사용하는 css나 자바스크립트 같은걸 포함하고 post마다 글을 바꿀수 있게 코딩이 되어 있습니다. asp나 php같은 스크립트 언어와 비슷하죠? 내 pc에서 글을쓸때는 동적으로 컨텐츠들이 생성됩니다. 생성된 컨텐츠를 build라는 과정을 거쳐서 정적인 컨텐츠로 변환하고 변환된 컨텐츠를 서버에 올리면 정적인 웹사이트가 됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <%- partial('pwa/index') %>
    <%
        var title = page.title;
        if (is_archive()) {
            title = __('index.archive');
            if (is_month()) {
                title += ': ' + page.year + '/' + page.month;
            } else if (is_year()) {
                title += ': ' + page.year;
            }
        } else if (is_category()) {
            title = __('index.category') + ': ' + page.category;
        } else if (is_tag()) {
            title = __('index.tag') + ': ' + page.tag;
        }
    %>
    <title><% if (title) { %><%= title %> | <% } %><%= config.title %></title>
    <% if (theme.plugins.bing_site_verification) { %>
      <meta name="msvalidate.01" content="<%- theme.plugins.bing_site_verification %>" />
    <% } %>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <% if (page.tags) {
        var keywords = [];
        for (var i in page.tags.data) {
            keywords.push(page.tags.data[i].name);
        }
    %>
    <meta name="keywords" content="<%= keywords.join(',') %>" />
    <% } %>
    <%- open_graph({
        image:          thumbnail(page),
        fb_app_id:      theme.miscellaneous.open_graph.fb_app_id,
        fb_admins:      theme.miscellaneous.open_graph.fb_admins,
        twitter_id:     theme.miscellaneous.open_graph.twitter_id,
    }) %>
    <%- meta(page) %>

    <% if (theme.customize && theme.customize.social_links && theme.customize.social_links.rss) { %>
        <link rel="alternate" href="<%- theme.customize.social_links.rss %>" title="<%= config.title %>" type="application/atom+xml" />
    <% } %>

    <% if (theme.customize.favicon) { %>
        <link rel="icon" href="<%- url_for(theme.customize.favicon) %>" />
    <% } %>

    <%- css('libs/font-awesome/css/font-awesome.min') %>
    <%- css('libs/titillium-web/styles') %>
    <%- css('libs/source-code-pro/styles') %>

    <%- css('css/style') %>

    <%- js('libs/jquery/3.5.0/jquery.min') %>
    <%- partial('plugin/scripts', { isHead: true }) %>
    <%- css('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css') %>
</head>

hexo + github 를 사용하면 어떤 이점이 있나요?

블로그 툴들은 많고(naver,tistory,wordpress..) 왜 어렵게 이런툴을 사용해야 되나요? 글쓰는건 네이버,티스토리,wordpress로 쓰는게 편합니다. 저는 프로그래머 입니다. 제가 만들 프로그램들 주로 FrontEnd쪽 application입니다. 위에 블로그들에서는 이를 보여주는게 한계가 있습니다. 해당 블로그들이 제공해주는 범위 내에서 사용할수 밗에없는데 hexo 같은 정적 웹사이트 생성기는 컨텐츠를 생성하는 사람들이 생각하는되로 자유롭게 내용을 꾸밀수 있습니다. 그리고 내가 만든 웹 어플리케이션을 올릴수도 있습니다. 이런 부분때문에 정적 웹사이트 생성기를 선택하게 되었습니다.

jekyll + github도 조합으로 정적인 웹사이트를 만들수 있습니다. 저도 이전 블로그에서 jekyll + github조합으로 사용했습니다. hexo + github 조합이 더 편리하다는 의견들이 많아서 이번에 저도 도전해 보았습니다. 저의 글을 끝까지 잘 읽으시면 30분만에 hexo + github 조합으로 Blog를 만들수 있습니다. 끝까지 읽어 주실거죠 미리 감사 인사 드립니다.

설치방법

새로운 언어를 배우거나 툴 사용법을 배울때 가장 좋은 방법은 무작정 설치를 해보고 이것저것 만들어 보는 방법이 가장 좋습니다. 어느정도 이론이나 아키텍처를 알고 시작하면 더 좋겠지만, 저같은 경우에는 우선 써보고 나서 구조는 뒤에 차근차근 알아가는게 좋았습니다. 제가 이걸 계속 사용할지도 의문이고, 어렵다고 생각이 들면 사용하지 않게 됩니다. 무모하게 시작하는것도 새로운 기술을 배울때는 좋은 접근법이라고 생각합니다.

설치순서

github 계정만들기
node js 설치
git-scm 설치
hexo 설치 및 구동
hexo 테마적용하기
새글 써보기
github repository 생성
hexo 환경설정
hexo 배포하기(deploy)

github 계정만들기

http://www.github.com 접속하세요 그리고 sing up for github버튼을 클릭하여 계정을 생성해 주세요.

아래와 같이 항목을 선택하고 complete버튼을 클릭하면 등록하신 이메일로 인증 메일이 발송됩니다.

받은 메일함에서 Verify email address 버튼을 클릭하여 이메일 인증을 완료합니다.

인증이 완료되면 아래와 같은 메시지를 볼수 있습니다.

여기까지 진행하면 github 계정만들기가 완료 됩니다.

nodejs 설치하기

아래 사이트에서 nodejs 다운로드 받습니다. 글을 쓰고있는 시점에서 안정적,신뢰도가 높은 LTS버전을 다운로드 받습니다.

next 버튼을 클릭해서 설치를 진행합니다.

설치가 완료되면 finish 버튼을 클릭하여 설치를 완료합니다.

윈도우 버튼을 클릭하여 Node.js 가 설치된걸 확인할수 있습니다.

git-scm 설치하기

github를 사용하기 위해서는 git-scm을 설치해야 됩니다. https://git-scm.com/ 접속하시고 64-bit git for windows setup 링크를 클릭 하여 설치 파일을 다운로드 받습니다.

다운로드한 파일을 클릭하여 설치 를 진행합니다. next 버튼을 클릭합니다.

Next를 눌러서 진행합니다. 설치가 완료되었습니다.

hexo 설치 및 서버 구동

command창을 하나 뛰운다음 c:\로 이동합니다.
npm (node package manager)로 hexo-cli를 -g 전역으로 설치합니다.
blog를 초기화 합니다. 이름은 blog
blog 폴더로 이동한후 npm install 명령을 실행합니다.
설치가 완료되면 hexo 서버를 뛰웁니다. (hexo server)

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

hexo 테마적용하기

https://hexo.io/themes/ 에서 hexo 다양한 테마를 다운로드 받아 적용할수 있습니다. 코딩사랑에서 사용하는 theme은 https://github.com/ppoffice/hexo-theme-hueman 이곳의 theme을 이용했습니다. theme을 적용하는 방법은 해당 theme사이트로 가면 설치방법을 알수 있습니다. 전 이문서를 https://github.com/ppoffice/hexo-theme-hueman/wiki/Installation 이용해서 설치를 진행했습니다.

아래 명령어로 theme을 복제합니다.
git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

C:\blog>cd blog
C:\blog>#git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
Cloning into 'themes/hueman'...
remote: Enumerating objects: 40, done.
remote: Counting objects: 100% (40/40), done.
remote: Compressing objects: 100% (30/30), done.
remote: Total 1937 (delta 0), reused 37 (delta 0), pack-reused 1897
Receiving objects: 100% (1937/1937), 5.66 MiB | 4.10 MiB/s, done.
Resolving deltas: 100% (1015/1015), done.

c:\blog 폴더의 _confi.yml파일에서 theme을 파일을 열어서 아래와 같이 설치한 theme명으로 수정한다.

...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hueman
...

themes\hueman 디렉토리로 이동한후 _config.yml.example 파일일 _config.yml로 수정한다. 수정 완료후 dir 명령어를 입력하여 정상적으로 파일명이 변경되었는지 확인한다.

C:\blog>cd themes\hueman
C:\blog\themes\hueman>rename _config.yml.example _config.yml

C:\blog\themes\hueman>dir
 C 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: 6E7E-7D01

 C:\blog\themes\hueman 디렉터리

2020-07-05  오후 10:05    <DIR>          .
2020-07-05  오후 10:05    <DIR>          ..
2020-07-05  오후 08:44    <DIR>          .github
2020-07-05  오후 08:44                11 .gitignore
2020-07-05  오후 08:44    <DIR>          languages
2020-07-05  오후 08:44    <DIR>          layout
2020-07-05  오후 08:44            18,401 LICENSE
2020-07-05  오후 08:44               173 package.json
2020-07-05  오후 08:44             2,946 README.md
2020-07-05  오후 08:44    <DIR>          scripts
2020-07-05  오후 08:44    <DIR>          source
2020-07-05  오후 08:44             5,551 _config.yml
               5개 파일              27,082 바이트
               7개 디렉터리  218,937,688,064 바이트 남음

C:\blog\themes\hueman>

c:\blog 디렉토리로 이동한후 hexo server하여 블로그를 구동시켜서 아래와 같은 화면이 나오면 설치가 완료되었습니다.

C:\blog\themes\hueman>cd ..

C:\blog\themes>cd ..

C:\blog>hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

blog가 제되로 나오는지 확인해 보겠습니다. http://localhost:4000 을 클릭하여 아래와 같은 그림이 나온다면 성공입니다.

새글 써보기

새로운 cmd 창을 하나더 열어서 blog폴더로 이동한후 hexo new “test1” 라고 입력합니다.

C:\blog>hexo new "test1"
INFO  Created: C:\blog\source\_posts\test1.md

크롬에서 새로고침을 하면 아래와 같이 test1이라는 새글이 등록됨을 알수 있습니다.

editor로 c:\blog\source\test1.md파일을 열어서 아래와 같이 입력후 내용을 저장하세요

아래내용을 입력합니다.

# 글을 쓰는 방법 입니다.

글은 markdown이라는 문법을 알아야 됩니다.

[![Vue](https://kr.vuejs.org/images/logo.png)](https://kr.vuejs.org/)

test1 글 상세보기를 하면 아래와 같은 내용을 확인할수 있습니다.

github repository 생성

https://github.com/ 에 접속하여 우측 상단의 + 버튼을 클릭하고 New repository 메뉴를 선택합니다.

Repository Name을 “계정명.github.io”라고 입력하고 Initialize this repository with a README 부분에 체크하고 Create repository 버튼을 클릭합니다. 이렇게 만들면 http://codingsarnag.github.io 로 접속하면 웹사이트에 접근이 가능합니다.

hexo 환경설정

블로그 환경설정을 해보겠습니다. c:\blog\_config.xml파일을 수정합니다. 제일 아래쪽에 deploy 정보는 본인 github repository 명을 입력하셔야 됩니다. 이 정보 기준으로 github page에 hexo를 deploy 합니다.

# Site
title: 코딩사랑
subtitle: '문제 해결능력을 향상을 위한 방법과 프로그래밍 언어에 대해서 다룹니다.'
description: '문제 해결능력을 향상을 위한 방법과 프로그래밍 언어에 대해서 다룹니다.'
keywords: coding,programming,frontend,backend,opensource
author: codingsarang
language: ko
timezone: 'asia/seoul'

... 중략 ...

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://codingsarang.github.io/

... 중략 ...

deploy:
  type: git
  repo: https://github.com/codingsarang/codingsarang.github.io
  branch: master

themes/hueman/_config.xml 파일내용도 본인 환경에 맞게 수정해주세요

.hexo 배포하기(deploy)

이제 정말 마지막 입니다. 내가 작성한 글들을 정적인 contents로 generate한후 github page에 배포를 진행하면 내가 쓴글을 온라인 에서 확인 가능합니다.

먼저 hexo generate 명령어를 실행하면 아래와 같은 결과를 확인할수 있습니다.

hexo generate
INFO  Start processing
INFO  Files loaded in 226 ms
INFO  Generated: content.json
INFO  Generated: categories/OPENSOURCE/index.html
INFO  Generated: categories/ETC/index.html
INFO  Generated: 2020/07/02/hexo-github/index.html
INFO  Generated: index.html
INFO  Generated: 2020/07/01/hello-world/index.html
INFO  Generated: archives/2020/07/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2020/index.html
INFO  Generated: images/repo1.png
INFO  Generated: images/repo2.png
INFO  Generated: images/repo3.png
INFO  12 files generated in 60 ms

이상태에서 hexo deploy를 실행합니다. 이렇게 실행하면 최초 git에 로그인을 하는데 본인계정정보와 패스워드를 입력하여 인증을 하고 나면 그다음부터 deploy할때는 정보를 물어보지 않습니다. deploy (commit)가 성공하면 아래와 같은 결과를 확인할수 있습니다.

hexo deploy
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 0626b12] Site updated: 2020-07-06 00:16:13
 12 files changed, 38 insertions(+), 28 deletions(-)
 create mode 100644 images/repo1.png
 create mode 100644 images/repo2.png
 create mode 100644 images/repo3.png
git: 'credential-manager' is not a git command. See 'git --help'.
Enumerating objects: 50, done.
Counting objects: 100% (50/50), done.
Delta compression using up to 6 threads
Compressing objects: 100% (19/19), done.
Writing objects: 100% (27/27), 540.77 KiB | 28.46 MiB/s, done.
Total 27 (delta 10), reused 0 (delta 0)
remote: Resolving deltas: 100% (10/10), completed with 8 local objects.
To https://github.com/codingsarang/codingsarang.github.io
   c3f2489..0626b12  HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'https://github.com/codingsarang/codingsarang.github.io'.
INFO  Deploy done: git

사이트에 접속하시면 아래와 같이 작성한 글을 확인할수 있습니다.

정적 웹사이트 생성시 Jekyll 설치 및 간단 사용법

goodsaem — Tue, 27 Jul 2021 23:32:32 +0900

정적 웹사이트 생성시 Jekyll 설치 및 간단 사용법

개요

Jekyll은 정적(static) 웹사이트 생성기 입니다. Markdown이란 문법으로 문서를 작성하고 이를 build를 시켜주면 정적 웹페이지(html) 를 생성해 줍니다. 그리고 php 같은 언어를 사용할때 header.php footer.php 같은걸 만들어 새로운 페이지를 만들때 위에 두파일을 include하는데 지킬또한 이런걸 지원해 줍니다. tistory가 많이 좋아져서 귀찮게 저런걸 써야 하는 생각도 있었지만 javascript 예제코드를 작성하고 실행할때 즉 웹어플리케이션 데모를 보여줄때는 필요할것 같아서 Jekyll 설치 방법에 대해서 정리하고 실제로 정적 웹사이트를 만들어 볼려고 합니다. 그리고 티스토리 같은경우에는 일일 발행할수 있는 글수가 15개로 제한되는데 지킬로 문서를 작성하고 github에 publish를 수행하면 이런 제한도 받지 않습니다. 사실 하루에 글 하나 적는것도 힘들긴 하지만 … 만약 글쓰고 싶은날 제한에 걸리면 한번쯤은 사용할수 있을것 같네요.

여담이지만 본 블로그를 jekyll로 구성할려고 자료를 정리했다가 hexo로 변경하여 설치하면서 정리했던 내용을 기록으로 남깁니다.

설치

jekyll을 사용하기 위해서는 루비를 설치해야 됩니다. 각각의 OS 별 루비 설치는 아래 링크를 확인하세요 전 mac을 사용 하므로 mac설치법을 보고 그대로 진행 하겠습니다. https://jekyllrb-ko.github.io/docs/installation/macos/
https://jekyllrb-ko.github.io/docs/installation/

맥OS 카탈리나 버전에서는 루비가 기본 탑재되어 있다고 하네요… 그래서 바로 지킬 설치를 진행하겠습니다.

$ gem install bundler jekyll

설치가 완료되고 나면 아래와 같은 결과를 확인할수 있습니다.

Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Done installing documentation for bundler after 2 seconds
Successfully installed jekyll-4.1.0
Parsing documentation for jekyll-4.1.0
Done installing documentation for jekyll after 0 seconds
2 gems installed

우선 설치까지만 하고 github 사이트에 내계정명과 동일한 repository를 만듭니다.
Github 계정생성하는 부분은 https://codingsarang.github.io/2020/07/08/opensource/githubCreate/ 링크를 클릭하여 확인 하세요

우측 상단의 + 버튼을 클릭하고 New repository 메뉴를 선택합니다.

Repository Name을 “계정명.github.io”라고 입력하고 Initialize this repository with a README 부분에 체크하고 Create repository 버튼을 클릭 합니다.

Create new file 버튼을 클릭합니다.

New file name 에는 index.html을 입력하고 edit new file에 아래와 같은 html을 작성한후 commit 로그를 작성하고 commit new file버튼을 클릭하여 index.html 을 생성합니다.

html 내용

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="liked">좋아요 눌렀음</div>
        <button v-else v-on:click="onClickButton">like</button>
    </div>    
</body>
<script>
    const app = new Vue({
        el: '#root',
        data: {
            liked : false,
        },
        methods: {
            onClickButton() {
                this.liked = true;
            }
        },
    });
</script>
</html>

아래처럼 https://계정명.github.io/index.html을 실행하면 아래와 같은 화면이 출력됩니다.(참고로 위 index.html vue.js 를 이용하여 만들었음)

처음부터 끝까지 블로그를 만드는건 비효율적이라 생각하여 나와 맞는 테마를 찾아서 github clone을 통하여 초기 셋업을 진행합니다.
아래 사이트를 그래로 복사해서 진행하겠습니다.

https://github.com/passbolt/passbolt_help

※ 해당 템플릿은 Passbolt help code is distributed under the Affero General Public License v3 Passbolt help text is distributed under Creative Common BY-SA-4.0 이런 라이선스 정책을 가지고 있어 사용해도 문제가 되지 않습니다.

Creative Common BY-SA-4.0 라이선스 정책

아래 명령어를 입력하여 복제를 진행 합니다.

git clone https://github.com/passbolt/passbolt_help.git

위에 명령어를 실행하면 아래와 같이 정상 복제 되었음을 확인할수 있습니다.

Cloning into 'passbolt_help'...
remote: Enumerating objects: 1015, done.
remote: Counting objects: 100% (1015/1015), done.
remote: Compressing objects: 100% (546/546), done.
remote: Total 10735 (delta 741), reused 665 (delta 443), pack-reused 9720
Receiving objects: 100% (10735/10735), 37.08 MiB | 9.08 MiB/s, done.
Resolving deltas: 100% (8301/8301), done.

복제된 디렉토리로 이동후 jekyll build 수행합니다.

cd passbolt_help
bundle exec jekyll build

실행결과

Configuration file: /Users/opensourcereporter/passbolt_help/_config.yml
            Source: /Users/opensourcereporter/passbolt_help
       Destination: docs
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 3.849 seconds.
 Auto-regeneration: disabled. Use --watch to enable.

서버실행

bundle exec jekyll serve

실행결과

  Server running... press ctrl-c to stop.
[2020-06-17 00:30:47] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:19 
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `eof?'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `run'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/server.rb:307:in `block in start_thread'
[2020-06-17 00:30:47] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:20 
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `eof?'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `run'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/server.rb:307:in `block in start_thread'
[2020-06-17 00:30:47] ERROR Errno::ECONNRESET: Connection reset by peer @ io_fillbuf - fd:18 
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `eof?'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/httpserver.rb:82:in `run'
	/Users/comganet/.rvm/rubies/ruby-2.5.8/lib/ruby/2.5.0/webrick/server.rb:307:in `block in start_thread'

웹 브라우저에서 확인하면 아래와 같은 화면을 확인할수 있습니다.
http://127.0.0.1:4000/

이제 복제된 파일들을 내 github 계정에 올립니다.

Command 스페이스바를 눌러서 github desktop을 실행 합니다.

github desktop설치는 아래 post를 참고하세요

https://codingsarang.github.io/2020/07/10/opensource/githubDesktop/

아래 그림과 같이 추가된 파일들을 publish하기위해 아래 그림처럼 적당하게 commnet를 입력하고 commit to master 버튼을 클릭 합니다.

그리고 나서 우측에 Pull Origin버튼을 클릭 합니다.

Pull origin

아래 사이트 들어가면 로컬에서 생성된것과 동일한 github 페이지를 확인할수 있습니다.
https://계정명.github.io/index.html

Github Desktop 설치

goodsaem — Tue, 27 Jul 2021 23:20:11 +0900

Github Desktop 설치

Github Desktop을 설치해서 사용하시면 콘솔창을 통해서 git 명령어를 입력하는것 보다 훨씬 편리한 방법으로 github에 내용을 올릴수 있습니다. Github desktop 실행시켜 변경된 사항이 있으면 한눈에 확인하고 간단하게 마우스 클릭만으로 소스를 올릴수 있는 Github Desktop 설치법과 간단 사용법에 대해서 알아 보겠습니다.

설치방법

https://desktop.github.com/ url에 접속하여 파일을 다운로드 받습니다.

다운로드 받은 파일을 실행하고 잠시 기다리면 설치가 완료되고 아래와 같은 화면을 볼수 있습니다.

인증버튼을 누르고 나면 웹브라우저가 오픈되면서 Github Desktop을 인증받겠냐는 메시지가 나옵니다. 확인을 눌러 인증을 진행합니다.

continue 버튼을 클릭합니다.

Finish 버튼을 클릭하여 설치를 완료합니다.

Github에 Repository 만들기

http://github.com/계정명 으로 접속하여 Github Repository 에서 동일한 계정명으로 repository를 생성합니다.
사이트에 접속한후 Repositories 탭을 선택한후 New 버튼을 클릭합니다.

Repository name 에 계정명을 그대로 입력하고 Create repository 버튼을 클립합니다.

여기까지 진행하면 아래와 같이 완료된 화면을 확인할수 있습니다.

Github Desktop 사용하기

1 Setup in Desktop 버튼을 클릭하여 Github Desktop을 실행합니다. 2 그리고 Clone버튼을 클릭하여 Local Path에 Clone을 진행 합니다.

Open in Visual Studio Code를 실햅합니다. (Visual Studio Code는 설치되어 있어야 실행이 가능합니다.)

index.html 파일을 하나생성하고 html 이라고 입력하면 팝업이 뜨는데 이중에서 html:5를 선택합니다.

html5를 선택하면 아래와 같은 코드가 자동으로 생성됩니다.

아래와 같이 내용을 수정하고 저장 합니다.

열려져 있는 Github Desktop에 아래와 같이 index.html이 추가된것을 알수 있습니다.

Description에 어떤 내용이 변경되었는지 적어 주고 Commit to master 버튼을 클릭 합니다.
Push origin 버튼을 클릭하여 작성한 html 문서를 발행합니다.

github 사이트에 들어가면 index.html 이 반영되어 있음을 확인할수 있습니다.

아래와 같이 내용을 수정하고 저장하기 버튼을 클릭합니다.

아래 그림과 같이 어떤 내용이 수정되었는지 확인이 가능합니다. 변경된 수정내용을 작성하고 Commit to master 버튼을 클릭 합니다.

Push origin 버튼을 클릭하여 내용을 갱신 합니다.

아래와 같이 github에서 변경된 내용 확인이 가능 합니다.

Github 계정생성

goodsaem — Tue, 27 Jul 2021 22:37:17 +0900

Github 계정생성

소스코드 형상관리를 위한 Github 계정 생성방법

사용자 계정 생성

http://www.github.com 접속합니다. 그리고 나서 Sign up for GitHub 버튼을 클릭하여 계정을 생성합니다. 이름 이메일등 필요한 정보를 등록합니다.

아래와 같이 항목을 선택하고 complete 버튼을 클릭하면 이메일 인증 메일이 발송됩니다.

받은 메일함에서 인증 버튼을 클릭하여 이메일 인증을 진행 합니다.

가입시 등록했던 이메일 주소와 비밀번호를 입력하면 이메일 인증이 완료됩니다. 여기까지 잘 따라 하셨다면 계정생성이 완료되었습니다.

파이썬 공부를 위한 아나콘다 설치

goodsaem — Tue, 27 Jul 2021 21:02:14 +0900

아나콘다(Anaconda)를 사용하는 이유

파이썬은 인기가 많은 언어입니다. 저와는 인연이 없어서 사용할 일이 없었는데 요즘 인공지능에 대한 관심이 많아지고 회사에서도 파이썬을 이용하는 개발자분들이 증가하고 있어 저도 준비를 해야겠다는 생각에 파이썬 개발환경을 구축해 보고자 합니다. 인터넷 시용이 제한 되는 환경이라면 파이썬 패키지를 다운로드 받거나 업데이트는 진행할수 있습니다. 이때 사용할수 있는 방법이 인터넷이 되는 환경에서 아나콘다 의 conda 시스템을 통해서 패키지를 업데이트한후 전체를 압축한후 사용하면 인터넷 사용 제한에 따른 문제를 해결할수 있습니다. 이에 저는 아나콘다를 사용합니다.

아나콘다 설치

https://www.anaconda.com/products/individual#windows 에서 다운로드 버튼을 클릭하여 다운로드를 실행합니다.

다운로드 받은 파일을 실행하여 Next > Next 하여 설치를 진행합니다.

설치 완료후 Anaconda Navigator 아이콘을 클릭하여 아나콘다를 실행합니다.

실행화면에서 쥬피터 노트북을 선택합니다.

New 콤보박스를 선택하여 Python3을 실행합니다.

1+1 을 실행하여 결과를 확인합니다. 여기까지 하시면 아나콘다 설치 및 쥬피터 노트북 테스트가 완료되었습니다.

파이썬(python) + 오픈 API(open api) 를 이용한 아파트 매매 실거래 가격 가져오기

goodsaem — Tue, 27 Jul 2021 20:12:59 +0900

파이썬(python) + 오픈 API(open api) 를 이용한 아파트 매매 실거래 가격 가져오기

공공데이터 open api 이용하기

공공데이터 포털 https://www.data.go.kr/ 라는 곳이 있습니다. 공공기관이 생성 또는 취득하여 관리하고 있는 공공데이터를 한 곳에서 제공하는 통합 창구 이며 국민이 쉽고편리하게 공공데이터를 이용할 수 있도록 파일데이터, 오픈API, 시각화 등 다양한 방식으로 제공하고 있으며, 누구라도 쉽고 편리한 검색을통해 원하는 공공데이터를 빠르고 정확하게 찾을 수 있는 곳입니다.

제가 오늘 이용하고자 하는 부동산 실거래 가격도 이곳에 등록되어 있습니다.

공공데이터를 제공해주는 https://www.data.go.kr/ 접속합니다.
회원 가입을 진행합니다.
데이터 찾기에서 “아파트매매 실거래자료” 라고 입력하고 검색 아이콘을 클릭합니다.

검색 결과에서 아래 내용을 선택합니다.

해당 자료를 클릭하면 아래와 같은 정보를 확인할수 있습니다. 활용사례 탭을 클릭해보니 호갱노노 에서도 사용하고 있습니다. 제가 원하는 부동산 실거래 가격 이 맞네요 [활용신청] 버튼을 클릭하여 Api 신청을 진행합니다.

Api 신청이 완료되면 아래와 같이 마이페이지에에서 api 승인결과를 알수 있습니다

아파트 매매 신고정보 조회 기술문서.hwp 파일을 열어서 api 사용하는 방법에 대해서 확인해 보겠습니다.

상세기능 설명부분을 보시면 행정 표준코드 관리시스템 의 법정동 5자리와 계약년월 정보를 넘겨 데이터를 받는 구조입니다.

아래는 요청 메시지 명세서 입니다

아래는 응답 메시지 명세서 입니다.

실제 데이터 가져오는 코드 작성

실제로 데이터를 가져오는 코드를 작성해보겠습니다.

import webbrowser

def getRTMSDataSvcAptTrade(LAWD_CD,DEAL_YMD,serviceKey): 
    url="http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade" 
    url=url+"?&LAWD_CD="+LAWD_CD
    url=url+"&DEAL_YMD="+DEAL_YMD
    url=url+"&serviceKey="+serviceKey
    webbrowser.open(url)
    return
    
getRTMSDataSvcAptTrade('11110','202001','일반 인증키를 입력해주세요')

위에 코드를 실행하면 아래와 같이 xml 데이터를 받을수 있습니다.

ㅌ

데이터 가공하기

가져온 데이터를 데이터 베이스화 하기 위해 BeautifulSoup,Pandas란 라이브러리를 사용하겠습니다. BeautifulSoup 은 HTML 및 XML 파일에서 원하는 데이터를 손쉽게 Parsing 할 수 있는 Python 라이브러리 이며 Pandas는 파이썬에서 사용하는 데이터분석 라이브러리로, 행과 열로 이루어진 데이터 객체를 만들어 다룰 수 있게 되며 보다 안정적으로 대용량의 데이터들을 처리하는데 매우 편리한 도구 입니다.

2개의 Python를 이용하여 xml을 파싱하고 데이터를 분석해보겠습니다.

아래 코드를 작성해 주세요.. 인증코드 부분은 자신이 받은 인증키를 넣어주세요.

from bs4 import BeautifulSoup
import pandas as pd
import urllib.request

req = urllib.request

def getRTMSDataSvcAptTrade(LAWD_CD,DEAL_YMD,serviceKey): 
    url="http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade" 
    url=url+"?&LAWD_CD="+LAWD_CD
    url=url+"&DEAL_YMD="+DEAL_YMD
    url=url+"&serviceKey="+serviceKey
    
    xml = req.urlopen(url)
    result = xml.read()
    soup = BeautifulSoup(result, 'lxml-xml')    
    
    items = soup.findAll("item")
    aptTrade = pd.DataFrame()
    
    for item in items:
        dealAmount          = item.find("거래금액").text
        buildYear           = item.find("건축년도").text
        dealYear            = item.find("년").text
        dong                = item.find("법정동").text
        apartmentName       = item.find("아파트").text
        dealMonth           = item.find("월").text
        dealDay             = item.find("일").text
        areaForExclusiveUse = item.find("전용면적").text
        jibun               = item.find("지번").text
        regionalCode        = item.find("지역코드").text
        floor               = item.find("층").text
        buildYear           = item.find("건축년도").text
        
        temp = pd.DataFrame(([[dealAmount,buildYear,dealYear,dong,apartmentName,dealMonth,dealDay,areaForExclusiveUse,jibun,regionalCode,floor,buildYear]]), columns=["dealAmount","buildYear","dealYear","dong","apartmentName","dealMonth","dealDay","areaForExclusiveUse","jibun","regionalCode","floor","buildYear"]) 
        aptTrade=pd.concat([aptTrade,temp])
    
    aptTrade=aptTrade.reset_index(drop=True)
    return aptTrade

getRTMSDataSvcAptTrade('11140','202006','인증코드')

실행결과는 아래와 같습니다. 원하는 데이터를 잘 가져왔습니다.

법정동 코드 데이터베이스화 하기

api에서 인자로 넘겨줘야 될 법정코드(LAWD_CD)이 값을 알아야 되는데요.. 이값은 api설명문서에 있는 http://code.go.kr 을 통해서 데이터를 확보하겠습니다. 해당 사이트에 접속한후 자주 이용하는 코드 부분의 2번항목 법정동 메뉴를 클릭합니다.

법정동코드 전체 다운로드 버튼을 클릭하세요

다운로드 파일을 열어보면 아래와 같은 문자열로 구성되어 있습니다.

법정동코드	법정동명	폐지여부
1100000000	서울특별시	존재
1111000000	서울특별시 종로구	존재
1111010100	서울특별시 종로구 청운동	존재
...

1~3 번째 row까지 지우고 아래와 같은 형태로 변경합니다. 이렇게 변경하는 이유는 텍스트파일을 읽어서 Pandas dataframe형태로 변경한후 sqllite에 손쉽게 데이터를 넣기 위함입니다.

dong_cd	do	si	my	ri	exyn
1111010100	서울특별시 종로구 청운동	존재
1111010200	서울특별시 종로구 신교동	존재
1111010300	서울특별시 종로구 궁정동	존재
1111010400	서울특별시 종로구 효자동	존재
1111010500	서울특별시 종로구 창성동	존재
1111010600	서울특별시 종로구 통의동	존재
1111010700	서울특별시 종로구 적선동	존재
1111010800	서울특별시 종로구 통인동	존재

파일명을 cd.txt로 바꾸고 쥬피터 노트북에서 python코드 작성중인 곳에 적당한 폴더에 위치합니다.

아래 파이썬 코드를 실행하면 conn.db에 dong이란 테이블이 만들어 집니다.

import pandas as pd
import sqlite3

con  = sqlite3.connect("files/conn.db")
df = pd.read_csv('files/cd.txt', sep = "\t", engine='python', encoding = "cp949")
df.to_sql('dong',con,schema=None,if_exists='replace',index=None,index_label=None, chunksize=None, dtype=None)
con.close()

sqlite db viewer로 테이블이 구조와 데이터를 확인합니다.

부동산 실거래 db 구축하기

아래와 같은 순서대로 코딩하겠습니다. 부동산 실거래 데이터가 언제부터 존재하는지 확인한 결과 2006년1월부터 데이터가 존재 했습니다. for문 사용해서 2006년 01월부터 2020년 07월 현재까지 모든 데이터를 가져오고 싶었지만 데이터량이 너무 많아서 데이터 베이스 구축할때 타임아웃이 발생하여 1년씩 데이터 베이스를 생성하겠습니다. 1년생성하고 또 1년생성하고 총 15번 정도 아래 코드를 실행하겠습니다. 아래 코드중 아래 4가지 변수값을 수정해서 데이터를 생성하시기 바랍니다.

sYear  = 2011
eYear  = 2011
sMonth = 1
eMonth = 12

코드 간단설명

법정동 정보 5자리를 distinct 해서 가져옵니다.
가져오고자 하는 년도를 입력합니다.
1~12월까지 데이터를 가져오도록 코드를 작성합니다.

import sqlite3
from bs4 import BeautifulSoup
import pandas as pd
import urllib.request

req = urllib.request

def getRTMSDataSvcAptTrade(LAWD_CD,DEAL_YMD,serviceKey): 
    url="http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade" 
    url=url+"?&LAWD_CD="+LAWD_CD
    url=url+"&DEAL_YMD="+DEAL_YMD
    url=url+"&serviceKey="+serviceKey
    
    xml = req.urlopen(url)
    result = xml.read()
    soup = BeautifulSoup(result, 'lxml-xml')    
    
    items = soup.findAll("item")
    aptTrade = pd.DataFrame()
    
    for item in items:
        dealAmount          = item.find("거래금액").text        
        dealYear            = item.find("년").text
        dong                = item.find("법정동").text
        apartmentName       = item.find("아파트").text
        dealMonth           = item.find("월").text
        dealDay             = item.find("일").text
        areaForExclusiveUse = item.find("전용면적").text
        regionalCode        = item.find("지역코드").text
        floor               = item.find("층").text
        
        try:
            jibun = item.find("지번").text
        except:
            jibun = ""
        
        try:
            buildYear = item.find("건축년도").text
        except:
            buildYear = ""
        
        temp = pd.DataFrame(([[dealAmount,buildYear,dealYear,dong,apartmentName,dealMonth,dealDay,areaForExclusiveUse,jibun,regionalCode,floor]]), columns=["dealAmount","buildYear","dealYear","dong","apartmentName","dealMonth","dealDay","areaForExclusiveUse","jibun","regionalCode","floor"]) 
            
        
        aptTrade=pd.concat([aptTrade,temp])
    
    aptTrade=aptTrade.reset_index(drop=True)
    return aptTrade


con  = sqlite3.connect("files/conn.db")
cursor = con.cursor()

sYear  = 2011
eYear  = 2011
sMonth = 1
eMonth = 12

rows = cursor.execute('''select distinct substr(dong_cd,0,6) from dong ''')
silTrade = pd.DataFrame()

for row in rows:    
    if row[0][2:3] != '0':
        for i in range(sYear, eYear+1, 1):
            for j in range(sMonth, eMonth+1, 1):
                yy = str(i)
                mm = str(j)
                if(j < 10): mm = '0' + str(j);

                temp = getRTMSDataSvcAptTrade(row[0],yy+mm,'인증키')
                silTrade = pd.concat([silTrade,temp])
silTrade.to_sql('sil_trade',con,if_exists='append',index=False)
    
con.close()

아래 sql을 실행하여 데이터 갯수를 확인합니다.

select count(*) from sil_trade where 1=1

[vue.js] 컴포넌트

goodsaem — Mon, 26 Jul 2021 22:37:31 +0900

vue 컴포넌트

vue 는 컨포넌트로 시작해서 컨포넌트로 끝난다라고 생각하시면 됩니다.. 이 컨포넌트에 대해서 잘알고 있으면 앞으로 문법들이나 예제들을 보는데 도움이 될것 같아 정리해 보겠습니다.

CBD(Component Based Development)

CBD 는 시스템을 일체형으로 구축하지 않고 레고 블록 부품 하나씩을 조립해서 큰 레고 블록을 만드는 것처럼 시스템의 구성요소들을 컨포넌트라는 작은 요소로 분리하여 하나씩 만들고 이를 조립해서 하나의 시스템을 만든다는 개념입니다.

아래 app 은 총 5개의 컨포넌트로 이루어져 있습니다.

팝업된 윈도우 자체가 컴포넌트 입니다. 이컨포넌트는 윈도우 제목과 창닫기 버튼이 있습니다. 창닫기 버튼을 클릭하면 창을 닫는 역할을 수행합니다.
메모 3,4,5를 가지고 있는 부모 컨포넌트 입니다. 2번 화면에서 데이터를 저장하고 메모리스트를 가지고 오는 로직이 들어 있지만 화면은 존재하지 않습니다.
메모 상단에 위치한 컨포넌트 입니다.
메모를 작성하는 컴포넌트 입니다. 제목과 내용을 입력받아 저장버튼을 클릭하면 입력받은 글을 부포 컨포넌트에게 전달합니다.
댓글 리스트 컨포넌트로 댓글 배열을 받아서 리스트업하고 수정이나 삭제 버튼을 클릭하면 부모에게 수정및 삭제 이벤트를 발생합니다

왜 이렇게 개발할까요 ? 그냥 하나로 개발하면 되는데 왜 복잡하게 이렇게 개발하는 걸까요 ? 만든 컴포넌트를 재사용하기 위해서 입니다. 위에 5번 댓글 컨포넌트는 상당히 많이 사용되죠 ? 메모 app 에서도 사용될수 있지만 게시판의 글 보기 app 에도 사용될수 있습니다. 같은 기능을 계속 개발한다면 시간도 많이 들어가고 유지보수 하기도 힘들꺼에요 예를 들어 모든 댓글의 아이콘을 바꾼다고 가정하면 이걸 일일이 찾아서 모두 변경해 줘야 되죠 하지만 컴포넌트를 불러와서 사용했다면 하나만 수정하면 모든 app 들의 아이콘이 한번에 변경됩니다. 컨포넌트 기반으로 개발하면 불필요한 코딩을 줄일수 있고 유지 보수도 용이해 집니다. 그리고 실력있는 고참 개발자분들이 컨포넌트를 잘 만들어 놓았다면 화면을 개발하는 개발자는 해당 app 에서 사용하는 데이터 모델과 비지니스 프로세스만 잘 구현하고 실제 구현에 필요한 개발공수는 줄어듭니다. 그래서 cbd 기반으로 개발을 진행합니다.

예제

아래와 같은 tab 컴포넌트는 여러화면에서 사용하는 컴포넌트 입니다. 이름이 default 로 선택되어져 있는데 "나이"가 default 선택된 탭을 하나더 만든다고 가정하면 컴포넌트를 사용하지 않으면 중복된 코드들이 존재 할수 있습니다. 이렇게 공통으로 사용하는 탭 같은경우에는 컨포넌트로 만들어서 active 되는 탭만 props 로 지정해서 넘겨주고 props 값에 따라 default 선택 탭을 변경하면 됩니다.

실습

EleTab.vue

<template>
  <div id="tab">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in tabInfo" :key="index" :label="item" :name="item">
        {{ tabInfo.concat(',') }} 중 {{item}}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
export default {
  name: "EleTab",
  props: {
    tabInfo: Array,
    active : String,
  },
  data() {
    return {
      activeName : ''
    }
  },
  methods: {
    handleClick() {
      this.$emit("ele-tab-click",this.activeName);
    }
  },
  watch: {
    active: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if(newValue !== oldValue) this.activeName = newValue;
      }
    }
  }
}
</script>
 
<style scoped></style>

Page6.vue

<template>
  <div>
    <el-row>
      <el-col :span="24">
        하위 컴포넌트가 전달한값 : {{ sendData }}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <ele-tab @ele-tab-click="handleClick" :tabInfo="[ '이름' , '나이' , '성별' , '하는일']" active="이름" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <ele-tab @ele-tab-click="handleClick" :tabInfo="[ '이름' , '나이' , '성별' , '하는일']" active="나이" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <ele-tab @ele-tab-click="handleClick" :tabInfo="[ '지역' , '기업' , '종교' , '취미' ,'기타1', '기타2']" active="취미" />
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import EleTab from "@/components/EleTab";
export default {
  name: "Page6",
  components: {
    EleTab
  },
  methods: {
    handleClick(data) {
      this.sendData = data;
    }
  },
  data() {
    return {
      sendData : '',
    }
  }
}
</script>
 
<style scoped></style>

코드설명

EleVue 컴포넌트는 element-ui 컴포넌트중 탭 컴포넌트를 사용했고 Page6.vue에서 만든 해당 컴포넌트를 재활용하는 형태로 구현했습니다.

[vue.js] 소개

goodsaem — Mon, 26 Jul 2021 21:16:02 +0900

Vue.js 소개

Vue.js는 React.js와 함께 가장 인기있는 자바스크립트 프레임워크 중의 하나입니다. 아래 Vue 의 Market Position 을 확인해 보면 React 보다는 조금 떨어지지만 많이 사용하고 있는 라이브러리임을 확인 할수 있습니다.

Vue.js는 React.js 보다 배우기 쉽다는 장점 때문에 지속 성장하는 추세입니다. 아래는 웹사이트에 채택하는 자바스크립트 트랜드를 보여 주는 표입니다. Vue.js 대비 어려운 Angular 는 떨어지고 React 는 상승세 이긴 하지만 vue js 보다는 상승세가 높지 않네요.

Vue.js 한국어 사이트https://kr.vuejs.org/ (opens new window)에 가보면 문서 번역이 잘되어 있습니다. 하지만 생각보다 예제가 많지 않았습니다. 그래서 vue.js 강좌를 진행하면서 기술을 정리하고 예제도 많이 만들어서 Vue.js로 멋진 Single Page Application 을 만들어 보겠습니다.

카운터 증가/감소 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js 강좌 연습</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>

<div id="counter">
  Counter: {{ counter }}
   <button v-on:click="countPlus">카운터증가</button>
   <button v-on:click="countMinus">카운터감소</button>
</div>

<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  methods : {
  	countPlus() {
  		this.counter++;
  	},
  	countMinus() {
  		this.counter--;
  	}
  }
}

Vue.createApp(Counter).mount('#counter')</script>

</body>
</html>

실행결과

버튼을 클릭하면 카운터가 증가/감소 되는 것을 확인 할수 있습니다.

[vue.js] 개발 환경 구축하기

알 수 없는 사용자 — Sun, 25 Jul 2021 18:55:06 +0900

vue.js 개발 환경 구축하기

Vue.Js Frontend 개발을 위한 환경 설정 방법에 대해서 알아 보겠습니다.

Visual Studio Code 설치

설치 파일을 다운로드 합니다.
- https://code.visualstudio.com/docs/?dv=win (opens new window)
다운로드 받은 파일을 더블 클릭하여 설치를 진행합니다.

동의합니다를 선택하여 [다음][다음] 을 클릭하여 설치를 완료합니다

Visual Studio Extension 설치

vscode 에서 사용하는 vue.js 관련 유용한 플러그인을 설치합니다.

Vetur Extension : Vetur 플러그인은 Linting , Syntax-highlighting , Formatting등을 지원해 줍니다

vue peek Extention : vue콤포넌트를 통해 해당 콤포넌트 파일을 열어서 바로 수정할수 있는 기능을 지원해줍니다.

vue 2 snippets exteion : vue 코드 자동 완성 기능을 지원해줍니다

Chrome Plug-in 설치하기

크롬 플러그인이 설치되어 있으면 Vuex 를 사용시 컴포넌트의 상태변경을 추적할수 있으면 해당 상태 변경을 임의되로 변경하여 테스트 해볼수 있습니다. 아래 url 로 접속 하여 플러그인을 설치 합니다.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

node.js 설치

https://nodejs.org/ko/ (opens new window)사이트에 접속하신후 LTS 안정버전을 다운로드 받아서 설치를 진행합니다. 다음 다음을 클릭하여 default 로 설치합니다.

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

아래 명령어로 버전이 확인되면 정상 설치 완료된 상태 입니다.

node --version
v15.3.0

※ windows 한글깨짐 관련 문제는 아래 url 을 참고하세요.

https://blog.jiniworld.me/84

vue-cli 를 설치합니다.

npm i -g vue-cli

초기 프로젝트를 생성 합니다.

vue init webpack vstart
cd vstart
npm run dev

프로젝트가 정상적으로 생성되면 아래와 같은 그림을 볼수 있습니다.

[AWS 무료 서버구축-18/18] 메모앱 만들기 - frontend vue.js

알 수 없는 사용자 — Sun, 25 Jul 2021 18:15:09 +0900

메모앱 만들기 - frontend vue.js

aws 에 프리티어 서버를 만들고 도메인을 발급받고 jdk 를 설치하고 springboot app 까지 만든이유는 결국 vue.js로 화면을 만들기 위함 입니다. 초간단 메모 app을 만들어 보겠습니다.

화면디자인

만들화면에 대해서 대략적인 화면설계를 해보았습니다.

제목 내용에 해당하는 메모를 검색합니다.
체크박스 체크된 메모를 선택하고 삭제버튼을 클릭하면 체크된 메모를 삭제합니다.
등록 버튼을 클릭하면 우측의 등록 화면의 제목쪽으로 포커스를 이동합니다.
등록 버튼을 클릭하면 메모가 등록되고 좌측에 메모가 하나 추가 됩니다.
페이지 번호를 클릭하면 해당 페이지에 속하는 메모가 리스트업 됩니다.
좌측 메모리스트에서 row를 클릭하면 우측에 제목과 내용이 보이고 수정모드로 변합니다.
수정모드에서 수정 버튼을 클릭하면 메모가 수정되고 수정된 내용이 좌측 리스트에 반영됩니다.

화면개발

위 화면 설계서 되로 아래와 같이 화면을 개발해 보았습니다. 개발하다가 조금더 욕심이 생겨 전체 갯수도 표시하고 한페이지당 보여줄 갯수도 변경했습니다. 등록/검색 버튼을 클릭하여 app 이 제되로 동작하는 확인해 보세요. 참고로 아래 ui 컴포넌트는 element ui를 이용하여 개발 했습니다.

backend 서비스 수정

위 화면에서 사용하는 backend 관련 수정파일은 아래와 같습니다. 이전 강좌에서 아래 4개 파일만 수정하시고 수정되면 동일한 요령으로 build 해서 서버에 배포 하고 서비스를 재시작 합니다.

.
├── build.gradle
└── src
    └── main
        ├── java
        │ └── io
        │     └── github
        │         └── goodsaem
        │             └── api
        │                 ├── ApiApplication.java
        │                 ├── config
        │                 │ └── WebConfig.java
        │                 ├── controller
        │                 │ └── v1
        │                 │     └── MemoController.java
        │                 ├── entity
        │                 │ └── Memo.java
        │                 ├── repo
        │                 │ └── MemoJpaRepo.java
        │                 └── service
        │                     ├── IMemoService.java
        │                     └── MemoService.java
        └── resources
            ├── application.yml
            ├── banner.txt
            └── templates

MemoController.java

메모 검색 및 페이징 처리를 위해서 아래와 같이 /memo/search 컨트롤러를 추가했습니다. pageable jpa에서 지원해주는 객체로 페이징 처리를 위해 필요한 값 페이지당 보여줄 row 수와 현재페이지 정보를 넘겨주면 알아서 가져올 데이터량을 줄여 줍니다. 즉 query에 offset 과 limit 문장이 추가됩니다.

눈여겨 보아야 되는 부분은 다건 삭제 부분입니다. 삭제 기능은 여러건을 넘겨서 일괄 삭제하는데 pathVariable 로 /spring/v1/memo/1,2,3 이런씩으로 넘기면 이를 List로 받아서 for문을 돌리면서 하나씩 삭제 하는 부분입니다.

package io.github.goodsaem.api.controller.v1;

import io.github.goodsaem.api.entity.Memo;
import io.github.goodsaem.api.service.IMemoService;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.web.PageableDefault;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequiredArgsConstructor
@RestController
@RequestMapping(value = "/v1")
@Slf4j
public class MemoController {
    private final IMemoService iMemoService;

    @GetMapping(value = "/memo/search")
    public Page<Memo> searchMemo(@RequestParam String keyword, @PageableDefault(size=3,sort="id") Pageable pageable) {
        return iMemoService.searchMemo(keyword,pageable);
    }

    @GetMapping(value = "/memos")
    public List<Memo> readMemos() {
        return iMemoService.readMemos();
    }

    @GetMapping(value = "/memo/{id}")
    public Memo readMemo(@PathVariable long id) {
        return iMemoService.readMemo(id);
    }

    @PostMapping(value = "/memo")
    public Memo createMemo(@RequestBody Memo memo) {
        return iMemoService.createMemo(memo.getTitle(), memo.getContents());
    }

    @PutMapping(value = "/memo")
    public Memo updateMemo(@RequestBody Memo memo) {
        return iMemoService.updateMemo(memo.getId(), memo.getTitle(), memo.getContents());
    }

    @DeleteMapping(value = "/memo/{id}")
    public void deleteMemo(@PathVariable long id) {
        iMemoService.deleteMemo(id);
    }

    @DeleteMapping(value = "/memos/{ids}")
    public void deleteMemos(@PathVariable("ids") List<Long> ids) {
        for(Long id:ids) {
            iMemoService.deleteMemo(id);
        }
    }
}

MemoJpaRepo.java

검색조건을 가져오는 부분을 아래와 같이 @Query를 통해서 작성해 보았습니다. 이렇게 진행하지 않고 세련되게 작성하는 방법도 있을것 같은데 아직 jpa에 익숙하지 않아 내공이 쌓이면 따로 정리하겠습니다. 화면에서 검색어 keyword가 전달되면 제목 및 내용에서 찾는 간단한 sql 입니다. 정렬은 가장 마지막에 등록한 메모가 보이게 했구요 countQuery도 같이 작성하여 페이징 처리시 참고 합니다.

package io.github.goodsaem.api.repo;

import io.github.goodsaem.api.entity.Memo;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;

public interface MemoJpaRepo extends JpaRepository<Memo, Long> {
    Page<Memo> findAll(Pageable pageable);

    @Query(
        value = "SELECT m FROM Memo m WHERE m.title LIKE %:keyword% OR m.contents LIKE %:keyword% ORDER BY m.id DESC",
        countQuery = "SELECT COUNT(m.id) FROM Memo m WHERE m.title LIKE %:keyword% OR m.contents LIKE %:keyword%"
    )
    Page<Memo> findAllSearch(String keyword,Pageable pageable);
}

IMemoService.java

메모 검색을 사용하기 위한 searchMemo 메소드를 추가했습니다.

package io.github.goodsaem.api.service;
import io.github.goodsaem.api.entity.Memo;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;

import java.util.List;
public interface IMemoService {
    List<Memo> readMemos();
    Page<Memo> searchMemo(String keyword, Pageable pageable);
    Memo readMemo(long id);
    Memo createMemo(String title,String contents);
    Memo updateMemo(long id,String title,String contents);
    void deleteMemo(long id);
}

MemoService.java

메모 서비스에서 메모를 검색하는 부분을 구현했습니다.

package io.github.goodsaem.api.service;

import io.github.goodsaem.api.entity.Memo;
import io.github.goodsaem.api.repo.MemoJpaRepo;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;

import java.util.List;

@Slf4j
@Service
@RequiredArgsConstructor
public class MemoService implements IMemoService {
    private final MemoJpaRepo memoJpaRepo;

    @Override
    public List<Memo> readMemos() {
        return memoJpaRepo.findAll();
    }

    @Override
    public Page<Memo> searchMemo(String keyword, Pageable pageable) {
        Page<Memo> memo = memoJpaRepo.findAllSearch(keyword,pageable);
        return memo;
    }

    @Override
    public Memo readMemo(long id) {
        return memoJpaRepo.findById(id).orElse(null);
    }

    @Override
    public Memo createMemo(String title, String contents) {
        Memo memo = Memo.builder()
                .title(title)
                .contents(contents)
                .build();

        return memoJpaRepo.save(memo);
    }

    @Override
    public Memo updateMemo(long id, String title, String contents) {

        Memo memo = Memo.builder()
                .id(id)
                .title(title)
                .contents(contents)
                .build();

        return memoJpaRepo.save(memo);
    }

    @Override
    public void deleteMemo(long id) {
        memoJpaRepo.deleteById(id);
    }
}

FrontEnd 소스 상세설명

MemoCreate.vue

위 화면중 우측 부분 내용으로 메모를 등록하는 폼은 다른 화면에서 사용할수 있을것 같아 별도의 컴포넌트로 분리했습니다. MemoCreate를 호출하는 부모 컨포넌트는 memo 모델을 넘겨줍니다. 그럼 memo 모델의 값을 복제해서 화면에서 활용하고 데이터 수정이 끝나고 저장 버튼을 누르면 상위 컴포넌트에게 save 되었다고 알려(emit) 줍니다. 자세한 내용은 vue 강좌 때 다시 설명하겠습니다.

<template>
  <div style="margin-top: 10px">
    <el-row>
      <el-col :span="4" align="center">
        제목
      </el-col>
      <el-col :span="20">
        <el-input ref="title" placeholder="메모 제목을 입력하세요" v-model="memo.title"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-col :span="4" align="center">
        내용
      </el-col>
      <el-col :span="20">
        <el-input
            type="textarea"
            :rows="7"
            placeholder="Please input"
            v-model="memo.contents">
        </el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-col :span="24" align="center">
        <el-button type="primary" @click="saveMemo">저장</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "MemoCreate",
  props : {
    model : {
      type : Object,
    }
  },
  created() {
  },
  data() {
    return {
      memo : {
        id : -1,
        title : '',
        contents : '',
      },
    }
  },
  methods: {
    create() {
    },
    saveMemo() {
      this.$emit("save",this.memo)
    }
  },
  watch: {
    model(model)  {
      this.memo = Object.assign({},model);
      this.$refs.title.focus();
    }
  }
}
</script>
<style scoped></style>

Exam5.vue

검색 및 결과를 출력하는 컴포넌트 입니다. 화면을 그리는 부분 빼고 실제 코딩은 많지 않습니다.

<template>
  <div style="margin-top: 10px">
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="4" style="padding-right: 10px;">
            검색어 :
          </el-col>
          <el-col :span="12" style="padding-right: 10px;">
            <el-input @change="searchMemo"  v-model="keyword"></el-input>
          </el-col>
          <el-col :span="8" style="padding-left: 10px;">
            <el-button type="primary" @click="searchMemo">메모검색</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col>
            전체 : {{ total }}
            <el-button type="primary" @click="deleteMemo">삭제</el-button>
            <el-button type="primary" @click="createMemo">등록</el-button>
            <el-select v-model="size"
                       placeholder="한페이지당 row수"
                       @change="searchMemo"
            >
              <el-option
                  v-for="(row,index) in 100"
                  :key="index"
                  :label="row"
                  :value="row">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col>
            <el-row>
              <el-table
                  ref="table"
                  v-if="gridData.length >= 0"
                  @row-click="rowClick"
                  :data="gridData"
                  style="width: 100%">
                <el-table-column
                    type="selection"
                    align="center"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="id"
                    align="center"
                    label="번호"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="제목"
                    header-align="center"
                    style="width: 95%">
                </el-table-column>
              </el-table>
            </el-row>
            <el-row style="margin-top: 10px">
              <el-col>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="chgPage"
                    :current-page="page+1"
                    :page-size="size"
                    :total="total">
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" style="border-left: 1px solid #efefef;">
        <memo-create :model="memo" @save="saveMemo"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const URL = "https://goodsaem.ml/spring";
//const URL = "http://localhost:9090/spring";
import MemoCreate from "./MemoCreate";

export default {
  name: "Exam5",
  created() {
  },
  components: {
    MemoCreate
  },
  data() {
    return {
      page: 0,
      size : 3,
      total : 0,
      keyword: '',
      memo: {
        title: '',
        contents: '',
      },
      gridData: [],
    }
  },
  methods: {
    create() {
    },
    rowClick(v) {
      this.memo = v;
    },
    chgPage(page) {
      this.page=page-1
      this.searchMemo();
    },
    saveMemo(memo) {
      if (memo.id === -1) {
        this.$http.post(URL + '/v1/memo', memo).then((response) => {
          this.searchMemo();
        })
      } else {
        this.$http.put(URL + '/v1/memo', memo).then((response) => {
          this.searchMemo();
        })
      }
    },
    createMemo() {
      this.memo = Object.assign({
        id : -1,
        title : '',
        contents : '',
      })
    },
    deleteMemo() {
      let ids = "";
      this.$refs.table.selection.map(r => ids += r.id + ",");
      ids = ids.substring(0,ids.length-1);

      if(this.$refs.table.selection.length > 0) {
        this.$http.delete(URL + '/v1/memos/' + ids)
            .then((response) => {
              this.$message("정상적으로 삭제되었습니다.");
              this.searchMemo();
            })
      }
    },
    searchMemo() {
      this.$http.get(URL + '/v1/memo/search', {
        params: {
          keyword : this.keyword,
          page: this.page,
          size: this.size,
        }
      })
      .then((response) => {
        console.log(response)
        this.gridData = response.data.data.content;
        this.total = response.data.totalElements;
      })
    }
  }
}
</script>
<style scoped></style>

마치며

AWS에 프리티어 서버를 셋업하고 spring boot 로 백엔드를 만들고 fontend 는 vue.js 를통해서 앱을 만들어 보았습니다.

긴글 읽어 주셔서 감사합니다.

[AWS 무료 서버구축-17/18] 메모앱 만들기 - backend 서비스 만들기

알 수 없는 사용자 — Sun, 25 Jul 2021 17:31:10 +0900

메모앱 만들기

지금까지 구축한 aws 서버위에 간단한 메모 application을 만들어서 배포 하겠습니다

테이블 생성 및 초기데이터 적재

테이블을 생성하고 초기 데이터를 인서트 합니다.

아래 스크립트는 aws 의 mariadb 에서 실행합니다.

먼저 메모 테이블을 생성합니다.

CREATE TABLE `memo` (
  `id` bigint(20) NOT NULL,
  `contents` varchar(4000) NOT NULL,
  `title` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

자동증가 시퀀스 테이블을 만듭니다.

CREATE TABLE `hibernate_sequence` (
  `next_val` bigint(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

초기 데이터를 생성합니다.

INSERT INTO memo (id, contents, title) VALUES(1, '내용1', '제목1');
INSERT INTO memo (id, contents, title) VALUES(2, '내용2', '제목2');
INSERT INTO memo (id, contents, title) VALUES(3, '내용3', '제목3');

INSERT INTO hibernate_sequence (next_val) VALUES(4);

앱구조

springboot application 구조는 아래와 같습니다.

.
├── build.gradle
└── src
    └── main
        ├── java
        │ └── io
        │     └── github
        │         └── goodsaem
        │             └── api
        │                 ├── ApiApplication.java
        │                 ├── config
        │                 │ └── WebConfig.java
        │                 ├── controller
        │                 │ └── v1
        │                 │     └── MemoController.java
        │                 ├── entity
        │                 │ └── Memo.java
        │                 ├── repo
        │                 │ └── MemoJpaRepo.java
        │                 └── service
        │                     ├── IMemoService.java
        │                     └── MemoService.java
        └── resources
            ├── application.yml
            ├── banner.txt
            └── templates

build.gradle

특별한 내용은 없고 springboot 2.4.4 버전 사용 및 mariadb 와 jpa 라이브러리 추가및 lombok 플러그인을 추가했습니다.

buildscript {
	ext {
		springBootVersion = '2.4.4'
	}
	repositories {
		mavenCentral()
	}
	dependencies {
		classpath(
				"org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
	}
}

apply plugin: 'org.springframework.boot'
apply plugin: 'war'
apply plugin: 'io.spring.dependency-management'
sourceCompatibility = '1.8'
targetCompatibility = '1.8'

group = 'io.github.goodsaem'
version = '1.1'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.springframework.boot:spring-boot-autoconfigure'
	implementation("org.mariadb.jdbc:mariadb-java-client")

	compileOnly 'org.projectlombok:lombok'
	annotationProcessor 'org.projectlombok:lombok'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

test {
	useJUnitPlatform()
}

ApiApplication.java

springboot 시작 파일 입니다.

package io.github.goodsaem.api;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ApiApplication {

	public static void main(String[] args) {
		SpringApplication.run(ApiApplication.class, args);
	}
}

WebConfig.java

CORS 설정 파일입니다. 허용할 도메인에 대해서 아래와 같이 정의 합니다.

package io.github.goodsaem.api.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://goodsaem.github.io","http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE","OPTIONS");
    }
}

MemoController.java

restapi controller 입니다. 메모의 crud url 을 호출하면 해당 요청에 맞는 서비스를 호출하여 db 작업을 수행합니다

package io.github.goodsaem.api.controller.v1;

import io.github.goodsaem.api.entity.Memo;
import io.github.goodsaem.api.service.IMemoService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequiredArgsConstructor
@RestController
@RequestMapping(value = "/v1")
public class MemoController {
    private final IMemoService iMemoService;

    @GetMapping(value = "/memos")
    public List<Memo> readMemos() {
        return iMemoService.readMemos();
    }

    @GetMapping(value = "/memo/{id}")
    public Memo readMemo( @PathVariable long id) {
        return iMemoService.readMemo(id);
    }

    @PostMapping(value = "/memo")
    public Memo createMemo(@RequestParam String title,String contents) {
        return iMemoService.createMemo(title,contents);
    }

    @PutMapping(value = "/memo")
    public Memo updateMemo(@RequestParam long id, @RequestParam String title,String contents) {
        return iMemoService.updateMemo(id,title,contents);
    }

    @DeleteMapping(value="/memo/{id}")
    public void deleteMemo(@PathVariable long id) {
        iMemoService.deleteMemo(id);
    }

    @DeleteMapping(value="/memos")
    public void deleteMemos() {
        iMemoService.deleteMemos();
    }
}

Memo.java

memo entity 입니다.

package io.github.goodsaem.api.entity;

import lombok.*;
import javax.persistence.*;

@Builder
@Entity
@Setter
@Getter
@NoArgsConstructor
@AllArgsConstructor
@Table(name="memo")
public class Memo {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;

    @Column(nullable = false, length = 30)
    private String title;

    @Column(nullable = false, length = 4000)
    private String contents;
}

MemoJpaRepo.java

jpa를 사용하기 위해 jparepository를 상속 받습니다.

package io.github.goodsaem.api.repo;

import io.github.goodsaem.api.entity.Memo;
import org.springframework.data.jpa.repository.JpaRepository;

public interface MemoJpaRepo extends JpaRepository<Memo, Long> {
}

IMemoService.java

서비스 인터페이스 입니다.

package io.github.goodsaem.api.service;
import io.github.goodsaem.api.entity.Memo;
import java.util.List;
public interface IMemoService {
    List<Memo> readMemos();
    Memo readMemo(long id);
    Memo createMemo(String title,String contents);
    Memo updateMemo(long id,String title,String contents);
    void deleteMemo(long id);
    void deleteMemos();
}

MemoService.java

jpaRepo로 실제 crud 작업을 수행합니다.

package io.github.goodsaem.api.service;

import io.github.goodsaem.api.entity.Memo;
import io.github.goodsaem.api.repo.MemoJpaRepo;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Service;
import java.util.List;

@Slf4j
@Service
@RequiredArgsConstructor
public class MemoService implements IMemoService {
    private final MemoJpaRepo memoJpaRepo;

    @Override
    public List<Memo> readMemos() {
        return memoJpaRepo.findAll();
    }

    @Override
    public Memo readMemo(long id) {
        return memoJpaRepo.findById(id).orElse(null);
    }

    @Override
    public Memo createMemo(String title, String contents) {
        Memo memo = Memo.builder()
                .title(title)
                .contents(contents)
                .build();

        return memoJpaRepo.save(memo);
    }

    @Override
    public Memo updateMemo(long id, String title, String contents) {

        Memo memo = Memo.builder()
                .id(id)
                .title(title)
                .contents(contents)
                .build();

        return memoJpaRepo.save(memo);
    }

    @Override
    public void deleteMemo(long id) {
        memoJpaRepo.deleteById(id);
    }

    @Override
    public void deleteMemos() {
        memoJpaRepo.deleteAll();
    }
}

application.yml

appplication 설정 내용으로 mariadb 연결정보와 서비스 포트 context path 설정정보를 가지고 있습니다.

server:
  port: 9090
  servlet:
    context-path: /spring
    session:
      timeout: 60
      tomcat:
        uri-encoding: UTF-8

spring:
  datasource:
    driver-class-name: org.mariadb.jdbc.Driver
    url: jdbc:mariadb://localhost:3306/goodsaem?useSSL=false&serverTimezone=KST
    username: goodsaem
    password: xxxxxxxxxx
  jpa:
    database-platform: org.hibernate.dialect.MariaDBDialect
    properties.hibernate.hbm2ddl.auto: none
    showSql: true

spring boot 시작시 사용할 배너 입니다.

※ 배너는 http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20 여기에서 만들수 있습니다.

 ██████╗  ██████╗  ██████╗ ██████╗ ███████╗ █████╗ ███████╗███╗   ███╗
██╔════╝ ██╔═══██╗██╔═══██╗██╔══██╗██╔════╝██╔══██╗██╔════╝████╗ ████║
██║  ███╗██║   ██║██║   ██║██║  ██║███████╗███████║█████╗  ██╔████╔██║
██║   ██║██║   ██║██║   ██║██║  ██║╚════██║██╔══██║██╔══╝  ██║╚██╔╝██║
╚██████╔╝╚██████╔╝╚██████╔╝██████╔╝███████║██║  ██║███████╗██║ ╚═╝ ██║
 ╚═════╝  ╚═════╝  ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝
:: Spring Boot ::                         ver : ${spring-boot.version}

api-1.1.war 파일 만들기

프로젝트 시작 home 디렉토리에서 아래 명령어를 입력하여 war 파일을 만듭니다.

sh gradlew build

war file 업로드

aws 서버에 api-1.1.war 파일을 업로드 합니다.

springboot 재시작

aws 서버에 접속한후 아래 명령어를 입력합니다.

서비스 중지

ubuntu@goodsaem:~$ ./stop.sh
=====spring is running at 5808 Shutdown spring now

서비스 시작

ubuntu@goodsaem:~$ ./start.sh;./log.sh

시작 로그

 ██████╗  ██████╗  ██████╗ ██████╗ ███████╗ █████╗ ███████╗███╗   ███╗
██╔════╝ ██╔═══██╗██╔═══██╗██╔══██╗██╔════╝██╔══██╗██╔════╝████╗ ████║
██║  ███╗██║   ██║██║   ██║██║  ██║███████╗███████║█████╗  ██╔████╔██║
██║   ██║██║   ██║██║   ██║██║  ██║╚════██║██╔══██║██╔══╝  ██║╚██╔╝██║
╚██████╔╝╚██████╔╝╚██████╔╝██████╔╝███████║██║  ██║███████╗██║ ╚═╝ ██║
 ╚═════╝  ╚═════╝  ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝
:: Spring Boot ::                         ver : 2.4.4
2021-03-27 17:10:46.869  INFO 7734 --- [           main] io.github.goodsaem.api.ApiApplication    : Starting ApiApplication using Java 1.8.0_282 on goodsaem with PID 7734 (/home/ubuntu/api-1.1.war started by ubuntu in /home/ubuntu)
2021-03-27 17:10:46.874  INFO 7734 --- [           main] io.github.goodsaem.api.ApiApplication    : No active profile set, falling back to default profiles: default
2021-03-27 17:10:48.714  INFO 7734 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode.
2021-03-27 17:10:48.852  INFO 7734 --- [           main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 121 ms. Found 1 JPA repository interfaces.
2021-03-27 17:10:50.415  INFO 7734 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 9090 (http)
2021-03-27 17:10:50.442  INFO 7734 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2021-03-27 17:10:50.446  INFO 7734 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.44]
2021-03-27 17:10:51.931  INFO 7734 --- [           main] o.a.c.c.C.[.[localhost].[/spring]        : Initializing Spring embedded WebApplicationContext
2021-03-27 17:10:51.932  INFO 7734 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 4908 ms
2021-03-27 17:10:52.874  INFO 7734 --- [           main] o.hibernate.jpa.internal.util.LogHelper  : HHH000204: Processing PersistenceUnitInfo [name: default]
2021-03-27 17:10:52.986  INFO 7734 --- [           main] org.hibernate.Version                    : HHH000412: Hibernate ORM core version 5.4.29.Final
2021-03-27 17:10:53.296  INFO 7734 --- [           main] o.hibernate.annotations.common.Version   : HCANN000001: Hibernate Commons Annotations {5.1.2.Final}
2021-03-27 17:10:53.661  INFO 7734 --- [           main] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Starting...
2021-03-27 17:10:53.804  INFO 7734 --- [           main] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Start completed.
2021-03-27 17:10:53.848  INFO 7734 --- [           main] org.hibernate.dialect.Dialect            : HHH000400: Using dialect: org.hibernate.dialect.MariaDBDialect
2021-03-27 17:10:54.767  INFO 7734 --- [           main] o.h.e.t.j.p.i.JtaPlatformInitiator       : HHH000490: Using JtaPlatform implementation: [org.hibernate.engine.transaction.jta.platform.internal.NoJtaPlatform]
2021-03-27 17:10:54.779  INFO 7734 --- [           main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'
2021-03-27 17:10:55.548  WARN 7734 --- [           main] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning
2021-03-27 17:10:55.822  INFO 7734 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2021-03-27 17:10:56.395  INFO 7734 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 9090 (http) with context path '/spring'
2021-03-27 17:10:56.413  INFO 7734 --- [           main] io.github.goodsaem.api.ApiApplication    : Started ApiApplication in 10.795 seconds (JVM running for 11.987)

웹브라우저에서 확인

https://goodsaem.ml/spring/v1/memosurl 접근했을때 아래와 같은 문자열이 출력되면 정상입니다.

[
  {
    "id": 1,
    "title": "제목1",
    "contents": "내용1"
  },
  {
    "id": 2,
    "title": "제목2",
    "contents": "내용2"
  },
  {
    "id": 3,
    "title": "제목3",
    "contents": "내용3"
  }
]

전체소스 다운로드

지금까지 만든 소스는 아래 링크를 통해서 다운로드 가능합니다.

api2.zip

0.13MB

[AWS 무료 서버구축-16/18] SpringBoot 백그라운드에서 실행하기

goodsaem — Sun, 25 Jul 2021 16:50:20 +0900

SpringBoot 백그라운드에서 실행하기

아래 명령어로 샘플 프로젝트를 실행하면 foreground 로 명령어가 실행됩니다. ctrl + c 키를 눌러서 종료하면 프로세스가 종료됩니다. 명령어를 실행하고 나서 로그아웃을 하더라도 명령어가 계속 실행된 상태로 있을려면 background 로 명령어가 실행되어야 합니다.

java -jar hello-0.0.1-SNAPSHOT.war

background로 실행하는 프로세스를 만들기 위해 아래와 같이 start.sh 파일을 생성합니다.

ubuntu@goodsaem:~$ vi start.sh

nohup을 사용하여 출력을 nohup.out으로 보내고 명령어를 실행한다음 & 같이 입력하여 백그라운드에서 실행 되게 만듭니다.

nohup java -jar hello*.war &

그리고 나서 start.sh 실행 권한을 부여 합니다.

ubuntu@goodsaem:~$ chmod +x start.sh

stop 스크립트를 작성합니다.

ubuntu@goodsaem:~$ vi stop.sh

아래와 같이 입력합니다. 프로세스를 찾아서 kill 하는 명령어 입니다.

#!/bin/sh

PID=`ps -ef | grep java | grep war | awk '{print $2}'`
if [ -n "$PID" ]
then
  echo "=====spring is running at" $PID "Shutdown spring now"
  kill -9 $PID
else
  echo "=====spring isn't running====="
fi

저장하고 종료합니다. log 출력 스크립트를 작성합니다.

ubuntu@goodsaem:~$ vi log.sh

아래와 같이 입력합니다

tail -f nohup.out

stop.sh 와 log.sh 각각 실행권한을 부여합니다.

ubuntu@goodsaem:~$ chmod +X start.sh
ubuntu@goodsaem:~$ chmod +X log.sh

서비스를 시작합니다.

ubuntu@goodsaem:~$ ./start.sh;./log.sh

아래와 같은 로그 확인이 가능합니다.

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.4.4)

2021-03-27 02:23:27.115  INFO 3532 --- [           main] g.github.io.hello.HelloApplication       : Starting HelloApplication using Java 1.8.0_282 on goodsaem with PID 3532 (/home/ubuntu/hello-0.0.1-SNAPSHOT.war started by ubuntu in /home/ubuntu)
2021-03-27 02:23:27.124  INFO 3532 --- [           main] g.github.io.hello.HelloApplication       : No active profile set, falling back to default profiles: default
2021-03-27 02:23:29.570  INFO 3532 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 9090 (http)
2021-03-27 02:23:29.600  INFO 3532 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2021-03-27 02:23:29.606  INFO 3532 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.44]
2021-03-27 02:23:30.416  INFO 3532 --- [           main] o.a.c.c.C.[.[localhost].[/spring]        : Initializing Spring embedded WebApplicationContext
2021-03-27 02:23:30.416  INFO 3532 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3156 ms
2021-03-27 02:23:31.421  INFO 3532 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2021-03-27 02:23:31.886  INFO 3532 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 9090 (http) with context path '/spring'
2021-03-27 02:23:31.908  INFO 3532 --- [           main] g.github.io.hello.HelloApplication       : Started HelloApplication in 6.02 seconds (JVM running for 6.993)

이제 ctrl + c 를 해도 프로세스가 종료되지 않습니다.

서비스 종료

아래 명령어로 서비스를 종료 합니다.

ubuntu@goodsaem:~$ ./stop.sh;./log.sh
=====spring is running at 3532 Shutdown spring now

다시 서비스를 시작합니다.

ubuntu@goodsaem:~$ ./start.sh;./log.sh

테스트

이제 실제로 https 로 접속을 시도해 보겠습니다. http://goodsaem.ml/spring/goodsaem/string (opens new window) https 프로토콜을 이용하여 설정한 도메인으로 접속하니 아래 그림과 같이 정상적으로 화면이 나왔습니다.

[AWS 무료 서버구축-15/18] SSL 사이트 점검하기

goodsaem — Sun, 25 Jul 2021 16:35:59 +0900

SSL 사이트 점검하기

SSL이 제되로 생성되었는지 https://www.ssllabs.com/ssltest/analyze.html사이트에 접속하여 아래와 같이 도메인을 입력하고 점검을 수행합니다.

A 라고 표시되면 설정 상태가 정상입니다.

[AWS 무료 서버구축-14/18] 무료로 SSL 인증 받기

goodsaem — Sun, 25 Jul 2021 16:09:58 +0900

무료로 SSL 인증 받기

요즘 대부분은 사이트는 SSL 인증을 요구합니다. vue.js 공부를 위해 만든 https://goodsaem.github.io 사이트 역시 https로 동작하며 만약 여기에서 다른 사이트 데이터를 가져올려고 하면 https로만 통신이 됩니다. http로는 통신이 되지 않습니다. 그래서 ssl 인증 받는 부분을 추가 적용 합니다.

Let's Encrypt 와 Certbot을 이용한 ssl 무료 인증서를 발급 받는 방법에 대해서 알아 보겠습니다.

Diffie-Hellman 키 생성

https 인증서를 받기 위해서는 키가 필요합니다. 이 키 생성은 디피와 헬만이 1976년도에 발표한 비밀키 교환 방식의 알고리즘을 이용하여 생성합니다.이 알고리즘을 이용하여 4096 bit의 키를 생성하겠습니다. 아래 명령어로 키를 생성하는데 대략 10분정도 소요 되었습니다. 이키를 이용해서 https에서 비밀키를 교환하여 안정한 https 통신을 할수 있으므로 반드시 진행해야 되는 사항입니다.

ubuntu@goodsaem:~$ sudo openssl dhparam -out /etc/nginx/conf.d/ssl-dhparams.pem 4096

enerating DH parameters, 4096 bit long safe prime, generator 2
This is going to take a long time
...............................................................

Let's Encrypt + Certbot 무료인증

Let's Encrypt 는 사용자에게 무료로 SSL/TLS 인증서를 발급해 주는 기관 입니다. 한번 발급 받으면 90일간 사용이 가능하며 만료 30일전에 메일로 내용을 통보하면 그때 다시 갱신이 가능합니다. 인증서 발급은 certbot certbot-auto 를 이용하여 발급 및 갱신합니다.

certbot 등록을 위해 repository 등록을 진행합니다.

ubuntu@goodsaem:~$ sudo apt-get update
ubuntu@goodsaem:~$ sudo apt-get install software-properties-common
ubuntu@goodsaem:~$ sudo add-apt-repository universe
ubuntu@goodsaem:~$ sudo add-apt-repository ppa:certbot/certbot
ubuntu@goodsaem:~$ sudo apt-get update

certbot을 설치합니다.

ubuntu@goodsaem:~$ sudo apt-get install certbot

certbot nginx 플러그인을 설치 합니다.

ubuntu@goodsaem:~$ sudo apt-get install python-certbot-nginx

nginx에 서버 이름을 변경하기 위해 아래와 같이 입력합니다.

ubuntu@goodsaem:~$ sudo vi /etc/nginx/conf.d/default.conf

서버 네임을 freenom에서 발급받은 도메인으로 지정해 줍니다. 아래 server_name goodsaem.ml; 부분이 추가 되었습니다.

server {
    listen       80;
    server_name  goodsaem.ml;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /spring {
        proxy_pass http://localhost:9090/spring;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

이제 아래 certbot 명령어를 통해서 ssl 인증서를 발급받습니다. 인증서 발급시 사용할 admin email 주소와 이용약관 동의 옵션을 지정하여 인증서 발급을 받겠습니다.

ubuntu@goodsaem:~$ sudo certbot --nginx --email goodsaem@protonmail.com --agree-tos

위에 명령어를 입력하면 아래와 같은 형태로 진행되는데요 중요한 부분만 설명하겠습니다.

6 라인에 추가할 https 도메인이 보입니다.
9 라인에서 엔터를 입력합니다.
24 라인에서 2을 입력합니다. (http로 요청이 들어오면 https 로 redirect 하겠다는 의미 입니다.)

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator nginx, Installer nginx

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: goodsaem.ml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for goodsaem.ml
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/nginx/conf.d/default.conf

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 1

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://goodsaem.ml

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=goodsaem.ml
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/goodsaem.ml/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/goodsaem.ml/privkey.pem
   Your cert will expire on 2021-06-23. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

제되로 인증서 발급이 되었는지 확인해 보겠습니다. domain에 보시면 goodsaem.ml 도메인이 등록되어 있습니다. 또한 9,10 라인에 fullchain.pem 키와 privkey.pem 파일이 정상 생성되었음을 확인할수 있습니다.

ubuntu@goodsaem:~$ sudo certbot certificates
Saving debug log to /var/log/letsencrypt/letsencrypt.log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Found the following certs:
  Certificate Name: goodsaem.ml
    Domains: goodsaem.ml
    Expiry Date: 2021-06-24 14:32:16+00:00 (VALID: 89 days)
    Certificate Path: /etc/letsencrypt/live/goodsaem.ml/fullchain.pem
    Private Key Path: /etc/letsencrypt/live/goodsaem.ml/privkey.pem
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

nginx에 ssl 관련 설정이 등록되었는지 default.conf 내용을 확인해 보겠습니다. 51번라인부터 67번 라인까지 ssl 관련 설정이 자동으로 추가되었습니다.

server {
    server_name  goodsaem.ml;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /spring {
        proxy_pass http://localhost:9090/spring;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/goodsaem.ml/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/goodsaem.ml/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = goodsaem.ml) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen       80;
    server_name  goodsaem.ml;
    return 404; # managed by Certbot


}

letsencrypt 에 있는 Diffie-Hellman Key 를 아래와 같은 이름으로 백업합니다.

ubuntu@goodsaem:~$ cd /etc/letsencrypt/
ubuntu@goodsaem:~$  sudo mv ssl-dhparams.pem  ssl-dhparams.pem.backup

생성한 키 파일을 /etc/letsencrypt 로 복사합니다.

ubuntu@goodsaem:~$  sudo cp -rp /etc/nginx/conf.d/ssl-dhparams.pem /etc/letsencrypt/

nginx 를 재시작 합니다.

ubuntu@goodsaem:~$ sudo systemctl restart nginx

http 요청 https 로 자동포워딩

http://goodsaem.ml/ (opens new window)로 접속하면 https://goodsaem.ml/ 자동 포워딩되는지 확인합니다.

정상적으로 setup 되었다면 아래와 같은 화면을 확인할수 있습니다.

[AWS 무료 서버구축-13/18] Nginx Springboot 연동

goodsaem — Sun, 25 Jul 2021 15:53:07 +0900

Nginx Springboot 연동

http://goodsaem.ml/spring 로 접속하면 springboot가 응답하도록 nginx 설정을 변경하겠습니다

nginx 설정파일 수정

아래 명령어로 nginx 설정 파일을 수정 합니다.

ubuntu@goodsaem:~$ sudo vi /etc/nginx/conf.d/default.conf

아래와 같이 /spring 요청이 오면 14~17 라인 설정에 따라 springboot로 보내는 설정입니다. 그외 전체 nginx 설정이 있으니 참고 하시기 바랍니다

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /spring {
        proxy_pass http://localhost:9090/spring;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

Springboot 시작

업로드한 hello*.war 파일을 아래 명령어로 시작합니다.

ubuntu@goodsaem:~$ java -jar hello-0.0.1-SNAPSHOT.war

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.4.4)

2021-03-26 23:47:09.084  INFO 819 --- [           main] g.github.io.hello.HelloApplication       : Starting HelloApplication using Java 1.8.0_282 on goodsaem with PID 819 (/home/ubuntu/hello-0.0.1-SNAPSHOT.war started by ubuntu in /home/ubuntu)
2021-03-26 23:47:09.095  INFO 819 --- [           main] g.github.io.hello.HelloApplication       : No active profile set, falling back to default profiles: default
2021-03-26 23:47:11.586  INFO 819 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 9090 (http)
2021-03-26 23:47:11.617  INFO 819 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2021-03-26 23:47:11.617  INFO 819 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.44]
2021-03-26 23:47:12.505  INFO 819 --- [           main] o.a.c.c.C.[.[localhost].[/spring]        : Initializing Spring embedded WebApplicationContext
2021-03-26 23:47:12.505  INFO 819 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3273 ms
2021-03-26 23:47:13.495  INFO 819 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2021-03-26 23:47:13.927  INFO 819 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 9090 (http) with context path '/spring'
2021-03-26 23:47:13.955  INFO 819 --- [           main] g.github.io.hello.HelloApplication       : Started HelloApplication in 6.085 seconds (JVM running for 7.154)

springboot 테스트

http://goodsaem.ml/spring/goodsaem/string url 로 접속하여 아래와 같은 화면이 출력되면 nginx + springboot 연동 성공입니다.

안녕하세요 좋은 선생님 goodsaem! 입니다.

[AWS 무료 서버구축-12/18] Springboot 프로젝트 생성

goodsaem — Sun, 25 Jul 2021 15:48:01 +0900

Springboot 프로젝트 생성

aws freetier 리눅스 서버 구축 목적은 restapi 서버 역할입니다. 간단한 springboot 프로젝트를 생성 build 하여 war 파일을 만든다음 war 파일을 ec2 서버에 업로드 하는 부분까지 진행하겠습니다.

프로젝트 파일생성

https://start.spring.io/ 사이트에 접속하여 아래와 같이 입력합니다.

project 는 Gradle Project
Language 는 Java
Spring Boot 는 2.4.4
Group 은 goodsaem.github.io
Artifact 는 hello
Name 은 hello
Packaging 은 War 선택
Java 는 8 버전을 선택합니다.
그리고 나서 Generate 버튼을 클릭합니다.
파일을 다운로드 받고 적당한 위치에 압축을 푼후 해당 디렉토리로 이동합니다.

디렉토리 구조

압축을 풀고 나서 해당 디렉토리 구조를 확인하면 아래와 같습니다.

HelloController.java. 와 application.yml 파일을 추가합니다.

.
├── build.gradle
└── src
    ├── main
    │  ├── java
    │  │  └── goodsaem
    │  │      └── github
    │  │          └── io
    │  │              └── hello
    │  │                  ├── HelloApplication.java
    │  │                  ├── HelloController.java
    │  │                  └── ServletInitializer.java
    │  └── resources
    │      ├── application.yml
    │      ├── static
    │      └── templates
    └── test
        └── java
            └── goodsaem
                └── github
                    └── io
                        └── hello
                            └── HelloApplicationTests.java

HelloController.java

goodsaem/string url로 접속하면 "안녕하세요 좋은 선생님 goodsaem! 입니다." 라고 출력하는 간단한 컨트롤러 입니다.

package goodsaem.github.io.hello;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {

    private final String MSG="안녕하세요 좋은 선생님 goodsaem! 입니다.";

    @GetMapping(value = "/goodsaem/string")
    @ResponseBody
    public String getString() {
        return MSG;
    }
}

application.yml

서비스 포트를 9090 로 변경했고 context-path를 spring으로 지정하여 /spring으로 오는 요청은 모두 springboot에서 처리하게 만듭니다.

server:
  port: 9090
  servlet:
    context-path: /spring
    session:
      timeout: 60
      tomcat:
        uri-encoding: UTF-8

war파일 만들기

프로젝트 root 디렉토리에서 아래 명령어를 입력하면 war파일이 생성됩니다.

sh gradlew build

위 명령어를 실행하면 아래 위치에 hello-0.0.1-SNAPSHOT.war 파일이 생성됩니다.

.
└── build
      └── libs
            └── hello-0.0.1-SNAPSHOT.war

aws 에 파일업로드

파일 업로드는 파일 질라를 이용하서 진행하겠습니다.

호스트는 goodsaem.ml 이라고 입력합니다.
사용자는 ubuntu라고 입력합니다.
키파일은 aws ec2 서버 생성할때 만든 goodsaem.pem 파일을 선택합니다.
연결하기 버튼을 클릭하면 ec2 서버에 접속이 이루어 집니다.

libs 디렉토리에 hello-0.0.1-SNAPSHOT.war 파일을 사용자 home 디렉토리로 업로드 합니다.

[AWS 무료 서버구축-11/18]Open Jdk 1.8 설치

goodsaem — Sun, 25 Jul 2021 15:40:16 +0900

Open Jdk 1.8 설치

aws + ubuntu 18 linux 서버에 open jdk 설치 하는 방법입니다

설치

백엔드 서비스는 springboot에서 모두 처리할 예정입니다. springboot을 기동하기 위해 open jdk를 설치합니다.

ubuntu@goodsaem:~$ sudo apt install openjdk-8-jdk

jdk 버전확인

설치가 완료되었다면 jdk 버전을 확인합니다.

ubuntu@goodsaem:~$ java -version
openjdk version "1.8.0_282"
OpenJDK Runtime Environment (build 1.8.0_282-8u282-b08-0ubuntu1~18.04-b08)
OpenJDK 64-Bit Server VM (build 25.282-b08, mixed mode)

[AWS 무료 서버구축-10/18] Maria DB 유저 생성 및 권한 부여

goodsaem — Sun, 25 Jul 2021 15:36:49 +0900

Maria DB 유저 생성 및 권한 부여

mariadb 유저 생성 및 권한 주는 방법입니다.

생성한 데이터베이스를 사용할 유저를 생성합니다.

MariaDB [(none)]> CREATE USER goodsaem@localhost identified by 'xxxxxxxxxx';
Query OK, 0 rows affected (0.009 sec)

생성한 유저에게 신규 데이터베이스의 모든 권한을 부여 합니다.

MariaDB [(none)]> grant all privileges on goodsaem.* to 'goodsaem'@'localhost';
Query OK, 0 rows affected (0.012 sec)

변경된 내용을 적용합니다.

MariaDB [none]> flush privileges;
Query OK, 0 rows affected (0.000 sec)

[AWS 무료 서버구축-9/18] Maria DB 데이터 베이스 생성

goodsaem — Sun, 25 Jul 2021 15:34:36 +0900

Maria DB 데이터 베이스 생성

mariadb 에 접속합니다.

ubuntu@goodsaem:~$ sudo mariadb

아래 명령어로 데이터 베이스를 생성합니다.

MariaDB [(none)]> create database goodsaem;
Query OK, 1 row affected (0.001 sec)

생성된 데이터 베이스를 확인합니다.

MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| goodsaem           |
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
4 rows in set (0.001 sec)

[AWS 무료 서버구축-8/18] Maria DB 설치

goodsaem — Sun, 25 Jul 2021 15:17:47 +0900

Maria DB 설치

aws freeiter linux 서버에 mariadb 설치를 진행하겠습니다

설치

우선 repository 부터 아래와 같이 설정합니다.

ubuntu@goodsaem:~$ sudo apt-get install software-properties-common
ubuntu@goodsaem:~$ sudo apt-key adv --fetch-keys 'https://mariadb.org/mariadb_release_signing_key.asc'
ubuntu@goodsaem:~$ sudo add-apt-repository 'deb [arch=amd64,arm64,ppc64el] https://mirror.yongbok.net/mariadb/repo/10.5/ubuntu bionic main'

패키지를 업데이트한후 mariadb 설치를 진행합니다.

ubuntu@goodsaem:~$ sudo apt update
ubuntu@goodsaem:~$ sudo apt install mariadb-server -y

마리아 디비 버전을 확인합니다. 설치 시점의 최신 버전 10.5.9-MariaDB 으로 설치 되었습니다.

ubuntu@goodsaem:~$ mariadb -V
mariadb  Ver 15.1 Distrib 10.5.9-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2

보안설정

마리아 디비 보안 관련 설정을 진행 합니다.

ubuntu@goodsaem:~$ sudo mysql_secure_installation

상세 설정 내용은 아래와 같습니다.

8 라인 root 유저가 사용할 패스워드를 입력합니다.
16 라인 unix socket 인증방식 사용여부는 n 으로 지정해 주세요(root 쉘인증이 기본 사용됩니다.)
21-23 라인 root passwor를 변경합니다.
35 라인 익명 사용자를 삭제 합니다.
41 라인 root의 원격접속을 막습니다. root 는 항상 로컬에서만 접속 가능합니다.
48 라인 test 데이터 베이스를 삭제 합니다.
57 라인 권한에 대한 리로드를 진행합니다. y를 입력해주세요

NOTE: RUNNING ALL PARTS OF THIS SCRIPT IS RECOMMENDED FOR ALL MariaDB
      SERVERS IN PRODUCTION USE!  PLEASE READ EACH STEP CAREFULLY!

In order to log into MariaDB to secure it, we'll need the current
password for the root user. If you've just installed MariaDB, and
haven't set the root password yet, you should just press enter here.

Enter current password for root (enter for none):
OK, successfully used password, moving on...

Setting the root password or using the unix_socket ensures that nobody
can log into the MariaDB root user without the proper authorisation.

You already have your root account protected, so you can safely answer 'n'.

Switch to unix_socket authentication [Y/n] n
 ... skipping.

You already have your root account protected, so you can safely answer 'n'.

Change the root password? [Y/n] y
New password:
Re-enter new password:
Password updated successfully!
Reloading privilege tables..
 ... Success!


By default, a MariaDB installation has an anonymous user, allowing anyone
to log into MariaDB without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

Remove anonymous users? [Y/n] y
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

Disallow root login remotely? [Y/n] y
 ... Success!

By default, MariaDB comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

Remove test database and access to it? [Y/n] y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

Reload privilege tables now? [Y/n] y
 ... Success!

Cleaning up...

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

디비연결

아래 명령어를 입력하여 mariadb 에 접속합니다. 성공적으로 접속되었습니다.

ubuntu@goodsaem:~$ sudo mariadb

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 53
Server version: 10.5.9-MariaDB-1:10.5.9+maria~bionic mariadb.org binary distribution

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

마리아 디비 설정

마리아 db 설정을 진행하겠습니다. 아래 명령어를 입력하여 설정파일을 수정합니다.

ubuntu@goodsaem:~$ sudo vi /etc/mysql/mariadb.conf.d/50-server.cnf

가장 마지막 줄에 아래 설정을 추가합니다. (119-130 라인)

#
# These groups are read by MariaDB server.
# Use it for options that only the server (but not clients) should see

# this is read by the standalone daemon and embedded servers
[server]

# this is only for the mysqld standalone daemon
[mysqld]

#
# * Basic Settings
#

user                    = mysql
pid-file                = /run/mysqld/mysqld.pid
basedir                 = /usr
datadir                 = /var/lib/mysql
tmpdir                  = /tmp
lc-messages-dir         = /usr/share/mysql
lc-messages             = en_US
skip-external-locking

# Broken reverse DNS slows down connections considerably and name resolve is
# safe to skip if there are no "host by domain name" access grants
#skip-name-resolve

# Instead of skip-networking the default is now to listen only on
# localhost which is more compatible and is not less secure.
bind-address            = 127.0.0.1

#
# * Fine Tuning
#

#key_buffer_size        = 128M
#max_allowed_packet     = 1G
#thread_stack           = 192K
#thread_cache_size      = 8
# This replaces the startup script and checks MyISAM tables if needed
# the first time they are touched
#myisam_recover_options = BACKUP
#max_connections        = 100
#table_cache            = 64

#
# * Logging and Replication
#

# Both location gets rotated by the cronjob.
# Be aware that this log type is a performance killer.
# Recommend only changing this at runtime for short testing periods if needed!
#general_log_file       = /var/log/mysql/mysql.log
#general_log            = 1

# When running under systemd, error logging goes via stdout/stderr to journald
# and when running legacy init error logging goes to syslog due to
# /etc/mysql/conf.d/mariadb.conf.d/50-mysqld_safe.cnf
# Enable this if you want to have error logging into a separate file
#log_error = /var/log/mysql/error.log
# Enable the slow query log to see queries with especially long duration
#slow_query_log_file    = /var/log/mysql/mariadb-slow.log
#long_query_time        = 10
#log_slow_verbosity     = query_plan,explain
#log-queries-not-using-indexes
#min_examined_row_limit = 1000

# The following can be used as easy to replay backup logs or for replication.
# note: if you are setting up a replication slave, see README.Debian about
#       other settings you may need to change.
#server-id              = 1
#log_bin                = /var/log/mysql/mysql-bin.log
expire_logs_days        = 10
#max_binlog_size        = 100M

#
# * SSL/TLS
#

# For documentation, please read
# https://mariadb.com/kb/en/securing-connections-for-client-and-server/
#ssl-ca = /etc/mysql/cacert.pem
#ssl-cert = /etc/mysql/server-cert.pem
#ssl-key = /etc/mysql/server-key.pem
#require-secure-transport = on

#
# * Character sets
#

# MySQL/MariaDB default is Latin1, but in Debian we rather default to the full
# utf8 4-byte character set. See also client.cnf
character-set-server  = utf8mb4
collation-server      = utf8mb4_general_ci

#
# * InnoDB
#

# InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/.
# Read the manual for more InnoDB related options. There are many!
# Most important is to give InnoDB 80 % of the system RAM for buffer use:
# https://mariadb.com/kb/en/innodb-system-variables/#innodb_buffer_pool_size
#innodb_buffer_pool_size = 8G

# this is only for embedded server
[embedded]

# This group is only read by MariaDB servers, not by MySQL.
# If you use the same .cnf file for MySQL and MariaDB,
# you can put MariaDB-only options here
[mariadb]

# This group is only read by MariaDB-10.5 servers.
# If you use the same .cnf file for MariaDB of different versions,
# use this group for options that older servers don't understand
[mariadb-10.5]

server-id=1
log_bin = binlog
expire_logs_days=10
innodb_buffer_pool_size = 384M
innodb_file_per_table=TRUE
character-set-client-handshake=OFF
skip-character-set-client-handshake
max_allowed_packet=500M
init_connect=SET collation_connection = utf8mb4_general_ci
init_connect=SET NAMES utf8mb4
character-set-server = utf8mb4
collation-server = utf8mb4_general_ci

설정된 값이 적용되도록 마리아 디비를 재시작 합니다.

ubuntu@goodsaem:~$ sudo systemctl restart mariadb

[AWS 무료 서버구축-7/18] Nginx 설치

goodsaem — Sun, 25 Jul 2021 13:14:18 +0900

Nginx 웹서버 설치

aws freetier linux + Nginx + MariaDB + SpringBoot 조합으로 설치를 진행하겠습니다. 그 첫번째로 Nginx 설치를 진행하겠습니다.

개요

https://news.netcraft.com/archives/category/web-server-survey/netcrat의 21년 웹서버 점유율을 보면 아래와 같습니다. 비동기로 동작하는 nginx 는 apache 보다 가볍고 속도도 더 빠르다고 합니다. 아래 데이터를 보더라도 nginx 가 apache 를 앞지르고 있는것으로 보입니다. 그래서 저도 nginx 로 설정하겠습니다.

Nginx 버전

Nginx는 MainLine 버전과 stable 버전 2가지가 존재 합니다. 메인라인은 새로운 기능 및 업데이트 및 버그 패치가 동시에 진행되고 stable 은 메인라인에서 버그패치만 진행하는 버전입니다. 메이저 버전을 올리고 싶지 않고 사용하고 싶다면 stable 버전이 좋겠지만 전 최신 기능과 update 및 버그 픽스가 동시에 이루어지는 mainline으로 설치를 진행하겠습니다.

Nginx 설치

Nginx 설치를 위해 의존성 있는 패키지 설치를 진행합니다.

ubuntu@goodsaem:~$ sudo apt install curl gnupg2 ca-certificates lsb-release -y

메인라인 패키지 리스트를 추가 합니다.

ubuntu@goodsaem:~$ sudo echo "deb http://nginx.org/packages/mainline/ubuntu `lsb_release -cs` nginx" | sudo tee /etc/apt/sources.list.d/nginx.list
deb http://nginx.org/packages/mainline/ubuntu bionic nginx

패키지를 업데이트 합니다.

ubuntu@goodsaem:~$ sudo apt update

업데이트시 아래와 같이 NO_PUBKEY ABF5BD827BD9BF62 에러가 발생한다면 키를 업데이트 합니다.

아래 화면을 보시면 업데이트 오류가 발생하고 있습니다.

ubuntu@goodsaem:~$ sudo apt update
Hit:1 http://kr.archive.ubuntu.com/ubuntu bionic InRelease
Get:2 http://nginx.org/packages/mainline/ubuntu bionic InRelease [2862 B]
Err:2 http://nginx.org/packages/mainline/ubuntu bionic InRelease
  The following signatures couldn't be verified because the public key is not available: NO_PUBKEY ABF5BD827BD9BF62
Hit:3 http://kr.archive.ubuntu.com/ubuntu bionic-updates InRelease
Hit:4 http://kr.archive.ubuntu.com/ubuntu bionic-backports InRelease
Hit:5 http://kr.archive.ubuntu.com/ubuntu bionic-security InRelease
Reading package lists... Done
W: GPG error: http://nginx.org/packages/mainline/ubuntu bionic InRelease: The following signatures couldn't be verified because the public key is not available: NO_PUBKEY ABF5BD827BD9BF62
E: The repository 'http://nginx.org/packages/mainline/ubuntu bionic InRelease' is not signed.
N: Updating from such a repository can't be done securely, and is therefore disabled by default.
N: See apt-secure(8) manpage for repository creation and user configuration details.

아래 첫번째 라인과 같이 입력하여 키를 업데이트 합니다.

ubuntu@goodsaem:~$ sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys ABF5BD827BD9BF62
Executing: /tmp/apt-key-gpghome.2V0gKSSHqy/gpg.1.sh --keyserver keyserver.ubuntu.com --recv-keys ABF5BD827BD9BF62
gpg: key ABF5BD827BD9BF62: 14 signatures not checked due to missing keys
gpg: key ABF5BD827BD9BF62: public key "nginx signing key <signing-key@nginx.com>" imported
gpg: Total number processed: 1
gpg:               imported: 1

패키지 업데이트를 재시도 합니다.

ubuntu@goodsaem:~$ sudo apt update

nginx 를 설치합니다.

ubuntu@goodsaem:~$ sudo apt install nginx

설치된 버전을 확인 합니다. 1.19.8 최신 버전으로 설치 되었습니다.

ubuntu@goodsaem:~$ nginx -V
nginx version: nginx/1.19.8
built by gcc 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04) 
built with OpenSSL 1.1.1  11 Sep 2018
TLS SNI support enabled
configure arguments: --prefix=/etc/nginx --sbin-path=/usr/sbin/nginx --modules-path=/usr/lib/nginx/modules --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-compat --with-file-aio --with-threads --with-http_addition_module --with-http_auth_request_module --with-http_dav_module --with-http_flv_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_mp4_module --with-http_random_index_module --with-http_realip_module --with-http_secure_link_module --with-http_slice_module --with-http_ssl_module --with-http_stub_status_module --with-http_sub_module --with-http_v2_module --with-mail --with-mail_ssl_module --with-stream --with-stream_realip_module --with-stream_ssl_module --with-stream_ssl_preread_module --with-cc-opt='-g -O2 -fdebug-prefix-map=/data/builder/debuild/nginx-1.19.8/debian/debuild-base/nginx-1.19.8=. -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -Wl,--as-needed -pie'

AWS 보안설정 변경

http 및 https 로 접속하기 위해서는 aws에 인바운드 (들어오는쪽)에 방화벽 설정을 해주셔야 됩니다. 아래와 같이 aws 콘솔에서 EC2 > 인스턴스 > 인스터스 명을 클릭하시고 보안 탭에서 보안그룹의 보안 그룹번호를 클릭합니다.

인바운드 규칙 변경을 통해 아래와 같이 http , https 에대한 규칙을 추가합니다.

규칙 추가는 인바운드 규칙 편집 버튼을 클릭하여 아래와 같이 http,https 위치무관이라고 선택하고 저장하시면 됩니다.

Nginx 시작 및 접속 확인

아래 명령어를 입력하여 nginx 를 시작합니다.

ubuntu@goodsaem:~$ sudo systemctl start nginx

웹브라우저에서 http://goodsaem.ml접속해서 아래와 같은 화면이 나오면 설정 완료 입니다.

[AWS 무료 서버구축-6/18] AWS free tier 서버 Linux 설정

goodsaem — Sun, 25 Jul 2021 12:18:05 +0900

AWS free tier 서버 Linux 설정

구축한 aws + ubuntu 18.0.4 서버 초기 설정을 진행 하겠습니다. 필요없다고 생각하는 부분은 skip 하셔도 상관 없습니다.

버전정보 확인

lsb_release - a 명령어를 입력하여 버전 정보를 확인 합니다.

ubuntu@ip-172-31-47-167:~$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.5 LTS
Release:	18.04
Codename:	bionic

nopasswd 설정

nopasswd 설정을 진행하겠습니다.

sudo 해서 root 하는 일을 많이 진행할 예정입니다. 그때 마다 패스워드를 입력하지 않기 위해 /etc/sudoers 파일을 수정합니다

ubuntu@ip-172-31-47-167:~$ sudo vi /etc/sudoers

%sudo ALL=(ALL:ALL) ALL 이라고 된부분을 아래와 같이 %sudo ALL=(ALL:ALL) NOPASSWD:ALL 로 수정 합니다.

#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults        env_reset
Defaults        mail_badpass
Defaults        secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root    ALL=(ALL:ALL) ALL

# Members of the admin group may gain root privileges
%admin ALL=(ALL) ALL

# Allow members of group sudo to execute any command
%sudo   ALL=(ALL:ALL) NOPASSWD:ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d

패키지 업데이트

최신 패키지로 변경하기 위해 아래와 같이 update upgrade 를 진행합니다.

ubuntu@ip-172-31-47-167:~$ sudo apt update

ubuntu@ip-172-31-47-167:~$ sudo apt upgrade -y

타임존 변경

타임존을 변경합니다.

기본 설치하고 나면 timezone이 utc로 설정 되어 있습니다. timezone을 KST로 변경합니다.

ubuntu@ip-172-31-47-167:~$ sudo timedatectl set-timezone 'Asia/Seoul'

date 명령을 입력하여 정상적으로 변경되었는지 확인 합니다.

ubuntu@ip-172-31-47-167:~$ date
Wed Mar  3 23:52:20 KST 2021

호스트명 변경

homename을 변경합니다.

호스트 이름을 바꾸지 않아 아래와 ip-172-31-47-167 나옵니다 아래 명령어를 입력하여 호스트 이름을 goodsaem으로 변경합니다.

ubuntu@ip-172-31-47-167:~$ sudo hostnamectl set-hostname goodsaem

정상적으로 변경되었는지 확인 합니다.

ubuntu@ip-172-31-47-167:~$ cat /etc/hostname
goodsaem

서버를 재시작 하면 호스트 이름이 변경되므로 변경되지 않도록 설정을 수정합니다.

ubuntu@ip-172-31-47-167:~$ sudo vi /etc/cloud/cloud.cfg

아래 내용중 preserve_hostname: false 되어 있는 부분을 true로 변경합니다.

# The top level settings are used as module
# and system configuration.

# A set of users which may be applied and/or used by various modules
# when a 'default' entry is found it will reference the 'default_user'
# from the distro configuration specified below
users:
   - default

# If this is set, 'root' will not be able to ssh in and they
# will get a message to login instead as the default $user
disable_root: true

# This will cause the set+update hostname module to not operate (if true)
preserve_hostname: true

# Example datasource config
# datasource:
#    Ec2:
#      metadata_urls: [ 'blah.com' ]
#      timeout: 5 # (defaults to 50 seconds)
#      max_wait: 10 # (defaults to 120 seconds)



# The modules that run in the 'init' stage
cloud_init_modules:
 - migrator
 - seed_random
 - bootcmd
 - write-files
 - growpart
 - resizefs
 - disk_setup
 - mounts
 - set_hostname
 - update_hostname
 - update_etc_hosts
 - ca-certs
 - rsyslog
 - users-groups
 - ssh

# The modules that run in the 'config' stage
cloud_config_modules:
# Emit the cloud config ready event
# this can be used by upstart jobs for 'start on cloud-config'.
 - emit_upstart
 - snap
 - ssh-import-id
 - locale
 - set-passwords
 - grub-dpkg
 - apt-pipelining
 - apt-configure
 - ubuntu-advantage
 - ntp
 - timezone
 - disable-ec2-metadata
 - runcmd
 - byobu

# The modules that run in the 'final' stage
cloud_final_modules:
 - package-update-upgrade-install
 - fan
 - landscape
 - lxd
 - ubuntu-drivers
 - puppet
 - chef
 - mcollective
 - salt-minion
 - reset_rmc
 - refresh_rmc_and_interface
 - rightscale_userdata
 - scripts-vendor
 - scripts-per-once
 - scripts-per-boot
 - scripts-per-instance
 - scripts-user
 - ssh-authkey-fingerprints
 - keys-to-console
 - phone-home
 - final-message
 - power-state-change

# System and/or distro specific settings
# (not accessible to handlers/transforms)
system_info:
   # This will affect which distro class gets used
   distro: ubuntu
   # Default user name + that default users groups (if added/used)
   default_user:
     name: ubuntu
     lock_passwd: True
     gecos: Ubuntu
     groups: [adm, audio, cdrom, dialout, dip, floppy, lxd, netdev, plugdev, sudo, video]
     sudo: ["ALL=(ALL) NOPASSWD:ALL"]
     shell: /bin/bash
   # Automatically discover the best ntp_client
   ntp_client: auto
   # Other config here will be given to the distro class and/or path classes
   paths:
      cloud_dir: /var/lib/cloud/
      templates_dir: /etc/cloud/templates/
      upstart_dir: /etc/init/
   package_mirrors:
     - arches: [i386, amd64]
       failsafe:
         primary: http://archive.ubuntu.com/ubuntu
         security: http://security.ubuntu.com/ubuntu
       search:
         primary:
           - http://%(ec2_region)s.ec2.archive.ubuntu.com/ubuntu/
           - http://%(availability_zone)s.clouds.archive.ubuntu.com/ubuntu/
           - http://%(region)s.clouds.archive.ubuntu.com/ubuntu/
         security: []
     - arches: [arm64, armel, armhf]
       failsafe:
         primary: http://ports.ubuntu.com/ubuntu-ports
         security: http://ports.ubuntu.com/ubuntu-ports
       search:
         primary:
           - http://%(ec2_region)s.ec2.ports.ubuntu.com/ubuntu-ports/
           - http://%(availability_zone)s.clouds.ports.ubuntu.com/ubuntu-ports/
           - http://%(region)s.clouds.ports.ubuntu.com/ubuntu-ports/
         security: []
     - arches: [default]
       failsafe:
         primary: http://ports.ubuntu.com/ubuntu-ports
         security: http://ports.ubuntu.com/ubuntu-ports
   ssh_svcname: ssh

다시 로그아웃 하고 로그인 했을때 hostname 이 변경되었는지 확인 합니다. goodsaem으로 정상 변경되었습니다.

ubuntu@ip-172-31-47-167:~$ logout
Connection to ec2-13-209-42-88.ap-northeast-2.compute.amazonaws.com closed.
goodsaem@goodsaemui-iMac goodsaem % ssh -i "goodsaem.pem" ubuntu@ec2-13-209-42-88.ap-northeast-2.compute.amazonaws.com
Welcome to Ubuntu 18.04.5 LTS (GNU/Linux 5.4.0-1037-aws x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Thu Mar  4 00:00:55 KST 2021

  System load:  0.0               Processes:           121
  Usage of /:   8.3% of 29.02GB   Users logged in:     1
  Memory usage: 39%               IP address for eth0: 172.31.47.167
  Swap usage:   0%

 * Introducing self-healing high availability clusters in MicroK8s.
   Simple, hardened, Kubernetes for production, from RaspberryPi to DC.

     https://microk8s.io/high-availability

 * Canonical Livepatch is available for installation.
   - Reduce system reboots and improve kernel security. Activate at:
     https://ubuntu.com/livepatch

18 packages can be updated.
0 of these updates are security updates.
To see these additional updates run: apt list --upgradable

New release '20.04.2 LTS' available.
Run 'do-release-upgrade' to upgrade to it.


*** System restart required ***
Last login: Wed Mar  3 23:13:55 2021 from 1.247.71.18
ubuntu@goodsaem:~$

/etc/hosts 아이피 변경

/etc/hosts 에 있는 아이피를 변경합니다.

아이피와 호스트 정보를 입력해 주세요 전 127.0.0.1 과 aws 부여해준 공인 아이피(이아이피는 서버를 재시작 하면 다른 아이피로 변경됩니다.)를 입력했습니다. 전 가급적이면 서버를 재시작 하지 않을 계획이므로 그대로 사용하겠습니다.

ubuntu@goodsaem:~$ sudo vi /etc/hosts

127.0.0.1 localhost
127.0.0.1 goodsaem
13.124.172.200 goodsaem.ml
13.124.172.200 www.goodsaem.ml

# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters
ff02::3 ip6-allhosts

무료도메인내 ip 변경

freenom 무료 도메인을 발급 받은곳의 아이피를 aws ec2 서버 아이피로 변경합니다.

로그인후 service > my domains 를 클릭합니다.

Manage domain 버튼을 클릭합니다.

Manage Freenom DNS 를 클릭합니다.

ec2 서버의 아이피를 입력하고 save change 버튼을 클릭하여 변경사항을 적용 합니다.

[AWS 무료 서버구축-5/18] AWS free tier 서버 접속(mac, windows)

goodsaem — Sun, 25 Jul 2021 11:29:43 +0900

AWS freetier 서버 접속하기

mac , windows pc에서 생성한 프리티어 서버에 접속하는 방법입니다.

연결정보 확인

연결할 서버 접속 정보를 확인합니다.

인스턴스 아이디 아래 부분의 인스턴스를 클릭합니다.
연결 버튼을 클릭합니다.
SSH 클라이언트 탭을 클릭합니다.
SSH 클라이언트 아래의 텍스트를 복사합니다.
- ssh -i "goodsaem.pem" ubuntu@ec2-13-209-42-88.ap-northeast-2.compute.amazonaws.com

프리티어 서버생성할때 키를 생성했었습니다. 키 생성한 곳으로 이동하여 붙여 넣기 하고 엔터를 입력하면 아래와 같이 서버에 접속합니다.

Mac 에서 연결하기

Mac 에서 aws 서버 접속하는 방법입니다.

위에 복사한 문자열을 터미널에서 입력하고 엔터를 입력하면 아래와 같이 프리티어 서버로 접속됩니다.

goodsaem@goodsaemui-iMac goodsaem % ssh -i "goodsaem.pem" ubuntu@ec2-13-209-42-88.ap-northeast-2.compute.amazonaws.com
Welcome to Ubuntu 18.04.5 LTS (GNU/Linux 5.4.0-1037-aws x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

  System information as of Wed Mar  3 22:43:18 KST 2021

  System load:  0.0               Processes:           120
  Usage of /:   8.3% of 29.02GB   Users logged in:     0
  Memory usage: 39%               IP address for eth0: 172.31.47.167
  Swap usage:   0%

 * Introducing self-healing high availability clusters in MicroK8s.
   Simple, hardened, Kubernetes for production, from RaspberryPi to DC.

     https://microk8s.io/high-availability

 * Canonical Livepatch is available for installation.
   - Reduce system reboots and improve kernel security. Activate at:
     https://ubuntu.com/livepatch

18 packages can be updated.
0 of these updates are security updates.
To see these additional updates run: apt list --upgradable


*** System restart required ***
Last login: Mon Mar  1 23:55:26 2021 from 1.247.71.18
ubuntu@ip-172-31-47-167:~$

윈도우에서 연결하기

윈도우에서는 putty 로 접속하며 해당 sw 설치하는 방법 과 ec2 서버에 접속하는 방법에 대해서 알아보겠습니다.

https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html설치파일을 다운로드 받고 설치를 진행합니다. default 로 다음 다음 하셔서 설치를 완료해 주세요..

putty gen 을 실행 합니다.

load 버튼을 클릭합니다. 모든 파일을 . 선택하고 goodsaem.pem 파일을 불러 옵니다.

Save private key 버튼을 클릭합니다.

goodsaem.ppk 파일로 적당한 위치에 저장합니다.

putty 를 실행하고 위에서 ubuntu@ 뒤쪽에 있는 문자를 복사해서 호스트에 붙여 넣기 합니다. ec2-13-209-42-88.ap-northeast-2.compute.amazonaws.com
ssh 메뉴 아래 Auth를 클릭합니다.

Browse 버튼을 클릭하여 goodsaem.ppk 파일을 불러 옵니다.

파일을 불러 왔으면 Open 버튼을 클릭 합니다.

이상 mac 및 윈도우에서 구축한 aws 프리티어 서버에 접속하는 방법에 대해서 알아 보았습니다.

다음 시간에는 실제 서버 설정을 진행하겠습니다.

[AWS 무료 서버구축-4/18] AWS 에 EC2 인스턴스 추가

goodsaem — Sun, 25 Jul 2021 11:19:39 +0900

AWS 에 EC2 인스턴스 추가

무료로 사용할수 있는 freetier 서버를 추가하겠습니다.

Free Tier 서버를 구축을 위해 가입하신 정보로 로그인한후 aws console 버튼을 클릭하신후 서비스 > 모든 서비스 > 컴퓨팅 > EC2 서버를 선택합니다.

EC2 좌측메뉴중 인스턴스를 클릭하고 다시 인스턴스 시작 버튼을 클릭합니다.

프리티어 사용 가능이라고 된 서버가 무료 서버입니다. Ubuntu Server 18.04 LTS(HVM) SSD Volumn type을 선택 합니다.

다음 : 인스턴스 세부정보 구성 버튼을 클릭합니다.

변경없이 다음 : 스토리지 추가를 클릭합니다.

기본값 8 이라고 입력하고 다음 : 태그 추가 버튼을 클릭합니다.

무료는 30G 가능
30G 까지 가능하지만 해당 크기만큼 용량을 잡으면 프리티어 사용량에 포함 됩니다.
혹시 비용을 초과할수 있고 30G 만큼 사용하지 않을 계획 이므로 8G 로 설정을 진행합니다.

태그 추가 버튼을 클릭하여 키와 값에 식별할수 있는 이름을 입력합니다. 그리고 나서 다음 : 보안 그룹 구성 버튼을 클릭합니다.

새 보안 그룹 생성을 선택하고 검토 및 시작 버튼을 클릭합니다.

인스턴스 시작 검토 화면에서 선택한 내용들을 확인합니다. 그리고 나서 시작 하기 버튼을 클릭합니다.

이렇게 시작하고 나면 키페이 생성 화면이 팝업이 되는데 새 키 페어 생성을 선택하고 키페어 이름을 입력하고 키 페이 다운로드 버튼을 클릭하여 로컬 pc에 저장합니다. 그리고 나서 인서턴스 시작 버튼을 클릭합니다. 여기까지 완료하셨으면 프리티어 서버가 정상 생성되었습니다.

[AWS 무료 서버구축-3/18] AWS 계정생성

goodsaem — Sun, 25 Jul 2021 10:29:24 +0900

AWS 계정 생성

1년간 사용할 Aws 무료 계정을 생성합니다. (freetier로 생성하고 신용카드만 등록하면 1년간 사용할수 있습니다. 1년이 지나면 또 다른 신용 카드를 이용해서 서버를 setup 하시면 거의 무한정 사용할수 있을것 같네요)

1.계정생성

https://aws.amazon.com/ko/ 여기에 접속하여 우측상단의 AWS 계정생성 버튼을 클릭합니다.

이메일 주소 암호 계정 이름을 입력합니다.

연락처 정보는 개인,전체이름 및 전화번호 주소 우편 번호를 입력합니다. 주소는 비용이 발생할경우 청구하는 주소가 되므로 정확히 기재해 주시고 영문으로 작성하셔야 됩니다. 영문주소 변환은 https://www.jusoen.com 여기에서 가능합니다.

신용카드 정보와 만료날짜 및 신용카드에 적혀있는 카드 소유자 이름을 정확하게 입력하시고 청구지 주소를 선택합니다.

휴대폰 전화를 입력하여 문자로 확인코드를 받습니다. 보안검사 부분의 보안문자를 보안문자 입력하는 칸에 정확히 입력합니다.

휴대폰으로 온 문자를 확인하고 코드확인 란에 숫자를 입력하여 다음단계로 진행합니다.

마지막 단계로 기본지원 - 무료를 선택한후 가입을 완료합니다.

[AWS 무료 서버구축-2/18] 무료 도메인 발급

goodsaem — Sun, 25 Jul 2021 10:17:09 +0900

무료 도메인 발급

무료 도메인 발급 받는 방법에 대해서 알아 보겠습니다.

요즘 대부분의 웹서버는 https 통신을 합니다. 이제는 선택이 아닌 필수 인것 같네요 제가 서버를 구축하게 된 직접적인 원인도 https 설정을 하기 위함입니다. nginx 에 https 서비스를 구성하기 위해서는 도메인이 필요합니다. 도메인이 준비되면 certbot을 통해서 무료 ssl 인증서 적용 및 http/2 적용이 가능한데요 무료 도메인 가입하는 부분에 대해서 아래오 같이 정리했습니다. 서버셋업전 도메인 발급 받으시기 바랍니다.

Freenom

Freenom 에서 무료 도메인 발급 받는 방법입니다.

https://www.freenom.com/en/index.html?lang=en freenom 이란 사이트에서 무료 도메인을 발급 받을수 있습니다. 회원가입을 후 도메인 등록을 진행합니다.

로그인 후 원하는 도메인을 입력하고 엔터키를 클릭한후 사용하고자 하는 도메인에서 Get it now! 버튼을 클릭하여 선택합니다. 그리고 나서 Checkout 버튼을 클릭합니다.

Use DNS 버튼을 클릭하고 Use Freenom DNS Service를 선택한후 aws free tier의 퍼블릭 ipv4 주소를 입력하고 Continue 버튼을 클릭합니다.

도메인 주문이 완료되었습니다.

My Domain 에서 주문한 도메인 확인이 가능합니다.