[Vue.js] 현업에서 잘 사용하는 Vue 무료 라이브러리 추천

현업 개발자가 소개하는

vue.js 유용한 라이브러리

---

 

 

필자는 현재 Vue.js를 주 언어로 사용하는 프런트 앤드 개발자이다.

오늘은 현업 시 유용하게 사용하고 있는 Vue.js 라이브러리 들을 소개해보려고 한다.

 

누구나 보기 좋은 웹 화면은 만들기 위함이나, 까다로운 코드들을 해결해주는 라이브러리 들이다.

사용법이 매우 편해 Learning Time(학습시간)이 적지만,

웹에서는 드라마틱한 효과를 내주는 소중한 라이브러리이다.

 

---

🖱 Vuebar

License : MIT

Demo : github.serafin.io/vuebar/

Vuebar

 

첫 번째 라이브러리는 스크롤 디자인을 변경할 수 있는 Vuebar이다.

화면 우측의 Scroll의 경우 시스템 Scroll 디자인을 사용해도 디자인상 큰 문제는 없지만,

화면 안쪽에 overflow을 넣어 만든 element에 시스템 Scroll이 생길 경우 디자인을 해치는 경우가 많았다.

 

이럴 경우 Scroll의 디자인을 커스텀해서 넣어줄 경우 사이트의 완성도가 올라간다.

이때 사용하는 라이브러리가 Vuebar이다.

 

설치방법

npm과 CDN 형식 두 가지 방법으로 프로젝트에 적용이 가능하다.

 

npm install vuebar --save

 

Sample

 

 

vue bar 적용 전 후, 확실히 완성도가 올라간걸 볼 수 있다.👏

 

JS

vue project에 npm으로 설치한 Vue 라이브러리를 선언해준다. 

 

import Vue from 'vue'
import Vuebar from 'vuebar';
Vue.use(Vuebar);

 

VueCode

overflow가 적용될 element에 v-bar를 추가하고,

그 바로 밑에 div를 하나 더 추가한다.

 

<template>
  <div>
    <div v-bar class="word-box jejumyeongjo">
      <div>
      <H2>선인장 (Duet)</H2>
      <h4>남우현 , Lucia(심규선)</h4>
      <p>햇볕이 잘 드는 그 어느 곳이든</p>
      <p>잘 놓아두고서</p>
      <p>한 달에 한 번만 잊지 말아줘</p>
      <p>물은 모자란 듯하게만 주고</p>
      <p>차가운 모습에 무심해 보이고</p>
      <p>가시가 돋아서 어둡게 보여도</p>
      <p>걱정하진 마</p>
      <p>이내 예쁜 꽃을 피울 테니까</p>
      <p>언젠가 마음이 다치는 날 있다거나</p>
      <p>이유 없는 눈물이 흐를 때면</p>
      <p>나를 기억해</p>
      <p>그대에게 작은 위로가 되어줄게</p>
      <p>내 머리 위로 눈물을 떨궈</p>
      <p>속상했던 마음들까지도</p>
      <p>웃는 모습이 비출 때까지</p>
      <p>소리 없이 머금고 있을게</p>
      <p>그때가 우리 함께 했었던 날</p>
      <p>그때가 다시는 올 수 없는 날이 되면</p>
      <p>간직했었던 그대의 눈물 안고</p>
      <p>봄에 서 있을게</p>
      <p>언젠가 마음이 다치는 날 있다거나</p>
      <p>이유 없는 눈물이 흐를 때면</p>
      <p>나를 기억해</p>
      <p>그대에게 작은 위로가 되어줄게</p>
      <p>그때가 우리 함께 했었던 날</p>
      <p>그때가 다시는 올 수 없는 날이 되면</p>
      <p>간직했었던 그대의 눈물 안고</p>
      <p>봄에 서 있을게</p>
      <p>내 머리 위로 눈물을 떨궈</p>
      <p>속상했던 마음들까지도</p>
      <p>웃는 모습이 비출 때까지</p>
      <p>소리 없이 머금고 있을게</p>
      <p>봄에 서 있을게</p>
      <p>봄에 서 있을게</p>
      <p>봄에 서 있을게</p>
      </div>
    </div>
  </div>
</template>

 

Css

. vb클래스 밑에 해당하는 코드를 주목해보자.

변경할 부분은  background-color부분으로 원하는 색상 코드를 넣어준다. 

Opacity속성이 이용되므로 RGB 값으로 넣어준다.

 

<style>
  @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
  .jejumyeongjo * {
    font-family: 'Jeju Myeongjo', serif;
  }
  .word-box {
    text-align:center;
    color:#fff;
    width:500px;
    height:600px;
    margin:20px auto;
    background:url("https://images.unsplash.com/photo-1459411552884-841db9b3cc2a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=818&q=80");
    background-size:100%;
    font-size:12px;
  }
  .word-box h2 {
    font-size:20px;
    margin:20px 0 0 0;
  }
  .word-box h4 {
    text-align:right;
    font-size:14px;
    margin:0 20px 50px 0;
  }
  .vb > .vb-dragger {
    z-index: 5;
    width: 12px;
    right: 0;
  }

  .vb > .vb-dragger > .vb-dragger-styler {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotate3d(0,0,0,0);
    transform: rotate3d(0,0,0,0);
    -webkit-transition:
            background-color 100ms ease-out,
            margin 100ms ease-out,
            height 100ms ease-out;
    transition:
            background-color 100ms ease-out,
            margin 100ms ease-out,
            height 100ms ease-out;
    background-color: rgba(244, 88, 88,.1);
    margin: 5px 5px 5px 0;
    border-radius: 20px;
    height: calc(100% - 10px);
    display: block;
  }

  .vb.vb-scrolling-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.3);
  }

  .vb > .vb-dragger:hover > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.5);
    margin: 0px;
    height: 100%;
  }

  .vb.vb-dragging > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.5);
    margin: 0px;
    height: 100%;
  }

  .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
    background-color: rgba(244, 88, 88,.5);
  }
</style>

 

---

🔟 vue-number-animation

License : MIT

Demo: codesandbox.io/s/8256nwlq78

Vue Template - CodeSandbox

vue 프로젝트 내 숫자를 표시하는 경우가 많은데,

이럴 경우 페이지 랜더링 시 숫자가 올라가는 애니메이션 효과를 넣어주면

좀 더 역동적인 페이지가 생성된다.

 

vue-number-animation 라이브러리는 지정된 숫자까지 숫자가 증가하는 애니메이션을 생성해준다.

 

설치방법

npm을 이용하여 설치가 가능하다.

 

npm install vue-number-animation --save

 

Sample

 

vue-number-animaiton 구현 화면

 

JS

vue project에 npm으로 설치한 Vue 라이브러리를 선언해준다. 

 

import Vue from 'vue'
import VueNumber from 'vue-number-animation'
Vue.use(VueNumber)

 

VueCode

vue animation을 사용하기 위해서는

<number>를 작성한 뒤 안에 애니메이션 관련 속성을 넣어주면 된다. 

• from : 시작할 숫자 번호
• to: 끝날 숫자 번호
• duration: animation 진행 시간을 지정한다.

위 속성 외에도 많은 기능이 제공된다. 데모 페이지를 참고해보기를 추천한다.👍

 

<template>
    <div>
        <div class="today">
            <p>What day is it today?</p>
            <div>
                <number class="number" :from="0" :to="2020" :duration="2"/>
                /
                <number class="number" :from="0" :to="12" :duration="2"/>
                /
                <number class="number" :from="0" :to="5" :duration="2"/>
            </div>
        </div>
    </div>
</template>
<style>
    .today {
        margin: 50px auto;
        text-align: center;
    }

    .today p {
        font-size: 70px;
        line-height: 1;
    }

    div {
        margin: 50px 0 0 0;
        padding: 30px;
        font-size: 40px;
        font-weight: bold;
        color: #707070;
    }

    .number {
        letter-spacing: 2px;
        background: #FFDBDB;
        padding: 10px 20px;
        border-radius: 20px;
    }
</style>

 

---

📊 ApexChart

License : MIT

Demo: apexcharts.com/

ApexCharts.js - Open Source JavaScript Charts for your website

진행하는 프로젝트 중 다양한 차트를 이용하는 경우가  매우 많다.

Chart 라이브러리를 고를 때 고려했던 부분은

그라데이션 효과가 가능한가?

반응형을 지원하는가?

저작권에 문제가 없는가?

3가지를 크게 고려하여 찾아본 결과 ApexChart를 만나게 되었다.

 

무료 차트 라이브러리이지만,

내가 원하는 대부분의 기능을 제공해서 만족하고 사용하는 라이브러리이다.

 

단점은 하나의 페이지에 여러 디자인에 차트가 들어갈 경우,

그때마다 ChartOption을 계속 data 쪽에 선언해주다 보니 코드가 길어지는 아쉬움은 있다. 😅

 

설치방법

npm을 이용하여 설치가 가능하다.

 

//vue 이용 시 vue-apexcharts도 같이 설치해준다
npm install apexcharts --save
npm install vue-apexcharts --save

 

Sample

 

apexChart 구현 화면

 

JS

vue project에 npm으로 설치한 Vue 라이브러리를 선언해준다. 

다른 것과 다르게 vue.component 형태로도 선언해줘야 정상 작동한다.

 

import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)

 

VueCode

<apexchart> 안에 사용할 속성 값을 연결해주면 apexchart가 작동한다.

• type:  그래프 형태 선언

• option: 그래프의 디자인 옵션 값 연결

• series : 그래프의 데이터 값 연결

앞서 말한 특징 중 그라데이션은 options 속성 안 fill 속성 내부에서 커스텀이 가능하다.

bar chart 디자인 중 끝부분 round 처리하는 기능까지도 가능하다.😍

 

<template>
    <div id="chart">
        <p>Today's Chart</p>
        <apexchart width="500" height="350" type="bar" :options="options" :series="series"/>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //그래프
                options: {
                    xaxis: {
                        categories: ['1월', '2월', '3월', '4월', '5월', '6월'],
                    },
                    colors: ['#FEDD36'],
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            type: "vertical",
                            opacityFrom: 0.7,
                            opacityTo: 0.9,
                            colorStops: [
                                {offset: 0, color: "#fbc2eb", opacity: 1},
                                {offset: 100, color: "#a18cd1", opacity: 1}
                            ]
                        }
                    }, plotOptions: {
                        bar: {columnWidth: '30%', endingShape: 'rounded', dataLabels: {position: 'top'}}
                    },
                },
                series: [{name: 'data', data: [1, 2, 3, 4, 5, 4]}],
            }
        },
        methods: {}
    }
</script>
<style>
    #chart {
        padding: 50px;
    }

    #chart p {
        font-size: 30px;
        font-weight: bold;
        color: #737373;
        margin: 0 0 50px 0;
    }
</style>

 

---

📋Simple Vue Validation

License : MIT

Demo: simple-vue-validator.magictek.cn/

Simple Vue Validator - Documentation

회원가입, 게시판 등록 시 밸리데이션 체크를 하기 위해서는

Javascript 정규식을 이용하여 체크를 해야 한다.

 

simple Vue validation 라이브러리를 활용하면,

업무에 자주 사용하는 밸리데이션을 

간단한 코드로 구현할 수 있다.

 

설치방법

npm을 이용하여 설치가 가능하다.

 

npm install simple-vue-validator --save

 

Sample

 

vue Validation 구현 화면

 

 

JS

vue project에 npm으로 설치한 Vue 라이브러리를 선언해준다. 

 

import Vue from 'vue'
import SimpleVueValidation from 'simple-vue-validator';
Vue.use(SimpleVueValidation);

 

VueCode

 

input v-model 연결

vue Validation을 사용하기 위해서는 input v-model로 바인딩된 값으로 validation을 처리한다.

 

 

validation 규칙 선언하기

validation에 관련된 규칙을 작성하는 방법이다.

validators 안의 객체 이름을 v-model에 연결된 이름과 동일하게 지정하면

function의 매개변수로 v-model 값이 들어오게 된다.

• required() :  필수 입력항목일 경우 사용한다.

• digit() :  숫자만 허용할 경우 사용한다. 

이외 규칙들은 위의 데모 사이트를 확인하면 더 많은 기능을 사용할 수 있다.👌

 

  validators: {
            name: function (value) {
                return Validator.value(value).required()
            },
            phone: function (value) {
                return Validator.value(value).required().digit()
            },
        },

 

validation 오류 메시지 custom 하기

validation 규칙에서 호출하는 함수 별로 조건이 맞지 않을 경우

return 되는 message를 커스텀하는 것도 가능하다.

 

    import SimpleVueValidation from 'simple-vue-validator';

    const Validator = SimpleVueValidation.Validator;
    SimpleVueValidation.extendTemplates({
        required: '필수 입력 항목입니다.',
        length: '길이가 {0} 이어야 합니다.',
        minLength: '{0} 글자 이상이어야 합니다.',
        maxLength: '{0} 글자 이하여야 합니다.',
        digit: '숫자만 입력해주세요.'
    })

 

위에서 지정한 message를 표시하는 방법은 아래와 같다.

 

<div class="error-message" v-if="validation !== undefined">
	{{ validation.firstError('name') }}
</div>

 

validation 이벤트 호출하기

submit 후에 위에서 지정한 validation이 모두 조건을 체크하는 방법이다.

method 쪽에 summit function을 만들어서 아래 코드를 작성해주면

validation 조건을 모두 만족하는 경우 success 매개변수에 true를 던져주고

만족하지 않을 경우 false가 들어온다. 

 

submit() {
  this.$validate()
	.then(function (success) {
  		if (success) {
 		 alert("성공했습니다.")
		}
  });
}

 

최종 코드

 

<template>
    <div>
        <div class="join-box">
            <h2>Join Form</h2>
            <table>
                <colgroup>
                    <col style="width:120px;"/>
                    <col style="width:auto;"/>
                </colgroup>
                <tbody>
                <tr>
                    <td>이름</td>
                    <td>
                        <input type="text" class="form-control" v-model="name" 
                        placeholder="이름을 입력해주세요."/>
                        <div class="error-message" v-if="validation !== undefined">
                            {{ validation.firstError('name') }}
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>핸드폰번호</td>
                    <td>
                        <input type="text" class="form-control" v-model="phone" 
                        placeholder="숫자만 입력해주세요."/>
                        <div class="error-message" v-if="validation !== undefined">
                            {{ validation.firstError('phone') }}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="btn-box">
                <a @click="submit">SUBMIT</a>
            </div>
        </div>
    </div>
</template>
<script>
    import SimpleVueValidation from 'simple-vue-validator';

    const Validator = SimpleVueValidation.Validator;
    SimpleVueValidation.extendTemplates({
        required: '필수 입력 항목입니다.',
        length: '길이가 {0} 이어야 합니다.',
        minLength: '{0} 글자 이상이어야 합니다.',
        maxLength: '{0} 글자 이하여야 합니다.',
        digit: '숫자만 입력해주세요.'
    })
    export default {
        data() {
            return {
                name: '',
                phone: '',
            }
        },
        validators: {
            name: function (value) {
                return Validator.value(value).required()
            },
            phone: function (value) {
                return Validator.value(value).required().digit()
            },
        },
        methods: {
            submit() {
                this.$validate()
                    .then(function (success) {
                        if (success) {
                            alert("성공했습니다.")
                        }
                    });
            }
        }
    }
</script>
<style>
    .join-box {
        width: 500px;
        min-height: 450px;
        margin: 30px;
        padding: 50px;
        border-radius: 20px;
        box-shadow: 10px 10px 10px #eee;
    }

    .join-box h2 {
        font-size: 40px;
        text-align: center;
        margin: 0 0 30px 0;
    }

    .error-message {
        margin: 10px 0 0 0;
        color: #E62929;
    }

    table td {
        vertical-align: top;
        padding: 10px;
    }

    .btn-box {
        margin: 50px 0 0 0;
    }

    .btn-box > a {
        display: block;
        width: 200px;
        background: #5FCA86;
        text-align: center;
        padding: 10px 15px;
        border-radius: 20px;
        margin: 0 auto;
    }

    .btn-box > a:hover {
        background: #4EBA75;
    }
</style>

---

여기까지 내가 자주 사용하는 라이브러리들을 소개했다.

사실 라이브러리 하나하나 기능을 쪼개서 설명하면 더 내용이 길어져서

이번 글에서는 그냥 해당 라이브러리가 있다 정도만 참고하면 좋을 것 같다.