실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있습니다. URL의 세그먼트가 중첩 된 컴포넌트의 특정 구조와 일치한다는 것은 매우 일반적입니다. 예를 들면 다음과 같습니다.

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

vue-router를 사용하면 중첩 된 라우트 구성을 사용하여이 관계를 표현하는 것이 매우 간단합니다.

이전 장에서 만든 앱을 생각해보십시오.

<div id="app">
  <
router-view></router-view>
</
div>

const User = {
  template:
'<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path:
'/user/:id', component: User }
  ]
})

여기에있는 <router-view>는 최상위 outlet입니다. 최상위 경로와 일치하는 컴포넌트를 렌더링합니다. 비슷하게 렌더링 된 컴포넌트는 자신의 중첩 된 <router-view>를 포함 할 수도 있습니다. 다음은 User컴포넌트의 템플릿 안에 하나를 추가하는 예 입니다.

const User = {
  template:
`
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `

}

이 중첩 outlet에 컴포넌트를 렌더링하려면 children을 사용해야합니다. VueRouter 생성자의 옵션 config:

const router = new VueRouter({
  routes: [
    { path:
'/user/:id', component: User,
      children: [
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path:
'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path:
'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

/로 시작하는 중첩 된 라우트는 루트 경로로 취급됩니다. 이렇게하면 중첩 된 URL을 사용하지 않고도 컴포넌트 중첩을 활용할 수 있습니다.

여러분이 볼 수 있듯이 children 옵션은 routes와 같은 라우트 설정 객체의 또 다른 배열입니다. 따라서 필요한만큼 중첩 된 뷰를 유지할 수 있습니다.

이 시점에서, 위의 설정으로, /user/foo를 방문했을 때 하위 라우트가 매치되지 않았기 때문에 User의 outlet에 아무것도 출력되지 않습니다. 어쩌면 거기에 무언가를 렌더링하고 싶을지도 모릅니다. 이 경우 빈 서브 루트 경로를 제공 할 수 있습니다.

const router = new VueRouter({
  routes: [
    {
      path:
'/user/:id', component: User,
      children: [
        // UserHome은 /user/:id 가 일치 할 때
        // User의 <router-view> 안에 렌더링됩니다.
        { path:
'', component: UserHome },

// ...또 다른 서브 라우트
      ]
    }
  ]
})

이 예제의 작업 데모는 이 곳에서 찾을 수 있습니다.

 

출처: <https://router.vuejs.org/kr/guide/essentials/nested-routes.html>

 

Posted by 철냄비짱
,

Vue Router

Front-End/Vue.js 2019. 12. 30. 08:04

참고자료

라우팅이란?

라우팅이란 웹 페이지의 간의 이동방법을 의미합니다. 싱글 페이지 애플리케이션(SPA)은 이동할 페이지를 미리 받아놓고, 페이지를 이동할 때 라우팅을 이용해서 화면을 갱신합니다.

Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여줍니다.

1. Vue Router 설치

npm i vue-router --save

설치를 하면 package.json의 dependencies에 vue-router가 추가됩니다.

(dependencies에 포함되는 라이브러리는 앱의 비지니스 로직을 담당하기 때문에 배포할 때도 포함됩니다.)

// 경로: root/package.json

"dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.2"
  },

2. 컴포넌트 생성

이동했을 때 보여줄 컴포넌트 2개 1) Main.vue, 2) NewsView.vue를 생성합니다.

// 경로: root/view/main.vue

<template>
   
<div>
        Main
   
</div>
</template>

// 경로: root/view/NewsView.vue

<template>
   
<div>
        NewsView
   
</div>
</template>

3. 연결

url과 컴포넌트를 연결해줍니다.

// 경로: root/routes/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import NewsView from '../views/NewsView.vue'

Vue.use(VueRouter)

export const router = new VueRouter({
    routes
: [
       
{
            path
: '/',
            component
: Main
       
},
       
{
            path
: '/news',
            component
: NewsView
       
}
   
]
}) 

4. router 등록

Vue 인스턴스에 작성한 router를 등록해줍니다.

// 경로: root/src/main.js

import Vue from 'vue'
import App from './App.vue'
import { router } from '../routes/index.js'

Vue.config.productionTip = false

new Vue({
  render
: h => h(App),
  router
, // ES6 문법으로, 키, 값이 같은면 하나만 작성해도 됩니다. router: router 와 같습니다
}).$mount('#app')

5. 이동

컴포넌트가 보여지는 영역

<router-view> 페이지 표시 태그로 변경되는 url에 따라 컴포넌트를 뿌려주는 영역입니다.

페이지 이동 방식

- 선언적 방식

<router-link to="URL"> 페이지 이동 태그, 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동합니다.

- 프로그래밍 방식

router.push("URL")

먼저 '선언적 방식' 을 사용해볼께요

App.vue 내용을 수정해서 <router-view>, <router-link> 를 작성해줍니다.

// 경로: root/src/App.vue

<template>
 
<div id="app">
   
<router-link to="/">main</router-link> |
   
<router-link to="/news">news</router-link>
   
<router-view></router-view>
 
</div>
</template>

<script>

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

<style>
#app {
 
text-align: center;
}
</style>

확인해보면

1) router-link 태그가 a태그로 변경되었습니다. 2) /news로 이동하면, <router-view></router-view> 를 작성한 영역에 URL에 등록한 NewsView 컴포넌트가 보여집니다.

마지막으로 프로그래밍 방식을 사용해보면!!

App.vue 내용을 다음과 같이 수정합니다.

<template>
 
<div id="app">
   
<span @click="go('/')">main</span> | <!-- 클릭하면 go 함수가 실행됩니다.-->
   
<span @click="go('/news')">news</span>
   
<router-view></router-view>
 
</div>
</template>

<script>

export default {
  name
: 'app',
  methods
: {
    go
( targetName) { // 인자값으로 받은 url을 router.push함수에 전달하고 이동됩니다.
     
this.$router.push(targetName)
   
}
 
}
}
</script>

<style>
#app {
 
text-align: center;
}
</style>

span태그를 클릭하면, router-view 아래에 등록된 컴포넌트가 보여집니다.

0개의 댓글

 

출처: <https://velog.io/@skyepodium/Vue-Router-fijr95dn4j>

 

Posted by 철냄비짱
,

국내에서도 Vue.js를 사용하는 비율이 점점 높아져가는 것 같습니다. Angularjs, Reactjs보다 진입장벽이 낮고, HTML/CSS와 기본 JavaScript만 다룰줄 알더라도 쉽게 사용할 수 있다는 장점이 있습니다. 또한 vue-cli라는 툴을 이용하여 기본적인 vue 골격을 만들어 웹팩(webpack)까지 통합세트로 운영할 수 있다보니, 고민없이 사용해야한다라는 생각이 점점 강해지는 것 같습니다.

 

분명 처음에는 가볍게 시작을 하면서, 분명 사용하기도 편합니다. 그런데 이 전에 사용했었던 jQuery, Bootstrap. 그리고 그 외의 많은 라이브러리들을 어떻게 추가해야하는지 헷갈릴 수도 있을 것 같습니다. 이는 웹팩이 같이 포함되어 있으면서 외부 라이브러리들을 어떻게 추가하는게 맞는 것인지 명확하게 나와있는 곳 또는 설명해주는 곳이 없기 때문이라고 생각됩니다.

 

저 역시도 jQuery를 추가할 때 webpack config에 끼워넣을려고 고민을 엄청했고, 여러가지 방법을 찾았습니다. 그 중에서 가장 쉬우면서 깔끔하게 추가하는 방법을 포스팅에 정리해보려 합니다.

 

외부 라이브러리를 추가하기 전에 vue-cli를 이용하여 프로젝트 하나를 생성합니다. 이 때, webpack-simple보다는 webpack으로 생성하시는 걸 추천합니다. (나중 웹팩을 추가적으로 만져야할 때 편리합니다.)

 

 

jQuery

jQuery가 뭐하는 건지 잘 모르시는 분 들을 위해 생활코딩 강좌사이트에 나와있는 내용을 언급하도록 하겠습니다.

jQuery란?

      1. 엘리먼트를 선택하는 강력한 방법과
      2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
      3. 자바스크립트 라이브러리

네. 그렇다고 합니다.

HTML을 마음대로 조작하며, 기존 JavaScript문법을 좀 더 효율적으로 사용할 수 있도록 도와주는 외부 라이브러리 입니다.

기존 웹사이트에서 jQuery를 추가하려면 HTML에 스크립트 파일을 호출하여 사용하면 됩니다.

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

view rawvuejs.add.library.1.html hosted with ❤ by GitHub

바로 이런식으로 말이죠.

하지만 Vue에서 위 방식으로 하면 뭔가 하지말아야 할 행동을 하는 것 같기도 하고, 뒤가 찝찝하기도 하고, 뭐라 말할 수 없는 느낌이 있습니다. (위 방식대로 사용해도 문제는 없습니다.)

jQuery를 추가하려면 일단 외부 저장소에서 jQuery 라이브러리를 가져와야겠죠? 해당 프로젝트 루트에서 다음과 같은 명령어를 실행합니다.

 

npm i --save-dev expose-loader

npm i --save jquery

view rawvuejs.add.library.2.sh hosted with ❤ by GitHub

 

라이브러리를 설치하면서 package.json에 같이 추가하게 됩니다.

이 것으로 모든 준비는 끝났습니다. 코드 몇줄로 추가하고 그냥 사용하면 됩니다.

vue-cli로 프로젝트를 생성했다면 /project/src/main.js파일을 확인하실 수 있습니다. 해당 파일에 jQuery사용을 위해 한줄 코드를 추가합니다.

 

import 'expose-loader?$!expose-loader?jQuery!jquery'

view rawvuejs.add.library.3.js hosted with ❤ by GitHub

 

위 코드를 추가하고, npm run dev로 서버를 실행하고 http://localhost:4000/으로 접속하세요. 그리고 개발자도구에서 $를 사용해보세요! 이 것으로 jQuery를 사용할 수 있게 되었습니다.

Bootstrap

반응형 웹사이트를 개발하기 위해 트위터에서 오픈소스로 공개한 UI Framework입니다. jQuery기반으로 되어 있으며, PC, Tablet, Mobile의 스크린을 자유롭게 설계하며 UI를 표현할 수 있는 프레임워크입니다.

Bootstrap의 경우는 javascript코드 이외의 UI를 표현해주는 css파일도 포함시켜줘야 합니다. 그렇다하더라도 코드는 2줄로 추가할 수 있습니다.

먼저 외부저장소에서 Bootstrap을 가져옵니다.

 

 

 

npm i --save bootstrap

view rawvuejs.add.library.4.sh hosted with ❤ by GitHub

그리고 위에서 수정했던 /project/src/main.js을 다시 엽니다.

 

 

 

import 'expose-loader?$!expose-loader?jQuery!jquery'

// 위에서 추가했던 jQuery 밑에 코드를 작성하세요

import 'bootstrap'

import 'bootstrap/dist/css/bootstrap.min.css'

view rawvuejs.add.library.5.js hosted with ❤ by GitHub

 

지금부터 jQuery와 Bootstrap을 동시에 사용할 수 있게 되었습니다.

Bootstrap의 .js.css가 잘 추가되었는지 테스트해보려면 HTML코드작성하는 부분에 아래와 같이 추가해보세요.

 

 

 

<template>

...

<button type="button" class="btn btn-primary" autocomplate="off" data-loading-text="jquery with bootstrap" @click="clickBtn">

...

</template>

<script>

export default {

name: 'jQueryApp',

methods: {

clickBtn (event) {

$(event.target).button('loading')

setTimeout(function() {

$(event.target).button('reset')

}, 1000);

}

}

}

</script>

view rawvuejs.add.library.6.vue hosted with ❤ by GitHub

 

위 코드가 정상적으로 작동한다면 jQuery, Bootstrap(js, css)가 Vue에서 정상적으로 작동하는 것을 확인하실 수 있을 것입니다.

jQuery를 추가하지 못해서 망설였던 분들을 위 방식으로 쉽게 시작하실 수 있으며, jQuery, Bootstrap 뿐만 아니라 그 외의 자주 사용했었던 라이브러리들도 이러한 형식으로 쉽게 추가할 수 있습니다.

Front-end를 개발하고 있음에도 아직 Framework를 사용하고 계시지 않고, 부담스러워하시는 분들이 있다면 지금 당장 시작해보세요. 하루만 투자하면 원하는 웹 애플리케이션을 개발하실 수 있습니다 : )

관련 정보

 

 

출처: https://jinblog.kr/180 [Jin]

 

출처: <https://jinblog.kr/180>

 

Posted by 철냄비짱
,

 

참고자료

Vue CLI 란

Vue CLI 는 커맨드라인 인터페이스 기반의 Vue 프로젝트 생성 도구입니다. Vue 애플리케이션을 개발할 때 기본적인 폴더 구조, 라이브러리 등을 설정해줍다.

1. 설치

npm i -g @vue/cli // vue-cli 3.x
npm i -g vue-cli // vue-cli 2.x

2. 프로젝트 생성

프로젝트를 생성할때 2.x 버전에서는 eslint, unit test, night watch 등등 낯선것들에 대해 선택을 해야만 했는데, 3.x 에서는 default (babel, eslint) 를 선택하면 가장 기본적인 설정으로 프로젝트가 생성됩니다.(나중에 언제든지 옵션을 추가할 수 있습니다.)

vue create '프로젝트 명' // vue-cli 3.X
vue init webpack '프로젝트 명' // vue-cli 2.X

3. 로컬 서버 실행

npm run serve // vue-cli 3.x
npm run dev // vue-cli 2.x

4. node_modules

  • vue-cli 3.x - vue create를 통한 프로젝트 생성 단계에서 함께 설치됩니다.
  • vue-cli 2.x - 프로젝트 생성 후 npm install을 통해 설치합니다.

5. 웹팩 설정 파일

  • vue-cli 3.x 노출 X
  • vue-cli 2.x 노출 O

2.x에서는 webpack.config.js 파일이 루트 디렉토리에 있습니다. 3.x에서는 없기 때문에 설정을 추가하기 위해서는 루트 디렉토리에 vue.config.js 파일을 설정하고 내용을 작성해줍니다. vue-cli 3.x vue.config.js

// vue.config.js
module.exports = {
  // 여기에 옵션을 작성해준다.
}

6. 프로젝트 구성

  • vue-cli 3.x 플러그인 기반으로 기능 추가
  • vue-cli 2.x github의 템플릿 다운로드

2.x 에서는 simple, webpack, webpack-simple, pwa 등 템플릿 리스트 중 하나를 선택해서 프로젝트를 구성했다면, 3.x 에서는 프로젝트에 플러그인 기반으로 원하는 설정 추가합니다.

7. ES6 이해도

  • vue-cli 3.x 필요 O
  • vue-cli 2.x 필요 X

3.x 에서는 ES6 기본 문법 뿐만아니라 축약 문법 또한 알고 있어야 합니다.

 

출처: <https://velog.io/@skyepodium/Vue-CLI-3.X-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0>

 

 

Posted by 철냄비짱
,

vue-axios

Front-End/Vue.js 2019. 12. 30. 08:02

A small wrapper for integrating axios to Vuejs

How to install:

CommonJS:

 

npm install --save axios vue-axios

And in your entry file:

 

import Vue from 'vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

 

Vue.use(VueAxios, axios)

Script:

Just add 3 scripts in order: vue, axios and vue-axios to your document.

Usage:

This wrapper bind axios to Vue or this if you're using single file component.

You can axios like this:

 

Vue.axios.get(api).then((response=> {

  console.log(response.data)

})

 

this.axios.get(api).then((response=> {

  console.log(response.data)

})

 

this.$http.get(api).then((response=> {

  console.log(response.data)

})

 

출처: <https://www.npmjs.com/package/vue-axios>

 

Posted by 철냄비짱
,

Spring boot와 Vue.js를 연동해봅니다.

이 문서에서는 Controller를 어디에 만드는지, cd 명령어는 어디에 입력하는지 등의 모든 과정을 설명하지는 않습니다.

결과물은 이쪽에 --> https://github.com/febdy/Spring-boot-vuejs

 

 

 

Version

Spring boot 2.0.3

Vue.js 2.5.16

Webpack 3.12.0

Gradle 4.x

 

 

 

최종 폴더 구조 예시

 

project

├ src (Spring boot)

│├ main

││ ├ java

││ └ resources

│└ test

├ frontend (Vue.js)

│├ build

│├ config

│├ node_modules

│├  src

││ ├ assets

││ │├ css

││ │├ images

││ │└ js

││ │

││ ├ router

││ ├ shared-components

││ ├ spa

││ │ ├ Member

││ │ │ ├ components

││ │ │ └ Login.vue

││ │ │

││ │ └ Qna

││ │   ├ components

││ │   └ Qna.vue

││ │

││ ├ App.vue

││ └ main.js

││

│├ static

│├ test

│├ .bablerc

│├ .editorconfig

│├ .eslintingore

│├ .eslintrc.js

│├ index.html

│├ package.json

│└ package-lock.json

├ build.gradle

├ gradlew

├ gradlew.bat

└ settings.gradle

 

frontend 구조 참고 : https://github.com/vuejs-kr/vuejs-kr.github.io/issues/28

 

 

 

STEP

 

1. Spring boot

 

 

 

https://start.spring.io/

 

Spring boot는 매우 쉽고 편한 프로젝트 생성 방법을 제공합니다.

Gradle Project를 선택하고 Dependencies엔 Web Thymeleaf 정도 추가해주고 Generate Project로 프로젝트를 받습니다.

옆에 패키지 이름은 원하는 대로 설정.

 

 

 

2. Controller

 

간단히 Controller를 만들어봅니다.

주소/hi를 입력하면 thymeleaf에 의해 resources/templates 안에 있는 index.html에 연결됩니다.

 

 

 

Vue.js

 

1. node.js 설치

 

https://nodejs.org/ko/

 

현재(180718) 기준 8.11.3 LTS 설치했습니다.

 

 

 

2. vue-cli install / init webpack project

 

cd [만들어놓은 Spring boot 폴더] 로 이동해 실행합니다.

 

$ npm install --g vue-cli

$ vue init webpack frontend

 

 

 

3.

 

 

$ cd frontend

$ npm install

 

frontend 폴더 안에 가서 package들을 install합니다.

node_modules라는 폴더가 생깁니다.

 

 

 

4. config/index.js

 

  build: {

    // Template for index.html

    index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),

 

    // Paths

    assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

 

 

config/index.js 파일의 경로를 이렇게 수정합니다.

 

 

 

 

 

+) 

application.properties 파일에서

 

spring.thymeleaf.prefix=classpath:/static/

 

추가해줍니다.

static/ index.html 를 읽으려면 thymeleaf의 prefix를 templates가 아닌 static으로 바꿔주어야 합니다.

Vue.js config/index.js의 index 경로를 templates으로 잡으면 spring 설정 없이 그대로 index를 사용 가능 하지만 배포할 때 js 파일을 못 읽을 수도 있습니다.

 

해결 방법은

1. Spring boot에서 thymeleaf의 경로를 바꾸거나

2. Vue.js에서 빌드 설정을 바꿔 static/static/을 인식하게 하는 건데

위가 쉽고 간단하므로 이렇게 해봅니다.

 

 

5. npm run build

 

 

 

$npm run build

 

밑에 파란 글씨의 Build Complete.을 확인합니다.

 

 

 

6. Spring boot server run

 

각자에게 맞는 방법으로 실행해봅니다.

이클립스로는 프로젝트 우클릭 -> Run as -> Spring Boot App.

 

 

 

5. localhost:포트번호/hi

 

브라우저에서 localhost:포트번호/hi를 입력하고 확인해봅니다. Vue 페이지가 뜨면 성공입니다.

 

 

 

* Vue.js 파일 수정 후 바로바로 확인하기

 

Vue.js 파일을 바꾸고 확인할 때마다 build를 해볼 수는 없겠지요.

 

 

 

 

$ npm run dev

 

명령어를 입력하면 개발 모드로 들어가며 파일을 수정하고 저장하는 즉시 바로바로 확인할 수 있습니다.

나오는 방법은

Ctrl + C

 

 

이 서버는 스프링 부트 서버와 별도입니다.

따라서 Vue.js 프로젝트를 확인하기 위해 꼭 Spring boot 서버를 실행할 필요는 없으며

Spring boot 서버에서 확인하고 싶으면 npm run build를 해주어 build된 파일이 다시 src/main/resources에 들어가도록 해야 합니다.

 

다른 툴은 모르겠고 이클립스를 사용중이라면 npm run build를 했을 때 프로젝트 폴더에서 F5를 눌러 새로고침을 한 번 해주세요.

src/main/resources 반영이 제때제때 자동으로 안 됩니다. 스프링 부트 서버도 종료했다가 다시 실행해야 합니다.

 

끝~

 

출처: https://febdy.tistory.com/65 [집]

 

출처: https://febdy.tistory.com/65 [집]

 

출처: <https://febdy.tistory.com/65>

 

Posted by 철냄비짱
,

npm 명령어

Front-End/Vue.js 2019. 12. 30. 08:01

 

안녕하세요. 이번 시간에는 npm 명령어에 대해 알아보겠습니다. npm 명령어는 명령 프롬프트에 입력하는 명령어입니다. 지금까지 봤던 명령어는 npm init, npm start npm run, npm install 정도가 있겠네요. 다양한 명령어가 많지만, 그중에서도 자주 쓰이는 것들에 대해 알아보겠습니다.

npm help 또는 npm 명령어 help는 가장 먼저 알려드릴 명령어입니다. 명령어가 뭐가 있는지 모를 때는 npm help를, 해당 명령어가 무슨 역할을 하고, 가능한 옵션은 뭐가 있는지 궁금하면 가운데 명령어를 넣어서 help하면 됩니다. 예를 들어 init이 무슨 명령어인지 모르겠다면 npm init help하면 되는 거죠.

설치 관련

npm init package.json을 만드는 명령어였죠? 새로운 프로젝트나 패키지를 만들 때 사용합니다.

npm install은 이미 아시다시피 패키지를 설치하는 명령어입니다. npm install 패키지@버전하면 특정한 버전을 설치할 수 있고, npm install 주소하면 특정한 저장소에 있는 패키지를 설치할 수 있습니다. 주소는 주로 Github에만 있는 패키지를 설치할 때 사용합니다. 옵션을 줄 수 있는데 뒤에 --save 또는 -S를 하면 dependencies에(npm5부터는 --save옵션이 기본적으로 설정되어 있기 때문에 안 붙여도 됩니다), --save-dev 또는 -D하면 devDependencies에 추가됩니다. 그리고 -g를 하면 글로벌 패키지에 추가됩니다. 글로벌 패키지에 추가하면 이 프로젝트뿐만 아니라 다른 프로젝트도 해당 패키지를 사용할 수 있습니다.

npm update는 설치한 패키지를 업데이트하는 명령어입니다.

npm dedupe는 npm의 중복된 패키지들을 정리할 때 사용합니다. 가끔 쳐주면 용량도 줄이고 좋습니다.

npm docs는 패키지에 대한 설명을 보여줍니다. 하지만 그냥 npm 홈페이지에 가서 보는 게 정신 건강에 좋습니다.

조회 관련

npm root node_modules의 위치를 알려줍니다.

npm outdated는 오래된 패키지가 있는지 알려줍니다. 오래되었고 package.json에 적어둔 버전 범위와 일치하면 빨간색으로, 오래되었지만 버전 범위와 일치하지 않으면 노란색으로 표시됩니다.

npm ls는 패키지를 조회하는 명령어입니다. 현재 설치된 패키지의 버전과 dependencies를 트리 구조로 표현합니다. npm ll을 하면 더 자세한 정보를 줍니다. npm ls [패키지명]을 하면 해당 패키지가 있는지와, 해당 패키지가 어떤 패키지의 dependencies인지 보여줍니다.

npm search는 npm 저장소에서 패키지를 검색하는 명령어입니다. 패키지의 이름, 설명 또는 키워드를 바탕으로 검색 결과가 나옵니다. 그냥 npm 홈페이지에서 검색하는 게 정신 건강에 좋습니다.

npm owner는 패키지의 주인이 누군지 알려주는 명령어입니다. 또는 여러 명의 주인을 설정하거나 지울 수 있습니다.

npm bugs는 버그가 발생했을 때 어떻게 패키지의 주인에게 연락을 취할지 알려줍니다. 주로 Github의 issues 탭을 엽니다.

로그인 관련

npm adduser은 npm에 회원가입하는 명령어입니다. 로그인도 됩니다. npm login도 똑같은 역할을 합니다.

npm logout은 반대로 logout할 때 사용합니다.

npm whoami는 귀여운 명령어입니다. 이름 그대로 내가 누군지 물어보는 명령어죠. 로그인한 상태라면 자신의 아이디를 알려줍니다.

출시 관련

npm publish는 패키지를 직접 출시하거나 버전 업그레이드를 할 때 사용하는 명령어입니다. .gitignore또는 .npmignore 파일에 적혀있지 않은 파일들은 npm 저장소에 업로드되어 출시됩니다. 여러분도 이제 자신의 패키지를 가질 수 있는거죠. 이 명령어를 사용하려면 여러분은 로그인한 상태여야 합니다. 그리고 패키지의 이름은 선점하는 사람이 계속 쓰기 때문에 이름을 선점하는 것도 중요합니다.

npm deprecate는 이미 낸 패키지를 사용하지 않도록 권고하는 명령어입니다. 자신이 어떤 버전을 출시했는데 치명적인 버그가 있다면 이 명령어를 사용해서 다른 사람들에게 사용하지 말도록 말해줍시다.

npm unpublish는 publish한 패키지를 다시 unpublish하는 겁니다. 하지만 deprecate를 쓰는 게 나은 게 이미 자신의 패키지를 다운로드한 사람들에게 피해를 입힐 수 있습니다.

npm star는 자신이 좋아하는 패키지를 표시하는 기능입니다. 이 star이 많을 수록 인기 패키지이기도 합니다. 심심하시면 제 react-vote나 react-filepicker에 star 해보세요.

npm starts는 특정 사람이 star한 패키지 목록을 확인할 수 있습니다.

npm version은 버전 업데이트를 할 때 사용합니다. 새로운 버전이 나왔다면 npm version [버전]하면 됩니다.

실행 관련

npm start package.json의 scripts에 있는 start 명령어를 실행하는 부분입니다. 만약 start 명령어를 따로 설정하지 않았다면 node server.js가 실행됩니다.

npm stop은 뭔지 알겠죠? npm start했던 것을 멈추는 명령어입니다.

npm restart npm stop 후에 다시 npm start를 하는 명령어입니다.

npm test는 test 명령어를 실행합니다.

npm run은 그 이외의 scripts를 실행하는 명령어입니다. 예를 들어 scripts에 build 명령어가 있다하면, npm run build하면 됩니다.

설정 관련

npm cache는 npm 내의 cache를 보여줍니다. 만약 npm에 문제가 생기거나 하면 제일 먼저 하는 게 npm cache clean으로 cache를 지우는 겁니다.

npm rebuild는 npm을 다시 설치하는 명령어입니다. 에러가 발생했을 시 주로 npm cache clean을 한 후 이 명령어를 쳐서 재설치해봅니다.

npm config는 npm의 설정을 조작하는 명령어입니다. npm config list 하면 현재 설정들을 볼 수 있고, npm set [이름] [값], npm get [이름]으로 속성을 설정하거나 조회할 수 있습니다.

명령어가 많죠? 이중에 자주 쓰이는 명령어는 설치나 업데이트 또는 조회 관련 명령어일 겁니다. 하지만 다른 명령어도 종종 쓰이기 때문에 알아두는 것이 좋습니다.

 

출처: <https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87>

 

 

Posted by 철냄비짱
,

자바스크립트뿐만 아니라 모든 언어에서 시간 차이를 구하는 함수는 많이 사용됩니다.

오늘은 자바스크립트에서 Moment.js를 사용하여 시간차이를 구하는 방법에 대해서 알아보도록 하겠습니다.

 

 

Moment.js란?

 

 

Moment.js를 사용하여 시간차이 구하기

(시간1: 과거시간, 시간2: 현재시간 임을 가정합니다.)

      • Sample 1)
        - 시간 1, 시간 2 사이의 일(day) 차이 구하기
        console.log('일 차이: ', moment.duration(t2.diff(t1)).asDays());
      • Sample 2)
        - 시간 1, 시간 2 사이의 시간(hour) 차이 구하기
        console.log('시간 차이: ', moment.duration(t2.diff(t1)).asHours());
      • Sample 3)
        - 시간 1, 시간 2 사이의 분(minute) 차이 구하기
        console.log('분 차이: ', moment.duration(t2.diff(t1)).asMinutes());
      • Sample 4)
        - 시간 1, 시간2 사이의 밀리세컨드(ms) 차이 구하기
        console.log('밀리세컨즈 차이: ', moment.duration(t2.diff(t1)).asMilliseconds());
        <Sample 1,2,3,4 code>

<결과>

      • Sample 5)
        - 시간1, 시간2 사이의 시분초(X시간 Y분 Z초) 차이 구하기

 

 

참조

 

 

출처: https://ithub.tistory.com/196 [Fall in IT.]

 

출처: <https://ithub.tistory.com/196>

 

Posted by 철냄비짱
,

vue-ads-pagination

Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right side you can select a specific, the first, last, next or previous page.

All the components can be overriden by your own components, or you can add your own styles to the default components.

View Demo Download Source

Installation

You can install the package via npm or yarn.

NPM

npm install vue-ads-pagination --save

YARN

yarn add vue-ads-pagination

Usage

You can add the vue-ads-pagination component by using the following code in your project.

<template>
    <div id="app">
        <vue-ads-pagination
            :total-items="200"
            :max-visible-pages="5"
            :page="page"
            :loading="loading"
            @page-change="pageChange"
            @range-change="rangeChange"
        >
            <template slot-scope="props">
                <div class="vue-ads-pr-2 vue-ads-leading-loose">
                    Items {{ props.start }} tot {{ props.end }} van de {{ props.total }}
                </div>
            </template>
            <template
                slot="buttons"
                slot-scope="props"
            >
                <vue-ads-page-button
                    v-for="(button, key) in props.buttons"
                    :key="key"
                    v-bind="button"
                    @page-change="page = button.page"
                />
            </template>
        </vue-ads-pagination>
    </div>
</template>

<script>
import '../node_modules/@fortawesome/fontawesome-free/css/all.css';
import '../node_modules/vue-ads-pagination/dist/vue-ads-pagination.css';

import VueAdsPagination, { VueAdsPageButton } from 'vue-ads-pagination';

export default {
    name: 'App',
   
    components: {
        VueAdsPagination,
        VueAdsPageButton,
    },

data () {
        return {
            loading: false,
            page: 5,
        };
    },

methods: {
        pageChange (page) {
            this.page = page;
            console.log(page);
        },
       
        rangeChange (start, end) {
            console.log(start, end);
        },
    },
};
</script>

Vue

Components

VueAdsPagination

Properties

      • page: (type: number, default: 0) A zero-based number to set the page.
        Be aware you need to update the page property by the result of the page-change action!
      • items-per-page: (type: number, default: 10) The maximum amount of items on one page.
      • max-visible-pages: (type: number, default: 5) The maximum number of pages to be visible if their are too many pages.
      • total-items: (type: number, required) The total amount of items.
      • loading: (type: boolean, default: false) Indicates if the current page is loading.

Events

      • page-change: Emitted on creation, to know the initial state, and if another page is clicked. It contains the following parameters:
      • page: (type: number) The zero-based current page.
      • range-change: Emitted on creation, to know the initial state, and if another page is clicked or the total items change and you're on the last page.
        It contains the following parameters:
      • start: (type: number) A zero-based number to identify the first item.
      • end: (type: number) A zero-based number to identify the last item.

Templates

Default

You can add a default template to use a custom pagination detail box.

The scope contains 3 variables:

      • start: (type: number) The included start item.
      • end: (type: number) The included end item.
      • total: (type: number) The total number of visible items.

<template slot-scope="props">
    {{ props.start }} - {{ props.end }} : Total {{ props.total }}
</template>

Vue

Buttons

If you want to use your own buttons, control their behaviour our style them in a different way.

You can create your own button component and loop over it in this slot or use the predefined VueAdsPageButton.

This is a scoped slot that contains an array of buttons.

      • buttons: (type: Array) A list of all buttons currently used. One button is an object that contains the following attributes:
      • page: (type: number||string) This is the zero based page or the string '...'.
        Note that the value of this attribute for the next and previous icons is calculated by the current page.
        If the current page is 2, the previous page will be 1 and the next page is 3.
      • active: (type: boolean) Is the current page active?
      • disabled: (type: boolean) Is the current button disabled?
      • html: (type: string) This string is shown in the button. So you can use icons for the previous and next button.
      • title: (type: string) If you want to add a title to the button, you can fill this attribute.
      • loading: (type: boolean) Indicates if the button has to show a loading icon.

<template
    slot="buttons"
    slot-scope="props"
>
    <vue-ads-page-button
        v-for="(button, key) in props.buttons"
        :key="key"
        v-bind="button"
        @page-change="page = button.page"
    />
</template>

Vue

VueAdsPageButton

This is the default button. If you want to add extra classes. Add the template above and add the class attribute.

Properties

      • page: (type: number||string, default: 0) A zero-based number that represents the page or '...'.
      • active: (type: boolean, default: false) Is the current button active?
      • disabled: (type: boolean, default: false) Is the current button disabled?
      • html: (type: string, required) This string is shown in the button.
      • title: (type: string, default: '') If you want to add a title to the button, you can fill this attribute.
      • loading: (type: boolean, default: false) Indicates if the button has to show a loading icon.
      • disable-styling: (type: boolean, default: false) Remove all styling classes.

Events

      • page-change: Emitted when the button is clicked.

Testing

We use the jest framework for testing this pagination component. Run the following command to test it:

npm run test:unit

GitHub

arnedesmedt/vue-ads-pagination

215

Vue pagination component  Read More

Latest commit to the develop branch on 1-19-2019

Download as zip

Vue.js Examples

A nice collection of often useful examples done in Vue.js

 

출처: <https://vuejsexamples.com/vue-ads-pagination-is-a-vue-js-pagination-component/>

 

Posted by 철냄비짱
,

Moment.js란?

      • 자바스크립트에서는 날짜를 표시할때 Date 객체를 사용합니다. 이때, 특정 형태의 날짜를 나타내기 위해선 직접 함수를 개발해야합니다.
      • 또, 브라우저에 따라 시간대가 다를 경우 이를 고려하여 개발해야하는 번거러움이 있습니다.
      • Moment.js를 사용하면 이 두가지 문제를 해결할 수 있습니다.

 

 

Moment.js 공식 홈페이지

 

Moment.js 설치

      • 홈페이지에서 직접 다운받을 수 있으며, npm과 같은 패키지매니저를 사용하여 설치 할 수 있습니다.

 

Moment.js 사용법

      • 다운받은 js파일은 프로젝트에 import합니다.
      • moment 객체를 사용하여 아래와 같이 여러 형태의 날짜 형태로 표현이 가능합니다.

 

 

 

Moment.js의 다양한기능

 

 

출처: https://ithub.tistory.com/99 [Fall in IT.]

 

출처: <https://ithub.tistory.com/99>

Posted by 철냄비짱
,