본문 바로가기
반응형

ALL

 (272)
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..
Vue ads pagination is a vue js pagination component 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 th..
Date 포맷 변경 플러그인 momentjs Moment.js란? 자바스크립트에서는 날짜를 표시할때 Date 객체를 사용합니다. 이때, 특정 형태의 날짜를 나타내기 위해선 직접 함수를 개발해야합니다. 또, 브라우저에 따라 시간대가 다를 경우 이를 고려하여 개발해야하는 번거러움이 있습니다. Moment.js를 사용하면 이 두가지 문제를 해결할 수 있습니다. Moment.js 공식 홈페이지 https://momentjs.com/ Moment.js 설치 홈페이지에서 직접 다운받을 수 있으며, npm과 같은 패키지매니저를 사용하여 설치 할 수 있습니다. Moment.js 사용법 다운받은 js파일은 프로젝트에 import합니다. moment 객체를 사용하여 아래와 같이 여러 형태의 날짜 형태로 표현이 가능합니다. Moment.js의 다양한기능 다양한 기능은..
babel-polyfill 과 babel-plugin-transform-runtime 그리고 IE8 Babel Babel 은 ES2015+ 문법을 ES5 지원 브라우저에서 해석할 수 있도록 변환해주는 트랜스파일러이다. 하지만 새롭게 추가된 전역 객체들(Promise, Map, Set..)과 String.padStart 등 전역 객체에 추가된 메서드들은 트랜스파일링만으론 해결하기 어렵기 때문에 core-js 나 regenerator-runtime 와 같은 별도의 polyfill 이 필요하다. Babel 기반에서 폴리필을 추가하는 방법은 두 가지가 존재한다. babel-polyfill 을 사용하는 방법과 babel-plugin-transform-runtime 을 사용하는 방법이다. 차례대로 살펴보자. babel-polyfill babel-polyfill 은 내부적으로 페북에서 만든 Generator Fun..
반응형

티스토리툴바