hojak99 의 블로그

spring 과 vue 를 서버 하나에 포트를 다르게 해서 배포하기서버 배포 관련은 구글링하면 많이 나오기 때문에 vue 배포만 이야기합니다.우선 간단히 생각해보면 실행해야할 커맨드는 아래와 같다고 생각했습니다.npm installnpm run buildnpm run {BUILD_PROFILE}해당 스크립트는 jenkins build script 에 넣어줍니다.sh "cd dobby-front" sh "npm install" sh "npm run build" 우선 성공했습니다.이제 rsync 를 이용해서 배포되는 서버의 dist 폴더에 복사를 해야합니다.sh "rsync -rav --delete (젠킨스 서버의 npm 빌드 폴더) (복사되는 배포되는 서버)" unexplained error 오류가 발생했..

element ui 에서 table 에 대한 width 에 퍼센트를 주니까 작동을 하지 않았다. element ui 물론 퍼센트를 대체하기 위해 min-width 를 제공하는데 솔직히 퍼센트가 더 편하다. 그래서 스택오버플로우 검색해보니까 퍼센트는 아니지만 조금 다른 방법으로 동적으로 width 가 작동되도록 하는 법을 알게 되었다. ... data() { return{ tableMiniColumnWidth: 0, tableMiniColumnWidth: 0 }},mounted() { this.tableMiniColumnWidth= Math.round(this.$refs.userTable.$el.clientWidth/ 10) this.tableMiniColumnWidth= Math.round(this.$r..

템플릿 문법Vue.js 는 렌더링 된 DOM 을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용한다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석할 수 있는 유요한 HTML 이다.내부적으로 Vue 는 템플릿을 가상 DOM 렌더링 함수로 컴파일한다. 반응형 시스템과 결합된 Vue 는 앱 상태가 변경될 때 최소한으로 DOM 을 조작하고 다시 적용할 수 있는 최소환의 컴포넌트를 지능적으로 파악할 수 있다.가상 DOM 개념에 익숙하고 JavaScript의 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성을 할 수 있으며 선택사항으로 JSX 를 지원한다.보간법(Interpolation)문자열데이터 바인딩의 가장 기..

Vue 인스턴스Vue 인스턴스 만들기모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다.var vm = new Vue({ // 옵션 }) MVVM 패턴과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았다. 컨벤션으로, Vue 인스턴스를 참조하기 위해 종종 변수 vm(VieModel 의 약자) 를 사용한다.Vue 인스턴스를 인스턴스화 할 때에는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 options 객체를 전달해야한다. 전체 옵션 목록은 https://kr.vuejs.org/v2/api/ 여기서 찾을 수 있다.Vue 생성자는 미리 정의된 옵션으로 재사용 가능한 컴포넌트 생성자를 생성하도록 확장될 수 있다.Vue 앱은..

Vue.js 란?프론트엔드 자바스크립트 프레임워크이다. Vue.js 는 View 에만 초점을 두기 때문에 다른 라이브러리와 프레임워크와 혼용하기 쉽다고 한다.Vue.js 를 불러오기 위해선 Vue.js 에서 제공하는 CDN 주소에서 unpkg 에서 제공하는 링크를 사용하면 된다. 선언적 렌더링Vue.js 의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM 에 데이터를 렌더링하는 것이라고 한다. {{ message }} var app = new Vue({ el: '#app', data: { message: 'vue 하이룽' } }) vue 하이룽 마우스 올리면 동적으로 바인딩 된 title 을 볼 수 있음 var app2 = new Vue({ el : '#app-2', data: { message: ..