main.js import Vue from 'vue' import App from './App' import router from './router' //아래의 /src/router/index.js ​ new Vue({ el: '#app', router, store, render: h => h(App) }) ​ * /src/router/index.js (vue-cli를 사용하고 있을때 가정) import Vue from 'vue' import VueRouter from 'vue-router' ​ Vue.use(VueRouter) // vue-router를 사용하기 위한 설정 ​ import CustomerRouter from './modules/menu/customer' //아래의 customer.js ..

상위에서 하위컴포넌트로 데이터 전달( 동적 props) props를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다. ​ //하위 컴포넌트 detail.vue ​ ​ //상위 컴포넌트 contractDetail.vue ​ //contractDetail에게 보내는 상위 컴포넌트 //list.vue this.$router.push({ name: 'contract_detail', path: 'contractDetail', params: { seq: seq }}) $router.push를 사용하여 router로 parmas의 값을 던진다. ​ //contract.js router 파일 { path: 'contractDetail/:seq', hidden: true, component: () =..

export - export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼때 사용한다. - 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있다. ​ * export 문은 html 안에 작성한 스크립트에서는 사용할 수 없다. ​ ex) export let myVariable = Math.sqrt(2); export function myFunction() {...}; ​ //자식 모듈을 가져와 다시 내보낼수 있다. import foo from 'bar.js'; export foo; ​ ​ * export 와 export deafault 선언의 차이 ​ - export 로만 선언 // Obo.js export const a = 12; ​ import { a } from..

Getters란 : 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할때 중복된 코드를 반복호출 하게 되는것이다. 예) //App.vue computed: { doubleCounter() { return $store.state.counter * 2; } } ​ //Child.vue computed: { doubleCounter() { return $store.state.counter * 2; } } 이때 Vuex의 데이터(state) 변경을 각 컴포넌트에서 하는게 아닌 Vuex에서 수행하도록 하고 각 컴포넌트들은 Getters를 호출하여 수행한다. ​ //Getters 등록 // src/store/store.js import Vue from 'vue' imp..

네비게이션 가드 : 특정 URL에 접근할때 접근하지 못하도록 막는 방법 예) 사용자 인증정보(로그인)이 없을 경우 특정페이지에 접근하지 못하도록 막는다. : 특정 URL을 접근하지 못하도록 제어한다. ​ 네비게이션 가드 종류 * 전역가드 : 어플리케이션 전역에서 동작하는 전역가드 ​ * 라우터가드 : 특정 URL에서만 동작하는 라우터가드 ​ * 컴포넌트 가드 : 라우터 컴포넌트 가드에 정의하는 컴포넌트 가드 ​ 전역가드 const router = new VueRouter({ ​ }) ​ //라우터 변수 아래에 추가 router.beforeEach(function(to, from, next){ //to = 이동할 URL 정보가 담긴 라우터 객체 //from = 현재 URL 정보가 담긴 라우터 객체 //ne..

URL.createObjectURL(Blob) 이란? : Blob 객체(이미지, 동영상 등 대용량 바이너리 객체)를 가상의 URL을 부여하여 접근할수 있게 한다. : 생성된 주소는 메모리에 올라가 있다. : createObjectURL(Blob)을 사용한 브라우저가 종료될 경우 메모리에 올라간 가상 URL은 사라지게 된다. ​ 예) Vue 환경 ​ View x Javascript methods: { imageUpload() { this.pdf_files = [ { file: this.$refs.files.files[0], preview: URL.createObjectURL(this.$refs.files.files[0]) } ] } } ​ * Blob(Binary Large Objects) 대용량 바이너리..