몽땅뚝딱 개발자

◽ 네비게이션 가드(navigation-guard) 네비게이션 가드란 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. ◽ 종류 1) 전역가드: 어플리케이션 전역에서 동작한다. - to: 이동할 URL 정보가 담긴 라우터 객체 - from: 현재 URL 정보가 담긴 라우터 객체 - next: to에서 지정한 URL로 이동하기 위해 반드시 호출해야하는 함수 const router = new VueRouter(); // beforeEach()를 호출하고나면 모든 라우팅이 대기상태가 된다. // URL로 라우팅하기위해서는 next()를 호출해야한다. router.beforeEach(function( to, from, next ) { // 'isPassed'는 내가 정의한 속성값으로 로그인을 한 경..

◽ .sync prop에 대해 양방향 바인딩이 필요한 경우가 있다. "undate:myPropNm" 같은 패턴이 권장되어 아래와 같이 작성하면 양방향 바인딩을 할 수 있다. 그리고 위와 같은 패턴을 .sync 수식어를 통해 표현하여 줄일 수 있다. 출처 https://kr.vuejs.org/v2/guide/components-custom-events.html#sync-%EC%88%98%EC%8B%9D%EC%96%B4 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

◽ 개요 많은 컴포넌트에서 사용하고 싶은 데이터나 유틸리티가 있지만 global scope에 의해 오염되는 것은 원하지 않는다. 이 때 이런 것들을 prototype에서 정의하면 각 Vue instance에서 사용할 수 있다. ◽ 문법 앞에 $를 붙여준다. 이 기호는 Vue에서 사용하는 것으로, 모든 인스턴스에서 사용가능한 프로퍼티라고 알려주는 하나의 방식이다. 변수나 computed 요소, 메소드 등의 이름이 겹치는 경우가 있을 수 있으므로 이 기호를 사용하면 같은 이름으로 인한 충돌을 피할 수 있다. // 데이터 정의하기 Vue.prototype.$appName = 'My App' // function 정의하기 Vue.prototype.$appName = function thisFunc() { // ..

◽ apply(thisArg, [argArray]) // function.prorototype.apply() func.apply(thisArg, [argArray]); 메서드를 호출할 때 function 내부의 this를 매개변수인 thisArg로 바인딩 시킨다. argArray는 메서드에 인자로 사용된다. let max = Math.max.apply(null, [3, 1, 5]); console.log("max >>> ", max); // => 5 let min = Math.min.apply(null, [3, 1, 5]); console.log("min >>> ", min); // => 1 ◽ call(thisArg[,arg1[,arg2[,...]]]) // function.prorototype.cal..

◽ $on(event, callback) 이벤트를 할당한다. // 이벤트이름과 함수를 지정한다. this.$on('test', function(data) { console.log('data is ', data); }) // $emit으로 호출할 수 있다. this.$emit('test', 'hi') // => data is hi ◽ Arguments { string | Array } event (배열은 2.2.0 이상에서만 지원) { function } callback 출처 https://vuejs.org/v2/api/#vm-on 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

Vue 객체의 속성 중 $가 붙은 것은 '내장 객체'라고 하며, 각 컴포넌트의 option들에 접근할 수 있는 속성들이다. console.log(this)를 찍어보면 options 밑에 여러 객체가 있는 것을 확인할 수 있다. ◽ $data 컴포넌트 인스턴스의 data 옵션에 접근한다. ◽ $el 엘리먼트에 접근한다. ◽ $root 현재 컴포넌트 트리의 root Vue 인스턴스를 찾는다. 현재 인스턴스에 부모가 없다면 $root 값은 현재 인스턴스이다. ◽ $options 해당 컴포넌트의 option들에 접근할 수 있다. 컴포넌트의 스크립트 영역 안에 정의된 data, created, method, props 등을 option이라 일컫는다. 이미 정의된 옵션말고도 커스터마이징한 옵션에도 접근할 수도 있다..

axios...🤦🏻‍♀️ 새로운건 왜 이렇게 많을까.. 머리가 조금 아프지만.. 내 프로젝트에도 적용해 볼 예정... ◽ interceptor 모두가 알다시피 '가로채다'라는 의미이다. 내가 만드는 귀여운 프로젝트는 header에 어떤 값도 실을 필요가 없어서(나의 편의를 위한..) 필요성을 느끼지 못했다. 하지만 생각해보면 매번 API를 호출할 때 마다 header에 똑같은 값을 싣는 로직을 쓸 수는 없는 노릇이다. axios의 interceptors를 사용하면 요청/응답 시 필요한 동작을 처리해주고 에러도 한번에 처리할 수 있다. ◽ 사용방법 // 요청 인터셉터 추가 axios.interceptors.request.use( function (config) { // 요청을 보내기 전에 수행할 일 // ..

Vue의 Built-In Components ◽ component 이 컴포넌트는 Build-In Component로 동적 컴포넌트를 렌더링 하기 위한 '메타 컴포넌트'라고 한다. 렌더링 할 실제 컴포넌트는 is prop에 의해 결정된다. ◽ is 속성 is 속성에는 문자열이나 컴포넌트 이름을 넣는다. ◽ 예제 ◽ keep-alive를 사용하는 동적 컴포넌트 is 속성을 사용하는 경우 다시 돌아왔을 때 계속해서 재렌더링 되어 기존의 클릭값이나 기존 데이터가 유지되지 않는다. 그래서 처음 생성된 컴포넌트 인스턴스가 캐시되기를 원하는 경우에 엘리먼트로 감싼다. 출처 https://v3.ko.vuejs.org/api/built-in-components.html#component 개인적으로 공부한 내용을 정리하는..

항상 보이던 $nextTick()... 대충 promise 같은 개념이라고만 생각하고 있었다. 미루고 미루다가 이제서야 정리해봄... ^^ ◽ 개요 Vue.js에서 mounted()는 DOM의 모든 변경사항을 반영하고나서 실행되는 훅이다. Javascript는 비동기로 처기되기때문에 DOM의 모든 변경사항이 반영 되기 전에 DOM에 접근하려고하면 undefined나 null 에러가 발생한다. 따라서 Vue.js에서는 데이터 갱신, UI 업데이트 등DOM의 모든 변경사항이 완전히 반영된 후에 로직을 실행할 수 있도록 nextTick()을 제공한다. ◽ $nextTick() Vue.nextTick( [callback, context] ) ◽ $nextTick() 사용해보기 // 실행할 함수를 $nextTic..

◽ 설치하기 npm i deepmerge ◽ API - merge(x, y, [options]) import deepmerge from 'deepmerge' methods: { test() { const a = { name: 'davinch', } const b = { age: 132, birth: 230908, } const output = deepmerge(a, b) console.log(output) // { age: 132, birth: 230908, name: "davinch" } }; } - merge.all(arrayOfObjects, [options]) import deepmerge from 'deepmerge' methods: { test() { const foobar = { foo: {..