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

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

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

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

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

설치방법

 yarn add echarts vue-echarts

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

yarn add @vue/composition-api

[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 기반 환경에서 폰트어썸 설정하는 방법은 아래 내용을 참고하세요.  

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

폰트어썸은 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>

실행결과

소개

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

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

axios vs fetch 

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를 가져오는 부분입니다.

실행결과

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

조금더 쉽게 아이콘 검색을 위한 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 를 실행합니다.

실행결과

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마다 디자이너에게 요청하면 상당히 눈치가 보일것 같네요. 그렇다고 포토샵을 열어서 아이콘을 만들수도 없고 이때 사용할수 있는 유용한 웹 아이콘 폰트 라이브러리가 있습니다. 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 에서 코드 자동 정렬하기

option + command + L

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

Command + shift + U

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

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