vuejs (17) 썸네일형 리스트형 중첩된 라우트 실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있습니다. URL의 세그먼트가 중첩 된 컴포넌트의 특정 구조와 일치한다는 것은 매우 일반적입니다. 예를 들면 다음과 같습니다. /user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ vue-router를 .. Vue Router 참고자료 Vue.js 완벽 가이드 Vue Router 공식 가이드 라우팅이란? 라우팅이란 웹 페이지의 간의 이동방법을 의미합니다. 싱글 페이지 애플리케이션(SPA)은 이동할 페이지를 미리 받아놓고, 페이지를 이동할 때 라우팅을 이용해서 화면을 갱신합니다. Vue Router는 1) URL에 따라 보여줄 컴포넌트를 연결해 놓고, 2) 해당 URL로 이동했을때 연결된 컴포넌트를 보여줍니다. 1. Vue Router 설치 npm i vue-router --save 설치를 하면 package.json의 dependencies에 vue-router가 추가됩니다. (dependencies에 포함되는 라이브러리는 앱의 비지니스 로직을 담당하기 때문에 배포할 때도 포함됩니다.) // 경로: root/package.js.. vue.js에서 jQuery, Bootstrap 추가하여 사용하기 국내에서도 Vue.js를 사용하는 비율이 점점 높아져가는 것 같습니다. Angularjs, Reactjs보다 진입장벽이 낮고, HTML/CSS와 기본 JavaScript만 다룰줄 알더라도 쉽게 사용할 수 있다는 장점이 있습니다. 또한 vue-cli라는 툴을 이용하여 기본적인 vue 골격을 만들어 웹팩(webpack)까지 통합세트로 운영할 수 있다보니, 고민없이 사용해야한다라는 생각이 점점 강해지는 것 같습니다. 분명 처음에는 가볍게 시작을 하면서, 분명 사용하기도 편합니다. 그런데 이 전에 사용했었던 jQuery, Bootstrap. 그리고 그 외의 많은 라이브러리들을 어떻게 추가해야하는지 헷갈릴 수도 있을 것 같습니다. 이는 웹팩이 같이 포함되어 있으면서 외부 라이브러리들을 어떻게 추가하는게 맞는 것인.. Vue CLI 3.X 사용하기 참고자료 Vue.js 완벽 가이드 Vue CLI 공식 가이드 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-axios 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 compon.. Spring boot - Vue.js 연동하기 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 ││ │├ im.. npm 명령어 안녕하세요. 이번 시간에는 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을 만드는 명.. Moment.js를 사용하여 시간 차이 구하기 자바스크립트뿐만 아니라 모든 언어에서 시간 차이를 구하는 함수는 많이 사용됩니다. 오늘은 자바스크립트에서 Moment.js를 사용하여 시간차이를 구하는 방법에 대해서 알아보도록 하겠습니다. 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.du.. 이전 1 2 3 다음
